{"id":18302985,"url":"https://github.com/etchteam/storybook-addon-css-variables-theme","last_synced_at":"2025-04-05T14:07:05.279Z","repository":{"id":39800909,"uuid":"377419511","full_name":"etchteam/storybook-addon-css-variables-theme","owner":"etchteam","description":"Change the CSS variable based design tokens in your storybook on the fly","archived":false,"fork":false,"pushed_at":"2025-03-28T22:45:58.000Z","size":2571,"stargazers_count":30,"open_issues_count":2,"forks_count":10,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-03T03:33:28.646Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/etchteam.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":"2021-06-16T08:07:36.000Z","updated_at":"2025-03-28T22:46:01.000Z","dependencies_parsed_at":"2024-04-30T14:43:24.793Z","dependency_job_id":"6735395e-40a6-475c-8de2-4da6f636c4d0","html_url":"https://github.com/etchteam/storybook-addon-css-variables-theme","commit_stats":{"total_commits":92,"total_committers":11,"mean_commits":8.363636363636363,"dds":0.7173913043478262,"last_synced_commit":"64f5e8f804604d45817473f46da01fea4eff099b"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etchteam%2Fstorybook-addon-css-variables-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etchteam%2Fstorybook-addon-css-variables-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etchteam%2Fstorybook-addon-css-variables-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etchteam%2Fstorybook-addon-css-variables-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/etchteam","download_url":"https://codeload.github.com/etchteam/storybook-addon-css-variables-theme/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247345853,"owners_count":20924102,"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":"2024-11-05T15:23:31.558Z","updated_at":"2025-04-05T14:07:05.257Z","avatar_url":"https://github.com/etchteam.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Storybook Addon CSS Variables Theme\n\nStorybook CSS Variables Theme can be used to switch out CSS files in [Storybook](https://storybook.js.org).\n\n![React Storybook Screenshot](https://raw.githubusercontent.com/etchteam/storybook-addon-css-variables-theme/master/screenshot.gif)\n\n## Installation\n\n```sh\nnpm install @etchteam/storybook-addon-css-variables-theme --save-dev\n```\n\n## Configuration\n\n### Step 1: Add the addon\n\nCreate a file called `main.js` in your `.storybook` folder.\n\nAdd the following code to it:\n\n```js\nmodule.exports = {\n  addons: ['@etchteam/storybook-addon-css-variables-theme'],\n};\n```\n\n### Step 2: Include your CSS files\n\nCreate a file called `preview.js` in your `.storybook` folder.\n\nIn this file you will need to import your style files using a loader. Here's an example of how to do this:\n\n```js\nimport light from '!!style-loader?injectType=lazyStyleTag!css-loader!../src/styles/light.css'\nimport dark from '!!style-loader?injectType=lazyStyleTag!css-loader!../src/styles/dark.css'\n```\n\nThis code calls `style-loader` with `?injectType=lazyStyleTag` so that it doesn't run the CSS immediately.\n\nYou can swap out `css-loader` for your preferred SCSS/Less/etc loaders.\n\nAny loaders used here will need to be installed in your project: `npm i -D style-loader css-loader`\n\n### Step 3: Add the Decorator\n\nIn the same `preview.js` file import the decorator from the CSS Variables Theme addon\n\n```js\nimport cssVariablesTheme from '@etchteam/storybook-addon-css-variables-theme'\n\nexport const decorators = [\n  cssVariablesTheme,\n];\n```\n\nThen pass the CSS files to the addon via the exported parameters.\n\n```js\nexport const parameters = {\n  cssVariables: {\n    files: {\n      'Light Theme': light,\n      'Dark Theme': dark,\n    }\n  }\n}\n```\n\nIf a default theme should be selected from first load add 'defaultTheme' to the options.\n\n```js\nexport const parameters = {\n  cssVariables: {\n    files: {\n      'Light Theme': light,\n      'Dark Theme': dark,\n    },\n    defaultTheme: 'Light Theme'\n  }\n}\n```\n\n## How to\n\n### Set a specific theme for a story\n\nPass the theme key as the `theme` parameter on the story to default to a specific theme:\n\n```js\nexport default {\n  title: 'Example/Header',\n  component: Header,\n  parameters: {\n    cssVariables: {\n      theme: 'dark'\n    }\n  }\n};\n```\n\n### Get the currently enabled theme within stories\n\nYou can access the currently set theme from the context object provided by storybook as the second parameter.\n\n```js\n\nconst Template: ComponentStory\u003ctypeof Button\u003e = (args, context) =\u003e (\n  \u003cButton {...args}\u003e{context.globals.cssVariables ?? 'No theme'}\u003c/Button\u003e\n);\n\n```\n\nAlternatively watch the custom `storybookcssvariables:theme:change` event on the `document`.\n\n```js\ndocument.addEventListener(\n  'storybookcssvariables:theme:change',\n  (event: CustomEvent) =\u003e {\n    console.info(`The theme changed to ${event?.detail?.theme}`);\n  },\n);\n```\n\n\n### Set a Theme by Query String\n\nThemes are stored in storybook globals.\n\nPass the theme to the url as a query by adding `\u0026globals=cssVariables:mytheme` to the url.\nIf multi word theme query is `\u0026globals=cssVariables:my+theme`\n\n### Use in MDX docs\n\nThis addon applies styles through a [decorator](https://storybook.js.org/docs/addons/addons-api#makedecorator).\n\nSo, within MDX files, [styles will only apply to a `\u003cStory\u003e` or `\u003cCanvas\u003e`](https://github.com/storybookjs/storybook/issues/12290#issuecomment-682404317).\n\n---\n\nMade with ☕ at [Etch](https://etch.co)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fetchteam%2Fstorybook-addon-css-variables-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fetchteam%2Fstorybook-addon-css-variables-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fetchteam%2Fstorybook-addon-css-variables-theme/lists"}