{"id":13761856,"url":"https://github.com/xeoneux/next-dark-mode","last_synced_at":"2025-04-05T23:10:34.350Z","repository":{"id":39900628,"uuid":"256424943","full_name":"xeoneux/next-dark-mode","owner":"xeoneux","description":"🌑 Enable dark mode for Next.js apps","archived":false,"fork":false,"pushed_at":"2023-01-08T19:01:04.000Z","size":1816,"stargazers_count":218,"open_issues_count":4,"forks_count":8,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T22:06:26.339Z","etag":null,"topics":["cookies","css-in-js","dark-mode","dark-theme","emotion","next","next-dark-mode","nextjs","night-mode","night-theme","prefers-color-scheme","react","reactjs","styled-components","theme"],"latest_commit_sha":null,"homepage":"https://next-dark-mode.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/xeoneux.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":"2020-04-17T06:48:44.000Z","updated_at":"2025-03-12T08:02:10.000Z","dependencies_parsed_at":"2023-02-08T07:15:58.144Z","dependency_job_id":null,"html_url":"https://github.com/xeoneux/next-dark-mode","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xeoneux%2Fnext-dark-mode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xeoneux%2Fnext-dark-mode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xeoneux%2Fnext-dark-mode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xeoneux%2Fnext-dark-mode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xeoneux","download_url":"https://codeload.github.com/xeoneux/next-dark-mode/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247411235,"owners_count":20934653,"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":["cookies","css-in-js","dark-mode","dark-theme","emotion","next","next-dark-mode","nextjs","night-mode","night-theme","prefers-color-scheme","react","reactjs","styled-components","theme"],"created_at":"2024-08-03T14:00:30.538Z","updated_at":"2025-04-05T23:10:34.331Z","avatar_url":"https://github.com/xeoneux.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Nextjs Plugins"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# `next-dark-mode`\n\n🌓 Theme your Next.js apps with a Dark Mode\n\n[![license](https://img.shields.io/npm/l/next-dark-mode?style=for-the-badge)](https://github.com/xeoneux/next-dark-mode/blob/master/LICENSE)\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/next-dark-mode?style=for-the-badge)](https://bundlephobia.com/result?p=next-dark-mode)\n[![npm version](https://img.shields.io/npm/v/next-dark-mode?style=for-the-badge)](https://www.npmjs.com/package/next-dark-mode)\n\n\u003cimg src=\"https://github.com/xeoneux/next-dark-mode/blob/master/assets/next-dark-mode.gif\" /\u003e\n\n\u003c/div\u003e\n\n## Contents:\n\n- [Features](#features)\n- [Requirements](#requirements)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Configuration](#configuration)\n- [Resources](#resources)\n\n## Features\n\n\u003cimg align=\"right\" width=\"50%\" src=\"https://github.com/xeoneux/next-dark-mode/blob/master/assets/feature-auto.gif\" /\u003e\n\n### Auto mode\n\n`next-dark-mode` optionally supports **auto mode** which automatically switches the user's theme as per the color mode selected on their operating system.\n\n[Windows](https://blogs.windows.com/windowsexperience/2016/08/08/windows-10-tip-personalize-your-pc-by-enabling-the-dark-theme) and [macOS](https://support.apple.com/en-in/HT208976) both support setting the dark or light mode based on the time of the day.\n\nIt is achieved via `prefers-color-scheme` media query.\n\n\u003cimg align=\"right\" width=\"50%\" src=\"https://github.com/xeoneux/next-dark-mode/blob/master/assets/feature-cookies.gif\" /\u003e\n\n### No page load glitch\n\n`next-dark-mode` uses configurable **cookies** to persist the state of the current theme, one for the _auto mode_ and the other for the _dark mode_.\n\nThis prevents the common page load glitch with the local storage approach where the app loads on the client and then the state of the user's theme is fetched.\n\nYou can see it in this implementation by [Pantaley Stoyanov](https://pantaley.com).\n\nNOTE: This library is not compatible with [Next.js 9's Auto Partial Static Export](https://nextjs.org/blog/next-9#automatic-partial-static-export) feature as it has to read the cookies in `getInitialProps` function, which makes all pages incompatible with Automatic Partial Static Export feature.\n\n## Requirements\n\nTo use `next-dark-mode`, you must use `react@16.8.0` or greater which includes [Hooks](https://reactjs.org/docs/hooks-intro.html).\n\n## Installation\n\n```sh\n$ yarn add next-dark-mode\n\nor\n\n$ npm install next-dark-mode\n```\n\n## Usage\n\n1. Wrap your [\\_app.js](https://nextjs.org/docs/advanced-features/custom-app) component (located in `/pages`) with the [HOC](https://reactjs.org/docs/higher-order-components.html) `withDarkMode`\n\n   ```js\n   // _app.js\n   import App from 'next/app'\n   import withDarkMode from 'next-dark-mode'\n\n   export default withDarkMode(App)\n   ```\n\n2. You can now use the `useDarkMode` hook anywhere in your app\n\n   ```js\n   import { useDarkMode } from 'next-dark-mode'\n\n   const MyComponent = props =\u003e {\n     const {\n       autoModeActive,    // boolean - whether the auto mode is active or not\n       autoModeSupported, // boolean - whether the auto mode is supported on this browser\n       darkModeActive,    // boolean - whether the dark mode is active or not\n       switchToAutoMode,  // function - toggles the auto mode on\n       switchToDarkMode,  // function - toggles the dark mode on\n       switchToLightMode, // function - toggles the light mode on\n     } = useDarkMode()\n\n    ...\n   }\n   ```\n\n### With CSS-in-JS libraries (like emotion or styled-components)\n\n1. Wrap your [\\_app.js](https://nextjs.org/docs/advanced-features/custom-app) component (located in `/pages`) with the [HOC](https://reactjs.org/docs/higher-order-components.html) `withDarkMode` and pass the values to the `ThemeProvider` so that you can use it in your components\n\n   ```js\n   // _app.js\n   import { ThemeProvider } from '@emotion/react' // or styled-components\n   import withDarkMode from 'next-dark-mode'\n\n   function MyApp({ Component, darkMode, pageProps }) {\n     const { autoModeActive, autoModeSupported, darkModeActive } = darkMode\n\n     return (\n       \u003cThemeProvider theme={{ darkMode: darkModeActive, ...(other values) }}\u003e\n         \u003cComponent {...pageProps} /\u003e\n       \u003c/ThemeProvider\u003e\n     )\n   }\n\n   export default withDarkMode(MyApp)\n   ```\n\n## Configuration\n\nThe `withDarkMode` function accepts a `config` object as its second argument. Every key is optional with default values mentioned:\n\n- `autoModeCookieName`: string - Name of the cookie used to determine whether the auto preset is enabled.\n  Defaults to `'autoMode'`.\n- `cookieOptions`: object - Configuration [options](https://github.com/jshttp/cookie#options-1) for the cookies that gets set on the client.\n  Defaults to `{ sameSite: 'lax' }`.\n- `darkModeCookieName`: string - Name of the cookie used to determine whether the dark preset is enabled.\n  Defaults to `'darkMode'`.\n- `defaultMode`: string - Determines the default color mode when there's no cookie set on the client. This usually happens on the first ever page load. It can either be `'dark'` or `'light'` and it defaults to `'light'`.\n\n## Resources\n\n- [CSS-Tricks | Dark Mode in CSS](https://css-tricks.com/dark-modes-with-css)\n- [`prefers-color-scheme` browser support](https://caniuse.com/#feat=prefers-color-scheme)\n- [prefers-color-scheme: Hello darkness, my old friend](https://web.dev/prefers-color-scheme)\n- [Browsers Are Bringing Automatic Dark Mode to Websites](https://www.howtogeek.com/440920/browsers-are-bringing-automatic-dark-mode-to-websites)\n- [Create a dark mode in React with CSS variables and localStorage](https://pantaley.com/blog/Create-a-dark-mode-in-React-with-CSS-variables-and-localStorage)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxeoneux%2Fnext-dark-mode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxeoneux%2Fnext-dark-mode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxeoneux%2Fnext-dark-mode/lists"}