{"id":13761846,"url":"https://github.com/Blazity/nextjs-color-mode","last_synced_at":"2025-05-10T14:30:43.595Z","repository":{"id":42481737,"uuid":"397581874","full_name":"Blazity/nextjs-color-mode","owner":"Blazity","description":"⚡️ A helper for creating non-flickering and accessible themed applications","archived":false,"fork":false,"pushed_at":"2025-05-02T22:04:30.000Z","size":384,"stargazers_count":27,"open_issues_count":14,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-02T23:18:37.132Z","etag":null,"topics":["next","next-plugin","nextjs","react","server-side-rendering","ssr","static-site"],"latest_commit_sha":null,"homepage":"https://nextjs-color-mode.vercel.app/","language":"TypeScript","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/Blazity.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,"zenodo":null}},"created_at":"2021-08-18T11:50:10.000Z","updated_at":"2025-03-27T06:36:08.000Z","dependencies_parsed_at":"2023-02-06T21:45:54.831Z","dependency_job_id":"0a69ee0f-2641-4349-bf3c-1634cc461e46","html_url":"https://github.com/Blazity/nextjs-color-mode","commit_stats":{"total_commits":42,"total_committers":3,"mean_commits":14.0,"dds":0.5714285714285714,"last_synced_commit":"2979dc67c59f57e11197c045035a2db51f683e94"},"previous_names":["bmstefanski/next-color-mode"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blazity%2Fnextjs-color-mode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blazity%2Fnextjs-color-mode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blazity%2Fnextjs-color-mode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blazity%2Fnextjs-color-mode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Blazity","download_url":"https://codeload.github.com/Blazity/nextjs-color-mode/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253428200,"owners_count":21906869,"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":["next","next-plugin","nextjs","react","server-side-rendering","ssr","static-site"],"created_at":"2024-08-03T14:00:30.289Z","updated_at":"2025-05-10T14:30:43.341Z","avatar_url":"https://github.com/Blazity.png","language":"TypeScript","funding_links":[],"categories":["Nextjs Plugins"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003eNext.js color-mode\u003c/h1\u003e\n  \u003cp\u003eA helper for creating non-flickering and accessible themed applications\u003c/p\u003e\n  \u003cbr /\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/nextjs-color-mode\"\u003e\u003cimg alt=\"npm version badge\" src=\"https://img.shields.io/npm/v/nextjs-color-mode\"\u003e\u003c/a\u003e  \n  \u003cimg alt=\"npm bundle size\" src=\"https://img.shields.io/bundlephobia/min/nextjs-color-mode\"\u003e\n  \u003cimg alt=\"license badge\" src=\"https://img.shields.io/npm/l/nextjs-color-mode\"\u003e\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n## Features\n\n- [x] 🙉 Non-flickering\n- [x] ♿ Accessible (supports `prefers-color-scheme`)\n- [x] 🐱 Dynamic theme values\n- [x] 🐄 No additional dependencies\n- [x] 🧠 Agnostic to the way you style your app\n\n## Installation\n\n```\n$ npm i --save nextjs-color-mode\n\n# or\n\n$ yarn add nextjs-color-mode\n```\n\n## Setup\nFirst, you need to import `ColorModeScript` from `nextjs-color-mode` and place it somewhere in the `_app.js` file.   \n\u003e If you're using styled-components or emotion, you can put the contents of `criticalThemeCss` to GlobalStyles. Just make sure it's critical css, and at the top of your global styles.\n\n```jsx\n// _app.js\n\nimport Head from 'next/head'\nimport { ColorModeScript } from 'nextjs-color-mode'\n\nconst criticalThemeCss = `\n.next-light-theme {\n--background: #fff;\n--text: #000;\n}\n\n.next-dark-theme {\n--background: #000;\n--text: #fff;\n}\n\nbody {\n  background: var(--background);\n  color: var(--text);\n}\n`\n\nfunction MyApp({ Component, pageProps }) {\n  return (\n    \u003c\u003e\n      \u003cHead\u003e\n        \u003cstyle dangerouslySetInnerHTML={{ __html: criticalThemeCss }} /\u003e\n      \u003c/Head\u003e\n      \u003cColorModeScript /\u003e\n      \u003cComponent {...pageProps} /\u003e\n    \u003c/\u003e\n  )\n}\n```\n\n## Theme switcher (`useColorSwitcher`)\nTo implement theme switcher, you should use the `useColorSwitcher` hook\n\u003e Note that every component that explicitly uses this hook should be rendered only on the client-side. [Check out how we do this in the example](https://github.com/bmstefanski/next-color-mode/blob/master/example/pages/index.js#L5)\n\n```jsx\nimport { ColorModeStyles, useColorModeValue, useColorSwitcher } from 'nextjs-color-mode'\n\nexport default function ColorSwitcher(props) {\n  const { toggleTheme, colorMode } = useColorSwitcher()\n\n  return (\n    \u003cbutton onClick={toggleTheme}\u003e\n      Change theme to {colorMode === 'light' ? 'dark' : 'light'}\n    \u003c/button\u003e\n  )\n}\n```\n```tsx\nfunction useColorSwitcher(): {\n    colorMode: string;\n    changeTheme: (colorMode: 'light' | 'dark') =\u003e void;\n    toggleTheme: () =\u003e void;\n};\n\n```\n\n## Using dynamic variables (`useColorModeValue`)\nSometimes you may want to omit the design system or need to hotfix something fast. Here's the solution for that.\n\n```jsx\nexport default function SomeComponent() {\n  const [boxBgColor, boxBgCss] = useColorModeValue('box-color', 'blue', 'red')\n  const [boxBorderColor, boxBorderCss] = useColorModeValue('box-border-color', 'red', 'blue')\n  // the first item of the array returns CSS variable name\n  // and the second one returns a special object that then gets parsed into a themable CSS variable\n\n  return (\n    \u003c\u003e\n      \u003cColorModeStyles styles={[boxBgCss, boxBorderCss]} /\u003e\n      \u003cdiv style={{ width: '24rem', height: '12rem', backgroundColor: boxBgColor, border: \"10px solid\", borderColor: boxBorderColor }} /\u003e\n    \u003c/\u003e\n  )\n}\n```\n```tsx\nfunction useColorModeValue(name: string, lightThemeValue: string, darkThemeValue: string);\n```\n\u003e Do not use the same name twice, it may cause variable overriding and is hard to debug. \nAlso using things like unique id, UUID or any randomly generated set of characters is a bad idea - it will display mismatch content warning and make it even harder to debug!\n\n\n## Support\n\nIf you're looking for help or simply want to share your thoughts about the project, we encourage you to join our Discord community. Here's the link: [https://blazity.com/discord](https://blazity.com/discord). It's a space where we exchange ideas and help one another. Everyone's input is appreciated, and we look forward to welcoming you.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBlazity%2Fnextjs-color-mode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBlazity%2Fnextjs-color-mode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBlazity%2Fnextjs-color-mode/lists"}