{"id":25437648,"url":"https://github.com/diffcunha/react-css-themes","last_synced_at":"2025-11-01T07:30:27.285Z","repository":{"id":65473173,"uuid":"90392845","full_name":"diffcunha/react-css-themes","owner":"diffcunha","description":"Theme provider for React components using CSS modules","archived":false,"fork":false,"pushed_at":"2020-09-06T23:03:07.000Z","size":10,"stargazers_count":4,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-14T21:58:22.335Z","etag":null,"topics":["components","css-modules","react","themes","theming"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/diffcunha.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}},"created_at":"2017-05-05T15:54:09.000Z","updated_at":"2017-06-12T23:34:36.000Z","dependencies_parsed_at":"2023-01-25T03:05:15.553Z","dependency_job_id":null,"html_url":"https://github.com/diffcunha/react-css-themes","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diffcunha%2Freact-css-themes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diffcunha%2Freact-css-themes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diffcunha%2Freact-css-themes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diffcunha%2Freact-css-themes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/diffcunha","download_url":"https://codeload.github.com/diffcunha/react-css-themes/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239126493,"owners_count":19586100,"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":["components","css-modules","react","themes","theming"],"created_at":"2025-02-17T09:19:02.697Z","updated_at":"2025-11-01T07:30:27.253Z","avatar_url":"https://github.com/diffcunha.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm version](https://img.shields.io/npm/v/react-css-themes.svg?style=flat-square)](https://www.npmjs.com/package/react-css-themes)\n[![Code Climate](https://codeclimate.com/github/diffcunha/react-css-themes/badges/gpa.svg)](https://codeclimate.com/github/diffcunha/react-css-themes)\n[![Test Coverage](https://codeclimate.com/github/diffcunha/react-css-themes/badges/coverage.svg)](https://codeclimate.com/github/diffcunha/react-css-themes/coverage)\n\n# react-css-themes\n\nTheme provider for React components using CSS modules.\n\n**Key Features**\n- Themable components expose API to allow external theming\n- Easy to change themes of deeply nested themable components\n\n## Table of contents\n\n* [Installation](#installation)\n* [Usage [API]](#usage-api)\n  * [`withThemes`](#withthemesthemetypes-themes-defaulttheme)\n  * [`ThemeTypes`](#themetypes)\n  * [`Component.themes`](#componentthemes)\n    * [`add`](#addfragment)\n* [Examples](#examples)\n  * [Basic theming](#basic-theming)\n  * [Composing themable components](#composing-themable-components)\n  * [Adding classNames to a deeply nested themeable child](#adding-classnames-to-a-deeply-nested-themeable-child)\n* [About](#about)\n* [License](#license)\n\n## Installation\n\n`npm i --save react-css-themes`\n\n## Usage [API]\n\n#### `withThemes(themeTypes, [themes], [defaultTheme])`\n\n##### Arguments:\n\n- `themeTypes` *(`Object`)* - Theme types definition\n- `themes` *(`Object`)* - The available themes\n- `defaultTheme` *(`Object`)* - The default theme\n\n##### Returns:\n\nReturns a decorator `function to make Component themeable.\n\n##### Example:\n\n```js\nimport React from 'react'\nimport withThemes, { ThemeTypes } from 'react-css-themes'\n\nimport light from './light.css'\nimport dark from './dark.css'\n\nconst ThemableComponent = ({ theme }) =\u003e (\n  \u003cdiv className={theme.container}\u003e\n    \u003cdiv className={theme.heading}\u003eHeading\u003c/div\u003e\n  \u003c/div\u003e\n)\n\nThemableComponent.themeTypes = {\n  container: ThemeTypes.className,\n  heading: ThemeTypes.className\n}\n\nexport default withThemes({ light, dark }, light)(ThemableComponent)\n```\n\n#### `ThemeTypes`\n\n`ThemeTypes` are used to define theme's property types. It's simillar to React `PropTypes`, there are 2 avaiable types:\n\n- `ThemeTypes.className`: Defines a property as a className\n- `ThemeTypes.themeOf(ThemableComponent)`: Define a property as a theme of another themeable compoenent\n\n##### Example:\n\n```js\nimport React from 'react';\nimport { ThemeTypes } from 'react-css-themes'\n\nfunction MyComponent ({ theme }) {\n  // ... do things with the props\n}\n\nMyComponent.themeTypes = {\n  themeProp: ThemeTypes.className,\n  childComponent: ThemeTypes.themeOf(ThemableComponent),\n}\n```\n\n### `Component.themes`\n\nThe compoenent will expose a `themes` object property with the themes defined as keys. These themes are set by the compoenent but also expose an API to create derivated themes.\n\n#### `add(fragment)`\n\n##### Arguments:\n\n- `fragment` *(`Object`)* - ClassNames to add to the theme\n\n##### Returns:\n\nA new theme derived from the original theme plus the fragment \n\n##### Example:\n\n```js\n\nlet ThemableComponent = ({ theme }) =\u003e (\n  \u003cdiv className={theme.container} /\u003e\n)\n\nThemableComponent = withThemes({\n  light: {\n    container: '.container'\n  }\n}, light)(ThemableComponent)\n\n/* HTML output */\n\nrenderToStaticMarkup(\u003cThemableComponent /\u003e)\n// \u003cdiv class=\".container\"\u003e\u003c/div\u003e\n\n// Derived theme\nconst theme = ThemableComponent.themes.light.add({\n  container: '.foobar'\n})\n\nrenderToStaticMarkup(\u003cThemableComponent theme={theme} /\u003e)\n// \u003cdiv class=\".container .foobar\"\u003e\u003c/div\u003e\n```\n\n## Examples\n\n### Basic theming\n\n```js\n/* ThemableComponent.js */\nimport React from 'react'\nimport withThemes, { ThemeTypes } from 'react-css-themes'\n\nimport light from './light.css'\nimport dark from './dark.css'\n\nconst ThemableComponent = ({ theme }) =\u003e (\n  \u003cdiv className={theme.container}\u003e\n    \u003cdiv className={theme.heading}\u003eHeading\u003c/div\u003e\n  \u003c/div\u003e\n)\n\nThemableComponent.themeTypes = {\n  container: ThemeTypes.className,\n  heading: ThemeTypes.className\n}\n\nexport default withThemes({ light, dark }, light)(ThemableComponent)\n```\n\n```css\n/* light.css */\n.container {\n  background-color: white;\n}\n.heading {\n  color: black;\n}\n```\n\n```css\n/* dark.css */\n.container {\n  background-color: black;\n}\n.heading {\n  color: white;\n}\n```\n\n```js\n/* View.js */\nimport React from 'react'\nimport ThemableComponent from './ThemableComponent'\n\nconst View = () =\u003e (\n  \u003cdiv\u003e\n    \u003cThemableComponent theme={ThemableComponent.themes.light} /\u003e\n    \u003cThemableComponent theme={ThemableComponent.themes.dark} /\u003e\n    \u003cThemableComponent /\u003e /* Default theme (light) will be used */\n  \u003c/div\u003e\n)\n\nexport default View\n```\n\n### Composing themable components\n\n```js\n/* AnotherThemableComponent.js */\nimport React from 'react'\nimport withThemes, { ThemeTypes } from 'react-css-themes'\n\nimport themeA from './themeA.css'\nimport themeB from './themeB.css'\n\nconst THEMES = {\n  themeA: {\n    ...themeA,\n    child1: ThemableComponent.themes.light,\n    child2: ThemableComponent.themes.dark\n  }, \n  themeB: {\n    ...themeB,\n    child1: ThemableComponent.themes.dark,\n    child2: ThemableComponent.themes.light\n  }\n}\n\nconst AnotherThemableComponent = ({ theme }) =\u003e (\n  \u003cdiv className={theme.container}\u003e\n    \u003cThemableComponent theme={theme.child1} /\u003e\n    \u003cThemableComponent theme={theme.child2} /\u003e\n  \u003c/div\u003e\n)\n\nAnotherThemableComponent.themeTypes = {\n  container: ThemeTypes.className,\n  child1: ThemeTypes.themeOf(ThemableComponent),\n  child2: ThemeTypes.themeOf(ThemableComponent)\n}\n\nexport default withThemes(THEMES, THEMES.themeA)(AnotherThemableComponent)\n```\n\n### Adding `classNames` to a deeply nested themeable child\n\n```js\n/* AnotherThemableComponent.js */\nimport React from 'react'\nimport withThemes, { ThemeTypes } from 'react-css-themes'\n\nimport themeA from './themeA.css'\n\nconst THEMES = {\n  themeA: {\n    ...themeA,\n    child: ThemableComponent.themes.light.add({\n      container: themeA.childContainer,\n      heading: themeA.childHeading\n    })\n  }\n}\n\nconst AnotherThemableComponent = ({ theme }) =\u003e (\n  \u003cdiv className={theme.container}\u003e\n    \u003cThemableComponent theme={theme.child} /\u003e\n  \u003c/div\u003e\n)\n```\n\n## About\n\nThe project is authored by Diogo Cunha ([@diffcunha](https://github.com/diffcunha)) and Daniel Hayes ([@daniel-hayes](https://github.com/daniel-hayes)).\n\nComments, improvements or feedback are highly appreciated.\n\n## License\n\nThis project is licensed under the terms of the ISC license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiffcunha%2Freact-css-themes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdiffcunha%2Freact-css-themes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiffcunha%2Freact-css-themes/lists"}