{"id":15768028,"url":"https://github.com/thk2b/react-redux-theming","last_synced_at":"2026-04-11T07:03:17.553Z","repository":{"id":138601052,"uuid":"117488185","full_name":"thk2b/react-redux-theming","owner":"thk2b","description":"A basic proof-of-concept for theming react-redux apps using css modules and css variables.  ","archived":false,"fork":false,"pushed_at":"2018-01-15T03:32:29.000Z","size":145,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-11T14:01:21.040Z","etag":null,"topics":["css","css-modules","css-variables","react","redux","theming","theming-boilerplate"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thk2b.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2018-01-15T02:36:07.000Z","updated_at":"2018-01-15T03:36:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"fca2b25d-82f0-4b21-b16f-b179dd7ac647","html_url":"https://github.com/thk2b/react-redux-theming","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thk2b%2Freact-redux-theming","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thk2b%2Freact-redux-theming/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thk2b%2Freact-redux-theming/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thk2b%2Freact-redux-theming/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thk2b","download_url":"https://codeload.github.com/thk2b/react-redux-theming/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246458009,"owners_count":20780678,"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","css-modules","css-variables","react","redux","theming","theming-boilerplate"],"created_at":"2024-10-04T14:00:20.011Z","updated_at":"2025-10-24T02:30:01.878Z","avatar_url":"https://github.com/thk2b.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-redux-theming\n\nA basic proof-of-concept for theming react-redux apps using css modules and css variables.\n\n## The idea\n\nThe redux store should contain the current active theme, and a list of themes (cf. `src/themes/reducer.js`). \n \nThe `ActiveTheme` container (via `react-redux`) has access to the active theme. (cf. `src/themes/ActiveTheme.jsx`)\n\nIt imports `src/themes/themes.css` via webpack and css-modules. This css file contains variable devlarations for each theme. Then, it renders only the imported styles which match the active theme name.\n\nSince the `ActiveTheme` component wraps the entire app (cf. `src/app/App.jsx`), any css attached to elements in the app has access to all the variables defined in `themes.css`. \n\nWhen a new active theme is set, the `ActiveTheme` component gets the css coresponding to the new active theme and reassigns the css variables to a different set of values. As a result, any styles that depend on variables defined in `themes.css` will update.\n\n----\n\n\nThis project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).\n\nBelow you will find some information on how to perform common tasks.\u003cbr\u003e\nYou can find the most recent version of this guide [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md).\n\n## Table of Contents\n\n- [Available Scripts](#available-scripts)\n  - [npm start](#npm-start)\n  - [npm test](#npm-test)\n  - [npm run build](#npm-run-build)\n  - [npm run eject](#npm-run-eject)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthk2b%2Freact-redux-theming","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthk2b%2Freact-redux-theming","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthk2b%2Freact-redux-theming/lists"}