{"id":23525839,"url":"https://github.com/thebstar/react-switch-theme","last_synced_at":"2025-05-14T08:13:14.800Z","repository":{"id":35147913,"uuid":"213035661","full_name":"theBstar/react-switch-theme","owner":"theBstar","description":"Switch between your themes, (i.e. dark/light or so) with just one click. Uses react hooks.","archived":false,"fork":false,"pushed_at":"2023-01-04T22:11:21.000Z","size":437,"stargazers_count":0,"open_issues_count":10,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-19T09:59:15.818Z","etag":null,"topics":["dark-theme","darkmode","javascript","react","react-hooks","switch-theme","theme"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-switch-theme","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/theBstar.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":"2019-10-05T16:48:04.000Z","updated_at":"2021-04-02T18:38:48.000Z","dependencies_parsed_at":"2023-01-15T14:48:08.781Z","dependency_job_id":null,"html_url":"https://github.com/theBstar/react-switch-theme","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/theBstar%2Freact-switch-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theBstar%2Freact-switch-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theBstar%2Freact-switch-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theBstar%2Freact-switch-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/theBstar","download_url":"https://codeload.github.com/theBstar/react-switch-theme/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254101548,"owners_count":22014908,"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":["dark-theme","darkmode","javascript","react","react-hooks","switch-theme","theme"],"created_at":"2024-12-25T19:13:01.624Z","updated_at":"2025-05-14T08:13:09.792Z","avatar_url":"https://github.com/theBstar.png","language":"JavaScript","readme":"![npm](https://img.shields.io/npm/dw/react-switch-theme)\n![NPM](https://img.shields.io/npm/l/react-switch-theme)\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-switch-theme)\n# react-switch-theme\nSwitch between your themes, (i.e. dark/light or so) with just one click. Uses react hooks.\n[react-switch-theme on npm](https://www.npmjs.com/package/react-switch-theme \"Go to NPM page\")\n\n## Live demo: [codesandbox](https://codesandbox.io/embed/vigorous-wave-4kvk6?fontsize=14\u0026hidenavigation=1\u0026theme=dark \"Go to code sand box example\")\n\n# Install:\n  ```javascript\n    npm i react-switch-theme\n  ``` \n\n## Updated usage:\n  This does not break anything, old usage is still valid.\n\n  1. Import ThemeProvider and Theme. Theme is the Context which will be used with useContext to get theme and setTheme.\n      ```Javascript\n      import { ThemeProvider, Theme } from \"react-switch-theme\";\n      ```\n  2. Wrap your app with ThemeProvider. This takes just one children, It accepts three props.\n  ```Javascript\n    const colors = {\n      light: {\n        background: \"#fff\",\n        color: \"#000\"\n      },\n      dark: {\n        background: \"#000\",\n        color: \"#fff\"\n      }\n    };\n    const activeMode = \"light\";\n    const offlineStorageKey = \"react-random-key\";\n\n    // wrap your app\n      \u003cThemeProvider\n        colors={colors}\n        activeMode={activeMode}\n        offlineStorageKey={offlineStorageKey}\n      \u003e\n        \u003cApp /\u003e\n      \u003c/ThemeProvider\u003e\n  ```\n3. Now in app you can access theme by using:\n\n  ```Javascript\n    const [theme, toogleTheme] = useContext(Theme);\n  ```\n    theme is current theme: string, toogleTheme is a function which changes your current theme.\n\n4. Access your css var from css-in-js or css:\n  ```css\n    // You did the hardwork now just use your vars.\n    background: var(--background);\n    color: var(--color);\n  ```\n\n### Old Usage:\n   #### Demo: [CodeSandbox](https://codesandbox.io/embed/elastic-noether-c048l)\n\n  1. Import ( default import ):\n\n      ```javascript\n      import useReactSwitchTheme from 'react-switch-theme'; \n      ```\n\n  2. Pass one option to the hook\n\n      ```javascript\n      const options = {\n        colors: {\n        \n          // Object of two color objects. light and dark or whatever you call them.\n          light: {\n\n          // These properties will be converted to css vars\n          // These can be named anything\n          // You can access them in css, css-in-js or in other way by using 'var(--propName)'\n          background: '#fff',\n          color: '#000',\n          },\n          dark: {\n\n          // Property name must be same for both objects\n\n          background: '#000',\n          color: '#fff',\n          },\n        },\n        \n        // This is the current active theme\n        // It must be one of the key of colors object\n        activeMode: 'light',\n        \n        // An unique key for your app to store themeMode in localStorage\n        // It should be same for every load.\n        // So, choosen theme stays even after a refresh\n        offlineStorageKey: 'replace it with you app name or some hash'\n        \n      }\n      ```\n    \n  3. Use it in your app:\n  \n      ```javascript\n        const [currentMode, setDiffMode] = useReactSwitchTheme(options)\n        \n        // currentMode is a string with the currentTheme as value\n        // light or dark here.\n        \n        // setDiffMode is function which will toggle between two themes on call.\n      ```\n      \n  4. Your css:\n    \n      ```css\n        // You did the hardwork now just use your vars.\n        background: var(--background);\n        color: var(--color);\n      ```\n  \n  \n  \n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthebstar%2Freact-switch-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthebstar%2Freact-switch-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthebstar%2Freact-switch-theme/lists"}