{"id":15662314,"url":"https://github.com/wendelladriel/css-theme-manager","last_synced_at":"2025-08-20T03:34:58.188Z","repository":{"id":90777810,"uuid":"183114028","full_name":"WendellAdriel/css-theme-manager","owner":"WendellAdriel","description":"Zero dependency lib to manage CSS themes easily for your app","archived":false,"fork":false,"pushed_at":"2019-04-24T23:10:19.000Z","size":11,"stargazers_count":19,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-12T13:07:15.656Z","etag":null,"topics":["css","management","theme","themes","theming"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WendellAdriel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2019-04-24T00:08:08.000Z","updated_at":"2023-11-13T23:46:26.000Z","dependencies_parsed_at":null,"dependency_job_id":"be4f9aef-5ff4-4de3-9d2a-aebd91ae1b12","html_url":"https://github.com/WendellAdriel/css-theme-manager","commit_stats":{"total_commits":4,"total_committers":1,"mean_commits":4.0,"dds":0.0,"last_synced_commit":"550b0659986915c6cde21248128f28b515614bf9"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WendellAdriel%2Fcss-theme-manager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WendellAdriel%2Fcss-theme-manager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WendellAdriel%2Fcss-theme-manager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WendellAdriel%2Fcss-theme-manager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WendellAdriel","download_url":"https://codeload.github.com/WendellAdriel/css-theme-manager/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252591045,"owners_count":21773013,"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","management","theme","themes","theming"],"created_at":"2024-10-03T13:31:39.672Z","updated_at":"2025-05-05T23:21:25.902Z","avatar_url":"https://github.com/WendellAdriel.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSS Theme Manager\n\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](https://github.com/WendellAdriel/css-theme-manager/blob/master/LICENSE)\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)\n\n[![version][version-badge]][package]\n[![downloads][downloads-badge]][npmcharts]\n[![size][size-badge]][unpkg-dist] [![gzip size][gzip-badge]][unpkg-dist]\n\n[![Watch on GitHub][github-watch-badge]][github-watch]\n[![Star on GitHub][github-star-badge]][github-star]\n[![Tweet][twitter-badge]][twitter]\n\nZero dependency lib to manage CSS themes easily for your app\n\n## How to use\n\nInstall the package\n\n```\nnpm install css-theme-manager --save\n// or with yarn\nyarn add css-theme-manager\n```\n\nImport it and init the **CSS Theme Manager** with a default theme.\nA `theme` is an object with the name of your variables as keys and the value of the variables as the values.\n\n```js\nimport CSSThemeManager from 'css-theme-manager'\n\nconst themeManager = new CSSThemeManager({\n  'bg-color': '#fff',\n  'text-color': 'darkblue',\n  'featured-font': 'Verdana, sans-serif'\n})\n```\n\nThis will create and insert the given variables in the `:root` selector.\nAll the variables created with this **CSS Theme Manager** will have a `csstm-` prefix.\nThe code above will result in:\n\n```css\n:root {\n    --csstm-bg-color: '#fff';\n    --csstm-text-color: 'darkblue';\n    --csstm-featured-font: 'Verdana, sans-serif';\n}\n```\n\nCheck the **API Reference** below to check all that you can do with this package.\n\n## API Reference\n\n### createTheme(name: String, config: Object)\n\nCreates and registers a new theme with the given name and config.\n\n```js\n// import and init the themeManager\n// ...\nthemeManager.createTheme('dark', {\n  'bg-color': '#222',\n  'text-color': '#ddd'\n})\n```\n\n### applyTheme(selector: String, theme: String)\n\nApplies the given theme to all elements matching the given selector. You can pass any selector you would pass to the **[document.querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)** function.\n\n```js\n// import and init the themeManager\n// ...\nthemeManager.createTheme('dark', {\n  'bg-color': '#222',\n  'text-color': '#ddd'\n})\n\nthemeManager.applyTheme('html', 'dark')\n```\n\n### removeTheme(theme: String)\n\nRemoves and unregisters the given theme.\n\n```js\n// import and init the themeManager\n// ...\nthemeManager.createTheme('dark', {\n  'bg-color': '#222',\n  'text-color': '#ddd'\n})\n\nthemeManager.applyTheme('html', 'dark')\nthemeManager.removeTheme('dark')\n```\n\n## Example\n\nYou can find an example on how to work with this lib in this **[CodeSandbox](https://codesandbox.io/s/p70jv0l2vj).**\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore --\u003e\n| [\u003cimg src=\"https://avatars1.githubusercontent.com/u/11641518?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eWendell Adriel\u003c/b\u003e\u003c/sub\u003e](https://wendelladriel.com)\u003cbr /\u003e[💻](https://github.com/WendellAdriel/jodit-vue/commits?author=WendellAdriel \"Code\") [📖](https://github.com/WendellAdriel/jodit-vue/commits?author=WendellAdriel \"Documentation\") [💡](#example-WendellAdriel \"Examples\") [🤔](#ideas-WendellAdriel \"Ideas, Planning, \u0026 Feedback\") |\n| :---: |\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!\n\n[downloads-badge]: https://img.shields.io/npm/dm/css-theme-manager.svg?style=flat-square\n[npmcharts]: http://npmcharts.com/compare/css-theme-manager\n[version-badge]: https://img.shields.io/npm/v/css-theme-manager.svg?style=flat-square\n[package]: https://www.npmjs.com/package/css-theme-manager\n[size-badge]: http://img.badgesize.io/https://unpkg.com/css-theme-manager/dist/css-theme-manager.js?style=flat-square\u0026label=size\n[unpkg-dist]: https://unpkg.com/css-theme-manager/dist/css-theme-manager.js\n[gzip-badge]: http://img.badgesize.io/https://unpkg.com/css-theme-manager/dist/css-theme-manager.js?label=gzip%20size\u0026style=flat-square\u0026compression=gzip\n[github-watch-badge]: https://img.shields.io/github/watchers/WendellAdriel/css-theme-manager.svg?style=social\n[github-watch]: https://github.com/WendellAdriel/css-theme-manager/watchers\n[github-star-badge]: https://img.shields.io/github/stars/WendellAdriel/css-theme-manager.svg?style=social\n[github-star]: https://github.com/WendellAdriel/css-theme-manager/stargazers\n[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20css-theme-manager!%20https://github.com/WendellAdriel/css-theme-manager%20%F0%9F%91%8D\n[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/WendellAdriel/css-theme-manager.svg?style=social\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwendelladriel%2Fcss-theme-manager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwendelladriel%2Fcss-theme-manager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwendelladriel%2Fcss-theme-manager/lists"}