{"id":23946140,"url":"https://github.com/ermos/css-vars-manager","last_synced_at":"2026-05-16T09:04:27.444Z","repository":{"id":99161424,"uuid":"296669019","full_name":"ermos/css-vars-manager","owner":"ermos","description":"CSS Variables Management with JS","archived":false,"fork":false,"pushed_at":"2020-09-22T12:52:47.000Z","size":18,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-18T07:37:50.810Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/ermos.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-18T16:06:34.000Z","updated_at":"2020-10-08T07:00:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"34d63015-0e7f-4d69-ac6c-e2e344adad29","html_url":"https://github.com/ermos/css-vars-manager","commit_stats":{"total_commits":18,"total_committers":1,"mean_commits":18.0,"dds":0.0,"last_synced_commit":"60d00654cd95facf81c1fa851b712c268757d237"},"previous_names":["ermos/cssvars"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ermos%2Fcss-vars-manager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ermos%2Fcss-vars-manager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ermos%2Fcss-vars-manager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ermos%2Fcss-vars-manager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ermos","download_url":"https://codeload.github.com/ermos/css-vars-manager/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240434302,"owners_count":19800550,"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":[],"created_at":"2025-01-06T08:28:41.426Z","updated_at":"2026-05-16T09:04:27.409Z","avatar_url":"https://github.com/ermos.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSS Vars Manager\n\u003e Manage your CSS variables dynamically with Javascript\n\nCSS Vars Manager is a ready to use CSS Variable's Manager using javascript.\nYou can set variable dynamically and update them without write one thousand line of code.\nThe libary offers a css variables importer, useful for a dark mode theme for example.\n\n## 🚀 Install\n\n```\nnpm i css-vars-manager\n```\n\n## 🔦 Usage\n\nThe library contains two object that you can import on your project, `cssVars` to manage you're CSS variables and\n`darkMode` for working with browser dark mode feature. Let's see what you can make with this package.\n\n### Working\n\nall `cssVars`'s method work with a classic object's interface :\n\n```typescript\n interface varsCollection {\n    tag: string\n    color?: string\n    value?: string\n    shadeCount?: number\n}\n```\n\nObjects need to contain `tag`'s key, this is you're css tag's name. If you want working with color, you need to use `color`'s\nkey, with that we can generate shade of your color. Per default we generate zero shade,\nyou need to specify how many shade you want with using `shadeCount`'s key. For other type of css variable, you can simply use\n`value`'s key.\n\n- [cssVars](#css-vars)\n- [darkMode](#dark-mode)\n\n-----------\n\n\u003ch1 id=\"css-vars\"\u003ecssVars\u003c/h1\u003e\n\n### Methods\n\n- [set()](#set)\n- [get()](#get)\n- [update()](#update)\n- [setCollection()](#set-collection)\n- [importCollection()](#import-collection)\n- [getShadeFromHex()](#get-shade-from-hex)\n- [getShadeFromVar()](#get-shade-from-vars)\n\n-----------\n\n\u003ch3 id=\"set\"\u003eset()\u003c/h3\u003e\n\n\u003e Allows you to push a variable.\n\n#### Example\n```javascript\nimport { cssVars } from \"css-vars-manager\";\n\ncssVars.set({\n    tag: \"--interface-size\",\n    value: \"1200px\"\n});\ncssVars.set({\n    tag: \"--main-color\",\n    color: \"#000\",\n    shadeCount: 1\n});\n```\n\n#### Result\n```css\nhtml {\n    --interface-size: 1200px;\n    --main-color: #000;\n    --main-color-light-1: #222;\n    --main-color-dark-1: #000;\n}\n```\n\n-----------\n\n\u003ch3 id=\"get\"\u003eget()\u003c/h3\u003e\n\n\u003e Get a variable's value.\n\n#### Example\n```css\nhtml {\n    --interface-size: \"1200px\";\n    --main-color: #000;\n}\n```\n```javascript\nimport { cssVars } from \"css-vars-manager\";\n\nconsole.log(\n    cssVars.get(\"--interface-size\"),\n    cssVars.get(\"--main-color\")\n);\n```\n\n#### Result\n```\nconsole \u003e 1200px #000\n```\n\n-----------\n\n\u003ch3 id=\"update\"\u003eupdate()\u003c/h3\u003e\n\n\u003e Allows you to update a variable.\n\nIf your variable have been add with `color`'s tag, you don't need to specify `shadeCount`'s tag, we use the `shadeCount` you\nused for initialize this variable.\n\n#### Example\n```javascript\nimport { cssVars } from \"css-vars-manager\";\n\ncssVars.update({\n    tag: \"--interface-size\",\n    value: \"1200px\"\n});\ncssVars.update({\n    tag: \"--main-color\",\n    color: \"#FFF\",\n});\n```\n\n#### Result\n```css\nhtml {\n    --interface-size: 1200px;\n    --main-color: #FFF;\n    --main-color-light-1: #FFF;\n    --main-color-dark-1: #DDD;\n}\n```\n\n-----------\n\n\u003ch3 id=\"set-collection\"\u003esetCollection()\u003c/h3\u003e\n\n\u003e Allows to set multiple css variables from an array.\n\n#### Example\n```javascript\nimport { cssVars } from \"css-vars-manager\";\n\ncssVars.setCollection(\n    [\n        {\n            tag: \"--logo\",\n            value: \"url('/static/logo.svg')\",\n        },\n        {\n          tag: \"--main-color\",  // # Variable's name\n          color: \"#000\",        // # Variable's color\n          shadeCount: 3,        // # Number of shades (light and darkness)\n        },\n        {\n          tag: \"--sub-color\",\n          color: \"#000\",\n          shadeCount: 1,\n        },\n        {\n          tag: \"--neutral-color\",\n          color: \"#d5514b\",\n        },\n    ],\n)\n```\n#### Result\n```css\nhtml {\n    --logo: url('/static/logo.svg');\n    --main-color: #fff;\n    --main-color-light-1: #FFF;\n    --main-color-dark-1: #DDD;\n    --main-color-light-2: #FFF;\n    --main-color-dark-2: #BBB;\n    --main-color-light-3: #FFF;\n    --main-color-dark-3: #999;\n    --sub-color: #000;\n    --sub-color-light-1: #222;\n    --sub-color-dark-1: #000;\n    --neutral-color: #d5514b;\n}\n```\n\n-----------\n\n\u003ch3 id=\"import-collection\"\u003eimportCollection()\u003c/h3\u003e\n\n\u003e Allows to import a variables configuration from JSON file.\n\n#### Example\n\n##### dark.json\n````json\n[\n  {\n    \"tag\": \"--logo\",\n    \"value\": \"url('/static/logo_dark.svg')\"\n  },\n  {\n    \"tag\": \"--main-color\",\n    \"color\": \"#000\",\n    \"shadeCountolor\": 3\n  },\n  {\n    \"tag\": \"--text-color\",\n    \"color\": \"#fff\",\n    \"shadeCountolor\": 1\n  },\n  {\n    \"tag\": \"--neutral-color\",\n    \"color\": \"#d5514b\"\n  }\n]\n````\n\n```javascript\nimport { cssVars } from \"css-vars-manager\";\n\ncssVars.importCollection(\"/static/theme/dark.json\");\n```\n\n#### Result\n```css\nhtml {\n    --logo: url('/static/logo_dark.svg');\n    --main-color: #000;\n    --main-color-light-1: #FFF;\n    --main-color-dark-1: #DDD;\n    --main-color-light-2: #FFF;\n    --main-color-dark-2: #BBB;\n    --main-color-light-3: #FFF;\n    --main-color-dark-3: #999;\n    --text-color: #fff;\n    --text-color-light-1: #222;\n    --text-color-dark-1: #000;\n    --neutral-color: #d5514b;\n}\n```\n\n-----------\n\n\u003ch3 id=\"get-shade-from-hex\"\u003egetShadeFromHex()\u003c/h3\u003e\n\n\u003e Allows you to create shade from a hex color.\n\n#### Example\n```javascript\nimport { cssVars } from \"css-vars-manager\";\n\nconsole.log(\n    \"#000 lighter :\",\n    cssVars.getShadeFromHex(\"#000\", 2)\n);\n\nconsole.log(\n    \"#000 darkness :\",\n    cssVars.getShadeFromHex(\"#000\", -2)\n);\n```\n\n#### Result\n```\nconsole \u003e #000 lighter : #222\nconsole \u003e #000 darkness : #000\n```\n\n-----------\n\n\u003ch3 id=\"get-shade-from-vars\"\u003egetShadeFromVar()\u003c/h3\u003e\n\n\u003e Allows you to create shade from a variable's color (in hexadecimal).\n\n#### Example\n```css\nhtml {\n    --main-color: \"#FFF\";\n}\n```\n```javascript\nimport { cssVars } from \"css-vars-manager\";\n\nconsole.log(\n    \"--main-color lighter :\",\n    cssVars.getShadeFromVar(\"--main-color\", 2)\n);\n\nconsole.log(\n    \"--main-color darkness :\",\n    cssVars.getShadeFromVar(\"--main-color\", -2)\n);\n```\n\n#### Result\n```\nconsole \u003e --main-color lighter : #FFF\nconsole \u003e --main-color darkness : #DDD\n```\n\n-----------\n\n\u003ch1 id=\"dark-mode\"\u003edarkMode\u003c/h1\u003e\n\n### Methods\n\n- [init()](#init)\n- [watcher()](#watcher)\n\n-----------\n\n\u003ch3 id=\"init\"\u003einit()\u003c/h3\u003e\n\n\u003e Initialize dark mode module\n\nYou need to specify two JSON files, one for dark theme and one for light theme,\nfiles need to use `varCollection`'s object structure.\n\n#### Example\n```javascript\nimport { darkMode } from \"css-vars-manager\";\n\ndarkMode.init(\n    \"/static/template/light.json\",\n    \"/static/template/dark.json\"\n)\n```\n\n-----------\n\n\u003ch3 id=\"watcher\"\u003ewatcher()\u003c/h3\u003e\n\n\u003e Trigger dark mode change from user computer\n\n#### Example\n```javascript\nimport { darkMode } from \"css-vars-manager\";\n\ndarkMode.watcher()\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fermos%2Fcss-vars-manager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fermos%2Fcss-vars-manager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fermos%2Fcss-vars-manager/lists"}