{"id":15890214,"url":"https://github.com/hph/dynamic-css-properties","last_synced_at":"2026-04-11T21:38:25.722Z","repository":{"id":57217625,"uuid":"91957580","full_name":"hph/dynamic-css-properties","owner":"hph","description":"A tiny utility to update custom CSS properties on the fly. Think \"theming\"!","archived":false,"fork":false,"pushed_at":"2017-05-21T13:36:40.000Z","size":48,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-28T22:37:20.770Z","etag":null,"topics":["css","css-in-js","css-variables"],"latest_commit_sha":null,"homepage":"https://codepen.io/haukurpallh/pen/pwogOp","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hph.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-21T13:03:52.000Z","updated_at":"2023-03-10T10:08:27.000Z","dependencies_parsed_at":"2022-08-28T21:00:42.172Z","dependency_job_id":null,"html_url":"https://github.com/hph/dynamic-css-properties","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hph%2Fdynamic-css-properties","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hph%2Fdynamic-css-properties/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hph%2Fdynamic-css-properties/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hph%2Fdynamic-css-properties/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hph","download_url":"https://codeload.github.com/hph/dynamic-css-properties/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246856689,"owners_count":20844974,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-in-js","css-variables"],"created_at":"2024-10-06T07:04:34.217Z","updated_at":"2026-04-11T21:38:20.686Z","avatar_url":"https://github.com/hph.png","language":"JavaScript","readme":"dynamic-css-properties\n======================\n\nThis tiny library exposes a single function in order to dynamically set custom\nCSS properties ([CSS variables](https://www.w3.org/TR/css-variables/)).\n\n### Features\n\n- Simple API – takes an object of properties and values to update and\n  automatically converts `camelCased` property names to `--kebab-case` for you.\n- Defaults to writing the properties to `document.documentElement` (the root\n  node) but allows you to specify a subnode to update instead (custom CSS\n  properties follow the standard cascading rules).\n- It doesn't do much, but it still feels like magic!\n\n### Install\n\n    yarn add dynamic-css-properties\n\n### Usage\n\n#### Importing the library\n\nES6 modules:\n\n```javascript\nimport setCustomProperties from 'dynamic-css-properties';\n```\n\nCommonJS:\n\n```javascript\nconst setCustomProperties = require('dynamic-css-properties');\n```\n\nScript tag (adds a `setCustomProperties` global):\n\n```html\n\u003cscript src=\"https://unpkg.com/dynamic-css-properties@latest/dist/dynamic-css-properties.min.js\"\u003e\u003c/script\u003e\n```\n\n#### Using the library\n\nA minimal example:\n\n```javascript\nsetCustomProperties({\n  primaryTextColor: 'hotpink',\n  backgroundColor: 'papayawhip',\n});\n```\n\nNow simply use the variables:\n\n```css\nbody {\n  color: var(--primary-text-color, #1e1e1e);\n  background-color: var(--background-color, #fff);\n}\n```\n\nAs soon as the code is executed, the custom properties will be added to the\ndocument. Should you wish to only update part of the document you may specify a\nparticular node as the second argument, and only it and its children will be\naffected.\n\n### Caveat\n\nUsing this for serious business is not a good idea, unless you know that all\nyour users are running browsers or environments (such as Electron) that support\ncustom CSS properties. See [here](http://caniuse.com/#feat=css-variables).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhph%2Fdynamic-css-properties","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhph%2Fdynamic-css-properties","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhph%2Fdynamic-css-properties/lists"}