{"id":17114657,"url":"https://github.com/react18-tools/nextjs-themes","last_synced_at":"2025-04-13T02:32:32.991Z","repository":{"id":186135708,"uuid":"674663911","full_name":"react18-tools/nextjs-themes","owner":"react18-tools","description":"🤟 👉 Theme with confidence and [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":"2025-04-09T16:20:55.000Z","size":8394,"stargazers_count":11,"open_issues_count":2,"forks_count":6,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-09T17:34:23.675Z","etag":null,"topics":["dark-mode","front-end","fullstack","javascript","nextjs","nextjs-typescript","nextjs13","nodejs","react","react-server-components","react18","theme","themes","typescript","upforgrabs"],"latest_commit_sha":null,"homepage":"https://nextjs-themes.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react18-tools.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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,"publiccode":null,"codemeta":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-08-04T13:34:08.000Z","updated_at":"2025-04-09T16:20:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"f29d1359-6a55-4f53-b213-86b6583f9cec","html_url":"https://github.com/react18-tools/nextjs-themes","commit_stats":null,"previous_names":["mayank1513/nextjs-themes","react18-tools/nextjs-themes"],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react18-tools%2Fnextjs-themes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react18-tools%2Fnextjs-themes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react18-tools%2Fnextjs-themes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react18-tools%2Fnextjs-themes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react18-tools","download_url":"https://codeload.github.com/react18-tools/nextjs-themes/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248657819,"owners_count":21140842,"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-mode","front-end","fullstack","javascript","nextjs","nextjs-typescript","nextjs13","nodejs","react","react-server-components","react18","theme","themes","typescript","upforgrabs"],"created_at":"2024-10-14T17:19:42.077Z","updated_at":"2025-04-13T02:32:32.984Z","avatar_url":"https://github.com/react18-tools.png","language":"TypeScript","funding_links":["https://github.com/sponsors/mayank1513","https://pages.razorpay.com/mayank1513"],"categories":[],"sub_categories":[],"readme":"# Next.js 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/nextjs-themes/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/nextjs-themes/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/149263e95a1388369bb9/maintainability)](https://codeclimate.com/github/react18-tools/nextjs-themes/maintainability) [![codecov](https://codecov.io/gh/react18-tools/nextjs-themes/branch/main/graph/badge.svg?token=SUTY0GHPHV)](https://codecov.io/gh/react18-tools/nextjs-themes) [![Version](https://img.shields.io/npm/v/nextjs-themes.svg?colorB=green)](https://www.npmjs.com/package/nextjs-themes) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/nextjs-themes.svg)](https://www.npmjs.com/package/nextjs-themes) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/nextjs-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 `nextjs-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 nextjs-themes/client/component`)\n- ✅ Full TypeScript Support\n- ✅ Unleash the full power of React 18 Server components\n- ✅ No flash on load (both SSR and SSG)\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, `nextjs-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 nextjs-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/nextjs-themes) ([Docs](https://react18-tools.github.io/nextjs-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- ✅ Compatible with Tailwind CSS, StyledComponents, emotion, Material UI, ...\n\u003c/details\u003e\n\n\u003e Check out the [live example](https://nextjs-themes.vercel.app/).\n\n## Getting Started\n\n\u003e See [Getting Started](./guides/getting-started.md)\n\n\u003e Want Lite Version? [![npm bundle size](https://img.shields.io/bundlephobia/minzip/nextjs-themes-lite)](https://www.npmjs.com/package/nextjs-themes-lite) [![Version](https://img.shields.io/npm/v/nextjs-themes-lite.svg?colorB=green)](https://www.npmjs.com/package/nextjs-themes-lite) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/nextjs-themes-lite.svg)](https://www.npmjs.com/package/nextjs-themes-lite)\n\u003e In case you are using `r18gs` in your project, you may use lite version which requires `r18gs` as a peerDependency.\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/nextjs-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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact18-tools%2Fnextjs-themes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact18-tools%2Fnextjs-themes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact18-tools%2Fnextjs-themes/lists"}