{"id":22812118,"url":"https://github.com/morewings/storybook-addon-theme-provider","last_synced_at":"2025-04-22T15:26:13.232Z","repository":{"id":152097516,"uuid":"623655857","full_name":"morewings/storybook-addon-theme-provider","owner":"morewings","description":"Storybook addon to manage global themes provided by Styled components, Emotion or any other solution based on React component. Compatible with Storybook version 7 and 8","archived":false,"fork":false,"pushed_at":"2025-02-09T15:31:21.000Z","size":2820,"stargazers_count":8,"open_issues_count":12,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-20T13:38:57.955Z","etag":null,"topics":["emotion","react-theming","storybook","styled-components","theme-provider","theming","tokens"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/morewings.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":"2023-04-04T20:09:58.000Z","updated_at":"2025-03-21T14:29:34.000Z","dependencies_parsed_at":"2024-06-03T23:56:48.409Z","dependency_job_id":"39c502c6-1fe5-474e-8a26-da439f8b7e0a","html_url":"https://github.com/morewings/storybook-addon-theme-provider","commit_stats":{"total_commits":81,"total_committers":4,"mean_commits":20.25,"dds":"0.37037037037037035","last_synced_commit":"873f5b0cc5366bbb4a431a418ae436ea345983f6"},"previous_names":[],"tags_count":26,"template":false,"template_full_name":"storybookjs/addon-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morewings%2Fstorybook-addon-theme-provider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morewings%2Fstorybook-addon-theme-provider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morewings%2Fstorybook-addon-theme-provider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morewings%2Fstorybook-addon-theme-provider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/morewings","download_url":"https://codeload.github.com/morewings/storybook-addon-theme-provider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250266235,"owners_count":21402253,"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":["emotion","react-theming","storybook","styled-components","theme-provider","theming","tokens"],"created_at":"2024-12-12T12:09:57.813Z","updated_at":"2025-04-22T15:26:13.224Z","avatar_url":"https://github.com/morewings.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Storybook Addon Theme Provider\n\n[![storybook addon](https://raw.githubusercontent.com/storybookjs/brand/main/badge/badge-storybook.svg)](https://storybook.js.org/addons/storybook-addon-theme-provider)\n[![npm version](https://badge.fury.io/js/storybook-addon-theme-provider.svg)](https://www.npmjs.com/package/storybook-addon-theme-provider)\n[![npm](https://img.shields.io/npm/dm/storybook-addon-theme-provider)](http://npm-stats.org/#/storybook-addon-theme-provider)\n[![GitHub package.json dynamic](https://img.shields.io/github/package-json/types/morewings/storybook-addon-theme-provider)](https://github.com/morewings/storybook-addon-theme-provider)\n[![GitHub Repo stars](https://img.shields.io/github/stars/morewings/storybook-addon-theme-provider?style=social)](https://github.com/morewings/storybook-addon-theme-provider)\n\n## Maintainer's personal appeal to the users\n\nHi, my name is Dima. I created this Storybook add-on. Thanks for choosing it for your project. Hope it helps you to achieve your goals and implement your ideas.\n\nAt this moment I'm looking for as job as a **Lead/Senior Front Developer in Berlin, Germany**. So I would like to ask you to **refer me to your company** if this is relevant to your case. Here you can find my [CV and portfolio](https://links.morewings.dev/). In case it is not relevant, giving a star 🌟 to add-on [repo](https://github.com/morewings/storybook-addon-theme-provider) is also appreciated. I believe that having a popular open source project is helpful for a job search.\n\nThanks and happy coding!\n\n## Intro\n\nAdd-on to manage global themes provided by Styled components, Emotion, or any other solution based on a React component, which receives prop `theme?: Record\u003cstring, unknown\u003e` and children node. This add-on is compatible with **Storybook versions 7 and 8**.\n\nInspired by [storybook-addon-themes](https://github.com/tonai/storybook-addon-themes).\n\n\u003cimg src=\"./addon-demo-high.gif\" alt=\"Storybook Addon theme-provider\" width=\"436\" height=\"234\"\u003e\n\n## Install\n\n1. Install add-on with the package manager of your choice.\n\n```shell\nnpm i -D storybook-addon-theme-provider\nyarn add -D storybook-addon-theme-provider\npnpm i -D storybook-addon-theme-provider\n```\n\n2. Register add-on in `.storybook/main.(js|ts)`\n\n```js\nexport default {\n    //...\n    addons: [\n        //...\n        \"storybook-addon-theme-provider\",\n        //...\n    ],\n};\n```\n\n## Use themes\n\nAdd decorator `withThemeProvider` to `.storybook/preview.(js|ts)`. This applies theme settings on **global level**.\n\n```js\nimport {withThemeProvider} from 'storybook-addon-theme-provider';\nimport {Provider} from './Provider';\n\nexport default {\n    //...\n    decorators:[\n        withThemeProvider(Provider),\n        ///...\n    ],\n    globals: {\n        // Set initially selected theme name\n        selectedTheme: 'foo',\n        // Provide a list of available themes\n        themes: [\n            {\n                // Provide a name for the theme.\n                name: 'foo',\n                // Set a color to display after theme name\n                color: 'red',\n                // Provide object with foo theme data\n                themeObject: {\n                    baseColor: 'red',\n                    //...\n                }\n            },\n            {\n                name: 'bar',\n                color: '#AAAAAA',\n                themeObject: {\n                    baseColor: 'green',\n                }\n            }\n        ]\n    },\n    //...\n}\n```\n\nIt is also possible to enable decorator on the story level.\n\n```js\n// some CSF story file\n\nexport const story = {\n  decorators: [withThemeProvider(Provider)]\n};\n```\n\n## Use `Provider` component\n\n`Provider` is a React component which receives `theme` prop, containing a selected theme object, and `children` nodes. See [Styled component theming](https://styled-components.com/docs/advanced#theming) or [Emotion\nThemeProvider](https://emotion.sh/docs/theming#themeprovider-reactcomponenttype).\n\nDeveloper can use custom `Provider` component as well.\n\n```tsx\nimport React, {ReactNode} from 'react';\n\nexport const Provider = \u003cTTheme,\u003e({children, theme}: {children?: ReactNode; theme?: TTheme}) =\u003e {\n    // apply theme somehow\n    console.log('theme', theme)\n    return \u003cdiv\u003e{children}\u003c/div\u003e\n}\n```\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorewings%2Fstorybook-addon-theme-provider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmorewings%2Fstorybook-addon-theme-provider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorewings%2Fstorybook-addon-theme-provider/lists"}