GitHub - xeoneux/next-dark-mode: Enable dark mode for Next.js apps
source link: https://github.com/xeoneux/next-dark-mode
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Contents:
Features
Auto mode
next-dark-mode
optionally supports auto mode which automatically switches the user's theme as per the color mode selected on their operating system.
Windows and macOS both support setting the dark or light mode based on the time of the day.
It is achieved via prefers-color-scheme
media query.
No page load glitch
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.
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.
You can see it in this implementation by Pantaley Stoyanov.
NOTE: This library is not compatible with Next.js 9's Auto 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.
Requirements
To use next-dark-mode
, you must use [email protected]
or greater which includes Hooks.
Installation
$ yarn add next-dark-mode or $ npm install next-dark-mode
Usage
-
Wrap your _app.js component (located in
/pages
) with the HOCwithDarkMode
// _app.js import App from 'next/app' import withDarkMode from 'next-dark-mode' export default withDarkMode(App)
-
You can now use the
useDarkMode
hookimport { useDarkMode } from 'next-dark-mode' const MyComponent = props => { const { autoModeActive, // boolean - whether the auto mode is active or not autoModeSupported, // boolean - whether the auto mode is supported on this browser darkModeActive, // boolean - whether the dark mode is active or not switchToAutoMode, // function - toggles the auto mode on switchToDarkMode, // function - toggles the dark mode on switchToLightMode, // function - toggles the light mode on } = useDarkMode() ... }
With CSS-in-JS libraries (like emotion or styled-components)
-
Wrap your _app.js component (located in
/pages
) with the HOCwithDarkMode
but do not use the inbuilt provider// _app.js import withDarkMode from 'next-dark-mode' function MyApp(props) { const { autoModeActive, autoModeSupported, darkModeActive, switchToAutoMode, switchToDarkMode, switchToLightMode, } = props.darkMode ... } export default withDarkMode(MyApp, { provider: false })
-
You can now pass these values to the
ThemeProvider
so that you can use it in your components// _app.js import { ThemeProvider } from '@emotion/react' // or styled-components import withDarkMode from 'next-dark-mode' function MyApp({ Component, darkMode, pageProps }) { const { autoModeActive, autoModeSupported, darkModeActive, switchToAutoMode, switchToDarkMode, switchToLightMode, } = darkMode return ( <ThemeProvider theme={{ darkMode }}> <Component {...pageProps} /> </ThemeProvider> ) } export default withDarkMode(MyApp, { provider: false })
Configuration
The withDarkMode
function accepts a config
object as its second argument. Every key is optional with default values mentioned:
autoModeCookieName
: string - Name of the cookie used to determine whether the auto preset is enabled. Defaults to'autoMode'
.cookieOptions
: object - Configuration options for the cookies that gets set on the client. Defaults to{ sameSite: 'lax' }
.darkModeCookieName
: string - Name of the cookie used to determine whether the dark preset is enabled. Defaults to'darkMode'
.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'
.provider
: boolean - By default the main App is wrapped in aDarkModeContext.Provider
to utilize theuseDarkMode
hook. If you want to use the library with a CSS-in-JS solution like emotion or styled-components, you can disable the default provider. Defaults totrue
.
Resources
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK