12 |
13 |
12 |
13 | 
27 |
28 | ### Auto mode
29 |
30 | `next-dark-mode` optionally supports **auto mode** which automatically switches the user's theme as per the color mode selected on their operating system.
31 |
32 | [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.
33 |
34 | It is achieved via `prefers-color-scheme` media query.
35 |
36 | 
37 |
38 | ### No page load glitch
39 |
40 | `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_.
41 |
42 | This 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.
43 |
44 | You can see it in this implementation by [Pantaley Stoyanov](https://pantaley.com).
45 |
46 | NOTE: 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.
47 |
48 | ## Requirements
49 |
50 | To use `next-dark-mode`, you must use `react@16.8.0` or greater which includes [Hooks](https://reactjs.org/docs/hooks-intro.html).
51 |
52 | ## Installation
53 |
54 | ```sh
55 | $ yarn add next-dark-mode
56 |
57 | or
58 |
59 | $ npm install next-dark-mode
60 | ```
61 |
62 | ## Usage
63 |
64 | 1. 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`
65 |
66 | ```js
67 | // _app.js
68 | import App from 'next/app'
69 | import withDarkMode from 'next-dark-mode'
70 |
71 | export default withDarkMode(App)
72 | ```
73 |
74 | 2. You can now use the `useDarkMode` hook anywhere in your app
75 |
76 | ```js
77 | import { useDarkMode } from 'next-dark-mode'
78 |
79 | const MyComponent = props => {
80 | const {
81 | autoModeActive, // boolean - whether the auto mode is active or not
82 | autoModeSupported, // boolean - whether the auto mode is supported on this browser
83 | darkModeActive, // boolean - whether the dark mode is active or not
84 | switchToAutoMode, // function - toggles the auto mode on
85 | switchToDarkMode, // function - toggles the dark mode on
86 | switchToLightMode, // function - toggles the light mode on
87 | } = useDarkMode()
88 |
89 | ...
90 | }
91 | ```
92 |
93 | ### With CSS-in-JS libraries (like emotion or styled-components)
94 |
95 | 1. 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
96 |
97 | ```js
98 | // _app.js
99 | import { ThemeProvider } from '@emotion/react' // or styled-components
100 | import withDarkMode from 'next-dark-mode'
101 |
102 | function MyApp({ Component, darkMode, pageProps }) {
103 | const { autoModeActive, autoModeSupported, darkModeActive } = darkMode
104 |
105 | return (
106 |