{"id":20548484,"url":"https://github.com/react18-tools/react18-themes","last_synced_at":"2025-04-14T10:53:00.276Z","repository":{"id":192254620,"uuid":"685813387","full_name":"react18-tools/react18-themes","owner":"react18-tools","description":"🤟 👉 [Unleash the Power of React Server Components](https://medium.com/javascript-in-plain-english/unleash-the-power-of-react-server-components-eb3fe7201231)","archived":false,"fork":false,"pushed_at":"2024-04-11T00:50:13.000Z","size":1970,"stargazers_count":4,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-04-14T16:14:23.420Z","etag":null,"topics":["nextjs","react","react-server-components","react18","react18-themes","theme","themes","typescript","vercel"],"latest_commit_sha":null,"homepage":"https://react18-themes.vercel.app/","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/react18-tools.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","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},"funding":{"github":["mayank1513"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":["https://pages.razorpay.com/mayank1513"]}},"created_at":"2023-09-01T04:22:14.000Z","updated_at":"2024-04-18T09:46:28.716Z","dependencies_parsed_at":"2023-10-14T14:05:42.588Z","dependency_job_id":"b26977a3-1f6d-48b0-9fba-d99a9d591ebb","html_url":"https://github.com/react18-tools/react18-themes","commit_stats":null,"previous_names":["mayank1513/react18-themes","react18-tools/react18-themes"],"tags_count":8,"template":false,"template_full_name":"react18-tools/turborepo-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react18-tools%2Freact18-themes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react18-tools%2Freact18-themes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react18-tools%2Freact18-themes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react18-tools%2Freact18-themes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react18-tools","download_url":"https://codeload.github.com/react18-tools/react18-themes/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248868805,"owners_count":21174755,"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":["nextjs","react","react-server-components","react18","react18-themes","theme","themes","typescript","vercel"],"created_at":"2024-11-16T02:13:39.870Z","updated_at":"2025-04-14T10:53:00.255Z","avatar_url":"https://github.com/react18-tools.png","language":"TypeScript","readme":"# React 18 Themes \u003cimg src=\"https://github.com/react18-tools/turborepo-template/blob/main/popper.png?raw=true\" style=\"height: 40px\"/\u003e\n\n[![test](https://github.com/react18-tools/react18-themes/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/react18-themes/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/55a85ada9dd24603340f/maintainability)](https://codeclimate.com/github/react18-tools/react18-themes/maintainability) [![codecov](https://codecov.io/gh/react18-tools/react18-themes/branch/main/graph/badge.svg)](https://codecov.io/gh/react18-tools/react18-themes) [![Version](https://img.shields.io/npm/v/react18-themes.svg?colorB=green)](https://www.npmjs.com/package/react18-themes) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/react18-themes.svg)](https://www.npmjs.com/package/react18-themes) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/react18-themes) [![Contact me on Codementor](https://www.codementor.io/m-badges/mayank1513/get-help.svg)](https://www.codementor.io/@mayank1513?refer=badge)\n\n\u003cdetails\u003e\n\u003csummary\u003eVersion 3 Short Notes:\u003c/summary\u003e\nVersion 3.0 brings minor API changes along with major performance improvements and fixes. We have minimized changes to existing APIs.\n\nNote: [react18-themes](https://github.com/react18-tools/react18-themes/) will now be maintained as `react18-themes`, as server-specific APIs are no longer needed.\n\n\u003c/details\u003e\n\n🤟 👉 [Unleash the Power of React Server Components](https://medium.com/javascript-in-plain-english/unleash-the-power-of-react-server-components-eb3fe7201231)\n\n- ✅ Perfect dark mode in 2 lines of code\n- ✅ Fully Treeshakable (`import from react18-themes/client/component`)\n- ✅ Full TypeScript Support\n- ✅ Secure by design - we support nonce for scripts and styles\n- ✅ Unleash the full power of React 18 Server components\n\n\u003e Exampand following to see more features.\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ch2 style=\"display:inline\"\u003eMotivation and Key Features:\u003c/h2\u003e\u003c/summary\u003e\n\nThis project was inspired by next-themes. Unlike next-themes, `react18-themes` doesn't require wrapping everything in a provider, allowing you to take full advantage of React 18 Server Components. Additionally, it offers more features and control over your app's theming.\n\n- ✅ Perfect dark mode in 2 lines of code\n- ✅ Fully Treeshakable (`import from react18-themes/client/component`)\n- ✅ Designed for excellence\n- ✅ Full TypeScript Support\n- ✅ Unleash the full power of React 18 Server components\n- ✅ System setting with prefers-color-scheme\n- ✅ Themed browser UI with color-scheme\n- ✅ Support for Next.js 13 \u0026 Next.js 14 `appDir`\n- ✅ No flash on load (for all - SSG, SSR, ISG, Server Components)\n- ✅ Sync theme across tabs and windows\n- ✅ Disable flashing when changing themes\n- ✅ Force pages to specific themes\n- ✅ Class and data attribute selector\n- ✅ Manipulate theme via `useTheme` hook\n- ✅ Documented with [Typedoc](https://react18-tools.github.io/react18-themes) ([Docs](https://react18-tools.github.io/react18-themes))\n- ✅ Use combinations of [data-th=\"\"] and [data-color-scheme=\"\"] for dark/light variants of themes\n- ✅ Use [data-csp=\"\"] to style based on colorSchemePreference.\n\u003c/details\u003e\n\n\u003e Check out the [live example](https://react18-themes.vercel.app/).\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ch2 style=\"display:inline\"\u003eInstallation\u003c/h2\u003e\u003c/summary\u003e\n\n```bash\n$ pnpm add react18-themes\n```\n\n**_or_**\n\n```bash\n$ npm install react18-themes\n```\n\n**_or_**\n\n```bash\n$ yarn add react18-themes\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ch2 style=\"display:inline\"\u003eWant Lite Version?\u003c/h2\u003e\n\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/react18-themes-lite)](https://www.npmjs.com/package/react18-themes-lite) [![Version](https://img.shields.io/npm/v/react18-themes-lite.svg?colorB=green)](https://www.npmjs.com/package/react18-themes-lite) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/react18-themes-lite.svg)](https://www.npmjs.com/package/react18-themes-lite)\n\n\u003c/summary\u003e\n\n```bash\n$ pnpm add react18-themes-lite\n```\n\n**or**\n\n```bash\n$ npm install react18-themes-lite\n```\n\n**or**\n\n```bash\n$ yarn add react18-themes-lite\n```\n\n\u003e Note: `r18gs` is a peer dependency\n\n\u003c/details\u003e\n\n## Usage\n\n### SPA (e.g., Vite, CRA) and Next.js pages directory (No server components)\n\nTo add dark mode support, modify `_app.js` as follows:\n\n```js\nimport { ThemeSwitcher } from \"react18-themes\";\n\nfunction MyApp({ Component, pageProps }) {\n  return (\n    \u003c\u003e\n      \u003cThemeSwitcher forcedTheme={Component.theme} /\u003e\n      \u003cComponent {...pageProps} /\u003e\n    \u003c/\u003e\n  );\n}\n\nexport default MyApp;\n```\n\n⚡🎉Boom! Dark mode is ready in just a couple of lines!\n\n### With Next.js `app` router (Server Components)\n\nUpdate `app/layout.jsx` to add `ThemeSwitcher` from `react18-themes`:\n\n```tsx\n// app/layout.jsx\nimport { ThemeSwitcher } from \"react18-themes\";\n\nexport default function Layout({ children }) {\n  return (\n    \u003chtml lang=\"en\"\u003e\n      \u003chead /\u003e\n      \u003cbody\u003e\n        \u003cThemeSwitcher /\u003e\n        {children}\n      \u003c/body\u003e\n    \u003c/html\u003e\n  );\n}\n```\n\nWoohoo! Multiple theme modes with Server Components support!\n\n### HTML \u0026 CSS\n\nNext.js app supports dark mode, including System preference with `prefers-color-scheme`. The theme is synced between tabs, modifying the `data-theme` attribute on the `html` element:\n\n```css\n:root {\n  --background: white;\n  --foreground: black;\n}\n\n[data-theme=\"dark\"] {\n  --background: black;\n  --foreground: white;\n}\n```\n\n## Images\n\nShow different images based on the current theme:\n\n```ts\nimport Image from \"next/image\";\nimport { useTheme } from \"react18-themes\";\n\nfunction ThemedImage() {\n  const { resolvedTheme } = useTheme();\n  const src = resolvedTheme === \"light\" ? \"/light.png\" : \"/dark.png\";\n  return \u003cImage src={src} width={400} height={400} /\u003e;\n}\n\nexport default ThemedImage;\n```\n\n### useTheme\n\nThe `useTheme` hook provides theme information and allows changing the theme:\n\n```js\nimport { useTheme } from \"react18-themes\";\n\nconst ThemeChanger = () =\u003e {\n  const { theme, setTheme } = useTheme();\n\n  return (\n    \u003cdiv\u003e\n      The current theme is: {theme}\n      \u003cbutton onClick={() =\u003e setTheme(\"light\")}\u003eLight Mode\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e setTheme(\"dark\")}\u003eDark Mode\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\nThe `useTheme` hook returns the following object:\n\n```tsx\ninterface UseThemeYield {\n  theme: string;\n  darkTheme: string;\n  lightTheme: string;\n  colorSchemePref: ColorSchemeType;\n  systemColorScheme: ResolvedColorSchemeType;\n  resolvedColorScheme: ResolvedColorSchemeType;\n  resolvedTheme: string;\n  setTheme: (theme: string) =\u003e void;\n  setDarkTheme: (darkTheme: string) =\u003e void;\n  setLightTheme: (lightTheme: string) =\u003e void;\n  setThemeSet: (themeSet: { darkTheme: string; lightTheme: string }) =\u003e void;\n  setColorSchemePref: (colorSchemePref: ColorSchemeType) =\u003e void;\n  toggleColorScheme: (skipSystem?: boolean) =\u003e void;\n  setForcedTheme: (forcedTheme: string) =\u003e void;\n  setForcedColorScheme: (forcedColorScheme: ColorSchemeType) =\u003e void;\n}\n```\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ch2 style=\"display:inline\"\u003eForce per page theme and color-scheme\u003c/h2\u003e\u003c/summary\u003e\n\n### Next.js App Router\n\n```tsx\nimport { ForceTheme } from \"react18-themes\";\n\nfunction MyPage() {\n  return (\n    \u003c\u003e\n      \u003cForceTheme theme=\"my-theme\" /\u003e\n      ...\n    \u003c/\u003e\n  );\n}\n\nexport default MyPage;\n```\n\n### Next.js Pages Router\n\nFor the pages router, you have two options. The first option is the same as the app router, and the second option, which is compatible with `next-themes`, involves adding the `theme` property to your page component like this:\n\n```javascript\nfunction MyPage() {\n  return \u003c\u003e...\u003c/\u003e;\n}\n\nMyPage.theme = \"my-theme\";\n\nexport default MyPage;\n```\n\nSimilarly, you can force a color scheme. This will apply your `defaultDark` or `defaultLight` theme, which can be configured via hooks.\n\n\u003c/details\u003e\n\n### With Styled Components and any CSS-in-JS\n\nNext Themes works with any library. For Styled Components, `createGlobalStyle` in your custom App:\n\n```js\n// pages/_app.js\nimport { createGlobalStyle } from \"styled-components\";\nimport { ThemeSwitcher } from \"react18-themes\";\n\nconst GlobalStyle = createGlobalStyle`\n  :root {\n    --fg: #000;\n    --bg: #fff;\n  }\n\n  [data-theme=\"dark\"] {\n    --fg: #fff;\n    --bg: #000;\n  }\n`;\n\nfunction MyApp({ Component, pageProps }) {\n  return (\n    \u003c\u003e\n      \u003cGlobalStyle /\u003e\n      \u003cThemeSwitcher forcedTheme={Component.theme} /\u003e\n      \u003cComponent {...pageProps} /\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n### With Tailwind\n\nIn `tailwind.config.js`, set the dark mode property to class:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  darkMode: \"class\",\n};\n```\n\n⚡🎉Ready to use dark mode in Tailwind!\n\n\u003e Caution: Your class must be `\"dark\"`, which is the default value used in this library. Tailwind requires the class name `\"dark\"` for dark-theme.\n\nUse dark-mode specific classes:\n\n```tsx\n\u003ch1 className=\"text-black dark:text-white\"\u003e\n```\n\n## Migration\n\n\u003e Refer to the [migration guide](./guides/migration.md).\n\n## Docs\n\n[Typedoc](https://react18-tools.github.io/react18-themes)\n\n### 🤩 Don't forget to star this repo!\n\nWant a hands-on course for getting started with Turborepo? Check out [React and Next.js with TypeScript](https://www.udemy.com/course/react-and-next-js-with-typescript/?referralCode=7202184A1E57C3DCA8B2)\n\n## FAQ\n\n**Do I need to use CSS variables with this library?**\n\nNo. You can hard code values for every class:\n\n```css\n.my-class {\n  color: #555;\n}\n\n[data-theme=\"dark\"] .my-class {\n  color: white;\n}\n```\n\n**Why is `resolvedTheme` and `resolvedColorScheme` necessary?**\n\nTo reflect the System theme preference and forced theme/colorScheme pages in your UI. For instance, buttons or dropdowns indicating the current colorScheme should say \"system\" when the System colorScheme preference is active.\n\n`resolvedTheme` is useful for modifying behavior or styles at runtime:\n\n```js\nconst { resolvedTheme, resolvedColorScheme } = useTheme();\nconst background = getBackground(resolvedTheme);\n\n\u003cdiv style={{ color: resolvedColorScheme === 'dark' ? white : black, background }}\u003e\n```\n\nWithout `resolvedTheme`, you would only know the theme is \"system\", not what it resolved to.\n\n![Repo stats](https://repobeats.axiom.co/api/embed/3cc219825aee3c38bad8829fb9da0dd6301a1867.svg \"Repobeats analytics image\")\n\n## License\n\nThis library is licensed under the MPL-2.0 open-source license.\n\n\u003e \u003cimg src=\"https://github.com/react18-tools/turborepo-template/blob/main/popper.png?raw=true\" style=\"height: 20px\"/\u003e Please consider enrolling in [our courses](https://mayank-chaudhari.vercel.app/courses) or [sponsoring](https://github.com/sponsors/mayank1513) our work.\n\n\u003chr /\u003e\n\n\u003cp align=\"center\" style=\"text-align:center\"\u003ewith 💖 by \u003ca href=\"https://mayank-chaudhari.vercel.app\" target=\"_blank\"\u003eMayank Kumar Chaudhari\u003c/a\u003e\u003c/p\u003e\n","funding_links":["https://github.com/sponsors/mayank1513","https://pages.razorpay.com/mayank1513"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact18-tools%2Freact18-themes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact18-tools%2Freact18-themes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact18-tools%2Freact18-themes/lists"}