{"_id":"@dhruvkb/storybook-addon-themes","_rev":"4-c215b262c10fbd31ddb5b367d803bdf9","name":"@dhruvkb/storybook-addon-themes","dist-tags":{"latest":"6.2.1"},"versions":{"6.1.0":{"name":"@dhruvkb/storybook-addon-themes","version":"6.1.0","description":"A storybook addon to switch between different themes for your preview","keywords":["addon","frontend","react","reactjs","storybook","storybookjs","svelte","theme","tool","ui","user interface","vue","vuejs","storybook-addon","style"],"homepage":"https://github.com/tonai/storybook-addon-themes","bugs":{"url":"https://github.com/tonai/storybook-addon-themes/issues"},"repository":{"type":"git","url":"git+https://github.com/tonai/storybook-addon-themes.git"},"license":"MIT","author":{"name":"tonai"},"main":"dist/react.js","types":"dist/react.d.ts","scripts":{"prepare":"node ./scripts/prepare.js"},"dependencies":{"@storybook/addons":"^6.0.0","@storybook/api":"^6.0.0","@storybook/components":"^6.0.0","@storybook/core-events":"^6.0.0","@storybook/theming":"^6.0.0","core-js":"^3.6.4","global":"^4.4.0","memoizerific":"^1.11.3"},"devDependencies":{"@babel/cli":"^7.8.3","@babel/core":"^7.8.3","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/plugin-proposal-export-default-from":"^7.8.3","@babel/plugin-proposal-object-rest-spread":"^7.8.3","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-transform-runtime":"^7.8.3","@babel/preset-env":"^7.8.3","@babel/preset-flow":"^7.8.3","@babel/preset-react":"^7.8.3","@babel/preset-typescript":"^7.8.3","@types/jest":"^25.1.1","@types/node":"^13.7.0","@types/react":"^16.8.14","@types/webpack":"^4.41.4","@types/webpack-env":"^1.15.1","babel-plugin-dynamic-import-node":"^2.3.0","babel-plugin-emotion":"^10.0.27","babel-plugin-macros":"^2.8.0","babel-plugin-require-context-hook":"^1.0.0","chalk":"^3.0.0","npmlog":"^4.1.2","shelljs":"^0.8.3","typescript":"~3.7.5"},"peerDependenciesMeta":{"react":{"optional":true},"svelte":{"optional":true},"vue":{"optional":true}},"publishConfig":{"access":"public"},"storybook":{"displayName":"Theme switcher","unsupportedFrameworks":["react-native"]},"gitHead":"167d9ff2932d6d38c6a9fd22806d0d2d505f83ce","_id":"@dhruvkb/storybook-addon-themes@6.1.0","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-nOTHlGOB6aK0dr/QL39F84Ka0X16MMW45aCjDLiCy4Ne18DyHNehsrbstUcb02feNVSJDPfTx1eXd0E8zBMlAA==","shasum":"c0f422d4694474921ce5c6b7bb82a48dc0c859bb","tarball":"https://registry.npmjs.org/@dhruvkb/storybook-addon-themes/-/storybook-addon-themes-6.1.0.tgz","fileCount":84,"unpackedSize":222872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgsejECRA9TVsSAnZWagAAwo4P/3lOkfH3U9ocaTEnnbCW\ngIqnqYQZKmuCSOhoraspWzgt0sKcB171dhEQxSu3Vjau0ZOi1iNPCM3bYb7c\n2Fk74DcXSf8Cy0X5PtcVej6hrkcqXW00H7VfSk1TLS/U4yq6OEg7m9NWInc4\n4vvHkonW2cnPhXWbQrokFQj/kLnnG1HsuucuzRdLh6fjMMzsVyp3347nmRQR\nZJzm+c6nvqudSrpQY3YDVaBKR7M8p36+iNwKYlikD7lEEl6vFL0fCm6VOvi3\nFSsj/xPtyax05Gbo8zn25LhLTAiDcA9rgz5T2jSZ3WsZInCeN+QzoxR4eA+5\njYJs98pfaTxLX0dSNGKBfl4Jh8MRHgKYJwND+kiuTD/c0byVJOMkpDiEHZtE\neSSrGqS9F1Bl2ra+uIJDhzM0c9so646zRVtZkExf9Z6J7ddCx2DBEX1Zfut6\nNXZ3Vw8R16gosCZyxrVDMSZ6Ttah/ZctG4STN1F1twuu6LhyKce3jPvpiqPf\nhF0gPNDHbNEcmRaZbJqZ5cAV2+l1T2p0s9Xf77J4ApAYPYoEr+Vr9GI7AtIS\ndjILfGM6WtvQ3xUHLlsfnLOLumrV/kmxaJv6E3ApCnxx3UN6G+/3dPWRpNQ+\nGhz0llTpHpc84NL8e/ll8dcR0SPJsVbbAr0KYl0wlaNAauLtaKgC52vGN6Jl\nZMYM\r\n=nPzU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNvEef3x0/JnhLMU6qOptpndwhJJhMz2iILEMmLkH7AgIgL9Zj3PLwl52iwMHs7vTimFlx+TfE16Qwi0CviEDCzjk="}]},"_npmUser":{"name":"dhruvkb","email":"dhruv_b@live.com"},"directories":{},"maintainers":[{"name":"dhruvkb","email":"dhruv_b@live.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-themes_6.1.0_1622272195286_0.30683526887990475"},"_hasShrinkwrap":false,"deprecated":"This version is deprecated. Please update to a newer release."},"6.1.1":{"name":"@dhruvkb/storybook-addon-themes","version":"6.1.1","description":"A storybook addon to switch between different themes for your preview","keywords":["addon","frontend","react","reactjs","storybook","storybookjs","svelte","theme","tool","ui","user interface","vue","vuejs","storybook-addon","style"],"homepage":"https://github.com/dhruvkb/storybook-addon-themes","bugs":{"url":"https://github.com/dhruvkb/storybook-addon-themes/issues"},"repository":{"type":"git","url":"git+https://github.com/dhruvkb/storybook-addon-themes.git"},"license":"MIT","author":{"name":"dhruvkb"},"main":"dist/react.js","types":"dist/react.d.ts","scripts":{"prepare":"node ./scripts/prepare.js"},"dependencies":{"@storybook/addons":"^6.0.0","@storybook/api":"^6.0.0","@storybook/components":"^6.0.0","@storybook/core-events":"^6.0.0","@storybook/theming":"^6.0.0","core-js":"^3.6.4","global":"^4.4.0","memoizerific":"^1.11.3"},"devDependencies":{"@babel/cli":"^7.8.3","@babel/core":"^7.8.3","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/plugin-proposal-export-default-from":"^7.8.3","@babel/plugin-proposal-object-rest-spread":"^7.8.3","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-transform-runtime":"^7.8.3","@babel/preset-env":"^7.8.3","@babel/preset-flow":"^7.8.3","@babel/preset-react":"^7.8.3","@babel/preset-typescript":"^7.8.3","@types/jest":"^25.1.1","@types/node":"^13.7.0","@types/react":"^16.8.14","@types/webpack":"^4.41.4","@types/webpack-env":"^1.15.1","babel-plugin-dynamic-import-node":"^2.3.0","babel-plugin-emotion":"^10.0.27","babel-plugin-macros":"^2.8.0","babel-plugin-require-context-hook":"^1.0.0","chalk":"^3.0.0","npmlog":"^4.1.2","shelljs":"^0.8.3","typescript":"~3.7.5"},"peerDependenciesMeta":{"react":{"optional":true},"svelte":{"optional":true},"vue":{"optional":true}},"publishConfig":{"access":"public"},"storybook":{"displayName":"Theme switcher","unsupportedFrameworks":["react-native"]},"gitHead":"6bdef585e823bb2b89f5fd3a37c5fb60865a214a","_id":"@dhruvkb/storybook-addon-themes@6.1.1","_nodeVersion":"14.16.0","_npmVersion":"7.18.1","dist":{"integrity":"sha512-Byj2uvoc4sa/a7S94Q4uOsSvsYuXyxHFl9f0rUI9yp0ysXPC69X+dWFAlKJ5En90epTfbrk50LOGhcyQ2EXTmw==","shasum":"8e47f83ce256db8830f9648c3abccabed9f8cfc0","tarball":"https://registry.npmjs.org/@dhruvkb/storybook-addon-themes/-/storybook-addon-themes-6.1.1.tgz","fileCount":84,"unpackedSize":222880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1YfGCRA9TVsSAnZWagAA/yAP/RohIZI70yU9ydai1mSs\ne4fFyW0npl2SYp2uPMYwPCvIneDQlmtlYHYRI4JE0XctXUZQt8080Far5HnU\nnp6mrkyywUzY5RTG3eMsXcVbYJF6nuhtjxzbZGQgxDu+kW2xjHTH/069Mrjn\nIRE9/mV9bsk73roCYWsEetgCcOXOSfqoAQFzSbTuhwRFKmpueikLM46GzjUA\nlRQx0F5FCIef1BuOTbl28FTLHBX3I+sE6u+qpRG8YZPtJM2Tfx1Rmv/6Tbk1\nyJJ9jipSskQWoafAOpwd/7SXXd7Asw/iTMdHLchNvQOMoL3nGD7mCL0y98GE\nzqVwyl6hZJhJbXbPuTsWCr3bNbpNxu4F4DcYPuUcjM+q1/uIZGSvXFL/XgI8\nP+L67PRKItXft77xcJoHuy+2euk2xy50WtgjXeH9lmCYc9d0ku7XX65lXiap\nZ/KKJfMF1vyj7gkx7Gyr0DMawC+oj7Ig4ZSJrWWSYzorTJk+fp7zse/R3fEM\nZeNPsUw0wJ/hM4hpSUJsZLHzQQ0oUZZTHPNXvsn+CDOnOM/euXZVGto2Dvel\nfhcuwnifFi5BUFZ7eLn6D3l8SnBsxyHA0gE+Ml0JbMJ2TTiGyQNa4kn5/xaS\ntkEYUfGuDKZWS8nqeljZELp9y7fHLb34wJ2hopD+ZPK13Z/vKY+CtBEbsYrl\nkpXO\r\n=w/LA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIADGfFRMw+khE4yLfn8UlDGqqInX6pxkj/AWTwHyYeZmAiBc5QeBop0DCxpnqiKlzh3FRTUPQxOVkv1OKcmhH9d5jQ=="}]},"_npmUser":{"name":"dhruvkb","email":"dhruv_b@live.com"},"directories":{},"maintainers":[{"name":"dhruvkb","email":"dhruv_b@live.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-themes_6.1.1_1624606662140_0.8047000618708757"},"_hasShrinkwrap":false},"6.2.1":{"name":"@dhruvkb/storybook-addon-themes","version":"6.2.1","description":"A storybook addon to switch between different themes for your preview","license":"MIT","author":{"name":"Dhruv Bhanushali","url":"https://dhruvkb.github.io"},"repository":{"type":"git","url":"git+https://github.com/dhruvkb/storybook-addon-themes.git"},"homepage":"https://github.com/dhruvkb/storybook-addon-themes","bugs":{"url":"https://github.com/dhruvkb/storybook-addon-themes/issues"},"keywords":["addon","frontend","react","reactjs","storybook","storybookjs","svelte","theme","tool","ui","user interface","vue","vuejs","storybook-addon","style"],"main":"dist/react.js","types":"dist/react.d.ts","scripts":{"prepare":"node ./scripts/prepare.js"},"dependencies":{"@storybook/addons":"^6.0.0","@storybook/api":"^6.0.0","@storybook/components":"^6.0.0","@storybook/core-events":"^6.0.0","@storybook/theming":"^6.0.0","core-js":"^3.6.4","global":"^4.4.0","memoizerific":"^1.11.3"},"devDependencies":{"@babel/cli":"^7.8.3","@babel/core":"^7.8.3","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/plugin-proposal-export-default-from":"^7.8.3","@babel/plugin-proposal-object-rest-spread":"^7.8.3","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-transform-runtime":"^7.8.3","@babel/preset-env":"^7.8.3","@babel/preset-flow":"^7.8.3","@babel/preset-react":"^7.8.3","@babel/preset-typescript":"^7.8.3","@types/jest":"^25.1.1","@types/node":"^13.7.0","@types/react":"^16.8.14","@types/webpack":"^4.41.4","@types/webpack-env":"^1.15.1","babel-plugin-dynamic-import-node":"^2.3.0","babel-plugin-emotion":"^10.0.27","babel-plugin-macros":"^2.8.0","babel-plugin-require-context-hook":"^1.0.0","chalk":"^3.0.0","npmlog":"^4.1.2","shelljs":"^0.8.3","typescript":"~3.7.5"},"peerDependenciesMeta":{"react":{"optional":true},"svelte":{"optional":true},"vue":{"optional":true}},"storybook":{"displayName":"Theme switcher","unsupportedFrameworks":["react-native"]},"gitHead":"64ba75fda1cf3bd501a04ad3c9bdcd84baf4de2f","_id":"@dhruvkb/storybook-addon-themes@6.2.1","_nodeVersion":"14.16.0","_npmVersion":"7.18.1","dist":{"integrity":"sha512-OkMy4AaWxU01ExiASC/2F7EMD54bgtkN4W2Ty1N8eUIQvXjRdNhq+AqgXbBa8gOIYfXUufJ8e/McCdokMPAuPQ==","shasum":"c1bdb9b0cf00d383f4bdbc4f3de86aec56204529","tarball":"https://registry.npmjs.org/@dhruvkb/storybook-addon-themes/-/storybook-addon-themes-6.2.1.tgz","fileCount":84,"unpackedSize":223448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7SJ7CRA9TVsSAnZWagAAWsgP/0wrUwOVtJ1XOrVN7Isi\n0evrpKSw5bBiqzo3LJdfKP1RgLcx5qX/xdVMc2/Ldb5gBpLiKEo5X36Wd+nz\nq1muYSqmiO3Ed0whDf3s0TRd1y+RQeE0w/hEIkK+Ddk2KVNEqetup+Ri4rHw\nniioa8iUhSpZPbf/jugtPCPaKd+7v/V+2xrlDqNiR1VeiW16A2fvOrREPUaB\nF7Xb6wRbB/Ax4dOIW9ulJbNEW774vSO4nvNqvuO5MdKlWJiZCAurD4oxxo98\nVypBXbD6BBd/w9j484JmLv0HLru+a5RhHtYkNCpWmKF4eVUSIMj2YU5nB2Og\nfszAMJ6ZwQYzwykwNLe6sDj0d3RLMRd9/kA9KmA1T3+wJNd0KVm0Dng8SZ5X\nfF2udL44O+XpiXFaYEZGPG3KAyvAp34i+SFpWvie5xQlG+kdJDM2MfRqQkqd\nSMJDY+sjSxZs4q+bHFpgigcFkHO+vHcXT3ebzBRv3YMShw8pXtHuS+nZEncC\nrgf1vR9hfXSvAJzmq7SqYeSNuhX99lLuOd44FaLVivm30+fGSX8zg9orKAMr\n5NO4AEZY+3jkaq1XiLd2EGzG+vC4W/XVPJzW+8aDnXyD+4EVkQYUetb7wtKc\n3YkdmsuDCVVXRUojZDz/RVgHxEf6p0yBLGM800tAJsZA4eCuRXplMcbUXstj\nIJ8t\r\n=ltdE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdatjC2Q/T2kjOFaC/VIHN3ZwUBLsUTzKAz9Z8AqMdcwIhAOHppuA5rIS1H0o0iy6nM9hsZEUGt7vNcFpth+zL0/XG"}]},"_npmUser":{"name":"dhruvkb","email":"dhruv_b@live.com"},"directories":{},"maintainers":[{"name":"dhruvkb","email":"dhruv_b@live.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-themes_6.2.1_1626153595366_0.40557549693344885"},"_hasShrinkwrap":false}},"time":{"created":"2021-05-29T07:09:55.239Z","6.1.0":"2021-05-29T07:09:55.618Z","modified":"2022-04-05T04:20:52.685Z","6.1.1":"2021-06-25T07:37:42.334Z","6.2.1":"2021-07-13T05:19:55.598Z"},"maintainers":[{"name":"dhruvkb","email":"dhruv_b@live.com"}],"description":"A storybook addon to switch between different themes for your preview","homepage":"https://github.com/dhruvkb/storybook-addon-themes","keywords":["addon","frontend","react","reactjs","storybook","storybookjs","svelte","theme","tool","ui","user interface","vue","vuejs","storybook-addon","style"],"repository":{"type":"git","url":"git+https://github.com/dhruvkb/storybook-addon-themes.git"},"author":{"name":"Dhruv Bhanushali","url":"https://dhruvkb.github.io"},"bugs":{"url":"https://github.com/dhruvkb/storybook-addon-themes/issues"},"license":"MIT","readme":"# Storybook Addon Themes\n\nGreatly inspired by [@storybook/addon-backgrounds](https://github.com/storybooks/storybook/tree/next/addons/backgrounds).\n\nThis Storybook Theme Decorator can be used to add a custom HTML class or classes to the preview in [Storybook](https://storybook.js.org).\n\n\n\n## Compatibility\n\nThis version is compatible with storybook version `6.0.x`.\n\n## Installation\n\n```sh\nnpm i -D storybook-addon-themes\n```\n\n## Getting started\n\nThen activate the addon by adding it to the storybook `main.js` file (located in the Storybook config directory):\n\n```jsx\nmodule.exports = {\n addons: [\n // Maybe other addons here...\n 'storybook-addon-themes'\n // Or here...\n ],\n};\n```\n\nSee the [storybook documentation](https://storybook.js.org/docs/addons/using-addons/) for more informations.\n\n## Parameters\n\nThe `themes` parameter accept an array of `Theme` object.\n\nEach `Theme` is an object with the following properties:\n\n* `name` (`string`): Name of the theme\n* `class` (`string | string[]` - optional): HTML class(es) associated with the theme\n* `color` (`string`): The color of the badge in the theme selector\n* `default` [_deprecated_] (`boolean` - optional): Is the theme selected by default?\n\nThe `themes` parameter also accept an object with the following properties:\n\n* `icon` (`string` - optional - default is `'mirror'`): The icon to use for the addon in the toolbar ([options](https://github.com/storybookjs/design-system/blob/b4524b4cdeed9a7d4d4e8d516bffcba59d14e4e0/src/components/shared/icons.ts))\n* `default` (`string` - optional): Name of theme selected by default\n* `list` (`Theme[]` - required): The list of themes\n* `clearable` (`boolean` - optional - default is `true`): Can the user clear the selected theme ?\n* `disable` (`boolean` - optional): Disable the addon for a story\n* `Decorator` (`Component` - optional): A component to use as the decorator component ([see below](#custom-decorator) for more information)\n* `onChange` (`(themeName: Theme) => void` - optional): A callback that will be executed when the theme changes\n* `target` (`string` - optional): Target element selected with `document.querySelector()` to which classes are applied. Defaults to `body`, `root` if classes should be applied to `documentElement`.\n\n## Configuration\n\n### Globally\n\nYou can configure the themes globally in the storybook `preview.js` file:\n\n```jsx\nexport const parameters = {\n themes: {\n default: 'twitter',\n list: [\n { name: 'twitter', class: 'theme-twt', color: '#00aced' },\n { name: 'facebook', class: 'theme-fb', color: '#3b5998' }\n ],\n },\n};\n```\n\nFor backward compatibility `default` (`boolean`) can also be set directly on `Theme` object.\n**This has been deprecated** because of the difficulty of changing the default theme due to the need to redefine all `Theme` objects.\n\n```jsx\n// deprecated\nexport const parameters = {\n themes: [\n { name: 'twitter', class: 'theme-twt', color: '#00aced', default: true },\n { name: 'facebook', class: 'theme-fb', color: '#3b5998' }\n ],\n};\n```\n\nSee the [storybook documentation](https://storybook.js.org/docs/addons/using-addons/#global-configuration) for more informations.\n\n### In story (Component Story Format)\n\nOr configure the themes in your story file like this:\n\n```jsx\nexport default {\n title: 'CSF|Button',\n component: Button,\n parameters: {\n themes: {\n default: 'twitter',\n list: [\n { name: 'twitter', class: ['theme-twt', 'light-mode'], color: '#00aced' },\n { name: 'facebook', class: ['theme-fb', 'dark-mode'], color: '#3b5998' },\n ],\n },\n },\n};\n```\n\nIf you only want to activate the addon or override the themes for a specific story you can write:\n\n```jsx\nexport default {\n title: 'CSF|Button',\n component: Button,\n};\n\nexport const withText = () => ;\nwithText.story = {\n parameters: {\n themes: {\n default: 'twitter',\n list: [\n { name: 'twitter', class: ['theme-twt', 'light-mode'], color: '#00aced' },\n { name: 'facebook', class: ['theme-fb', 'dark-mode'], color: '#3b5998' },\n ],\n },\n },\n};\n```\n\n### In story (StoriesOf API)\n\nAlternatively with the old StoriesOf API:\n\n```jsx\nimport { storiesOf } from '@storybook/react'; // <- or your storybook framework\n\nstoriesOf('StoriesOf|Button', module)\n .addParameters({\n themes: {\n default: 'twitter',\n list: [\n { name: 'twitter', class: ['theme-twt', 'light-mode'], color: '#00aced' },\n { name: 'facebook', class: ['theme-fb', 'dark-mode'], color: '#3b5998' },\n ],\n },\n })\n .add('with text', () => );\n```\n\nAnd for a single story:\n\n```jsx\nimport { storiesOf } from '@storybook/react';\n\nstoriesOf('StoriesOf|Button', module)\n .add('with text', () => , {\n themes: {\n list: [\n { name: 'red', class: 'theme-red', color: 'rgba(255, 0, 0)' },\n ],\n },\n });\n\n```\n\n### Overwriting single properties\n\nYou can also only override a single key on the themes parameter, for instance to set a different default value for a single story:\n```jsx\nexport default {\n title: 'CSF|Button',\n component: Button,\n};\n\nexport const withText = () => ;\nwithText.story = {\n parameters: {\n themes: {\n default: 'facebook',\n },\n },\n};\n```\n\n## Usage with decorator\n\nBy default the classes will be added to the `body` element or the element configured with `target`.\n\nBut in this case your theme will not be visible by other addons (like [@storybook/addon-storyshots](https://github.com/storybookjs/storybook/tree/next/addons/storyshots)).\n\nTo fix this you can add the `withThemes` decorator in your stories.\n\nBut the decorator method is not available for all frameworks\n\nSee [here](#framework-support-table) for the list of supported framework.\n\n### Globally\n\nSetup the decorator globally in the `preview.js` file:\n\n```jsx\nimport { addDecorator } from '@storybook/react'; // <- or your storybook framework\nimport { withThemes } from 'storybook-addon-themes/react'; // <- or your storybook framework\n\naddDecorator(withThemes);\n\nexport const parameters = {\n actions: { argTypesRegex: \"^on[A-Z].*\" },\n themes: {\n default: 'twitter',\n list: [\n { name: 'twitter', class: ['theme-twt', 'light-mode'], color: '#00aced' },\n { name: 'facebook', class: ['theme-fb', 'dark-mode'], color: '#3b5998' },\n ],\n },\n};\n```\n\n### In story (Component Story Format)\n\nOr in your story file (for all stories in that file):\n\n```jsx\nexport default {\n title: 'CSF|Button',\n component: Button,\n decorators: [ withThemes ],\n parameters: {\n themes: {\n default: 'twitter',\n list: [\n { name: 'twitter', class: ['theme-twt', 'light-mode'], color: '#00aced' },\n { name: 'facebook', class: ['theme-fb', 'dark-mode'], color: '#3b5998' },\n ],\n },\n },\n};\n```\n\nOr just for a specific story:\n\n```jsx\nexport const withText = () => ;\nwithText.story = {\n decorators: [ withThemes ],\n parameters: {\n themes: {\n default: 'twitter',\n list: [\n { name: 'twitter', class: ['theme-twt', 'light-mode'], color: '#00aced' },\n { name: 'facebook', class: ['theme-fb', 'dark-mode'], color: '#3b5998' },\n ],\n },\n },\n};\n```\n\n### In story (StoriesOf API)\n\nAnd alternatively with the old StoriesOf API:\n\n```jsx\nimport { storiesOf } from '@storybook/react'; // <- or your storybook framework\nimport { withThemes } from 'storybook-addon-themes/react';\n\nstoriesOf('StoriesOf|Button', module)\n .addDecorator(withThemes)\n .add('with text', () => );\n```\n\n### Custom decorator\n\n#### General\n\nYou can provide a component that will be used as decorator using the `Decorator` option in the `theme` parameter.\n\nThe decorator will get the following properties :\n\n* `theme`: The selected theme or `undefined` if none is selected.\n* `themes`: The list of themes as provided in the `list` option of the `theme` parameter.\n* `themeClasses`: The formatted theme classes of the selected theme (if the `class` option exists on the selected theme).\n* `themeName`: The name of the selected theme (equal to `none` if none is selected).\n\nDon't forget to render the story using the `children` prop (React/HTML) or the `` element (Vue/Svelte).\n\n#### HTML example\n\nTo manage reactivity with the HTML storybook your decorator must return an array containing two elements :\n\n* the HTML element to display in the story\n* An update callback that will be called when the theme change. Like the decorator, the callback will receive the same props (without `children`).\n\nExample of a customized decorator that use a CSS file for changing the theme:\n\n```js\nfunction getOrCreate(id) {\n const elementOnDom = document.getElementById(id);\n if (elementOnDom) {\n return elementOnDom;\n }\n\n const element = document.createElement('link');\n element.setAttribute('id', id);\n element.setAttribute('rel', 'stylesheet');\n return element;\n}\n\nfunction Decorator(props) {\n const { children } = props;\n\n function setStyles({ theme, themeName }) {\n const link = getOrCreate('theme-stylesheet');\n if (!theme) {\n link.parentNode && link.parentNode.removeChild(link);\n } else {\n link.href = themeName === 'facebook' ? 'Button-fb.css' : 'Button-twt.css';\n children.appendChild(link);\n }\n }\n setStyles(props);\n\n return [children, setStyles];\n}\n```\n\n#### React example\n\nSame example as above for React:\n\n```js\nfunction Decorator(props) {\n const { children, themeName } = props;\n return (\n <>\n {children}\n {themeName === 'twitter' && }\n {themeName === 'facebook' && }\n \n );\n};\n```\n\n## Framework Support Table\n\n| | [React](app/react)|[React Native](app/react-native)|[Vue](app/vue)|[Angular](app/angular)| [Polymer](app/polymer)| [Mithril](app/mithril)| [HTML](app/html)| [Marko](app/marko)| [Svelte](app/svelte)| [Riot](app/riot)| [Ember](app/ember)| [Preact](app/preact)|\n| ----------- |:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|\n|Usage without decorator |+| |+|+|+|+|+|+|+|+|+|+|\n|Usage with decorator |+| |+| | | |+| |+| | | |\n","readmeFilename":"README.md"}