next-color-mode
v0.0.1
Published
`next-color-mode` makes it easy to support your user's color mode preference, whether they like light mode, dark mode, or they want you to respect their system preferences.
Downloads
17
Readme
next-color-mode
next-color-mode makes it easy to support your user's color mode preference, whether they like light mode, dark mode, or they want you to respect their system preferences.
Quick Start
Requirements
- npm or Yarn
- Node.js
- React 16.8+
- Next.js 9.5+
Installation
npm install next-color-mode
# OR
yarn add next-color-modeUsage
Setup your styles
next-color-mode will set a special attribute on your <html> tag, allowing you to style your site based on it.
/* Set default light mode colors on <html> */
:root {
background-color: white;
color: black;
}
/* User is in light mode, but has selected dark mode */
:root[next-color-mode="dark"] {
background-color: black;
color: white;
}
/* User is in dark mode and HAS NOT has selected light mode */
@media (prefers-color-scheme: dark) {
:root:not([next-color-mode="light"]) {
background-color: black;
color: white;
}
}Install the script
next-color-mode exports a <script> tag to be injected into your <head>. This script allows us to setup the color mode before the rest of the page is loaded, preventing the page from flickering on page load. It needs to be installed in your custom document (Learn more about custom documents at https://nextjs.org/docs/advanced-features/custom-document):
// pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { ColorModeScript } from 'next-color-mode'
export default class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<ColorModeScript />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}See the Configuration section for details on how to make next-color-mode a bit more flexible.
Exports
<ColorModeScript>
<ColorModeScript> handles setting up the color mode before the rest of your Next.js application has loaded. See Install the script for installation details.
| Prop | Default | Description |
|---------------|-------------------|---------------------------------------------------------------------------------------------------------------|
| defaultMode | system | default color mode is used if one hasn't been explicitly set by your app; can be system, light, or dark |
| storageKey | next-color-mode | this is the key that will be set on the <html> element, as well as in localStorage |
Example
<ColorModeScript
defaultMode="dark"
storageKey="my-dark-mode-storage-key" /><ColorModeContextProvider>
<ColorModeContextProvider> provides a React.Context from which you can access and update the current color mode.
NOTE: Make sure to use the same values for defaultMode and storageKey on both <ColorModeScript> and <ColorModeContextProvider>, otherwise you may still see a color mode flash when loading the app.
| Prop | Default | Description |
|---------------|-------------------|---------------------------------------------------------------------------------------------------------------|
| defaultMode | system | default color mode is used if one hasn't been explicitly set by your app; can be system, light, or dark |
| storageKey | next-color-mode | this is the key that will be set on the <html> element, as well as in localStorage |
Example
// pages/_app.js
import { ColorModeContextProvider } from 'next-color-mode'
export default function App({ Component, pageProps }) {
return (
<ColorModeContextProvider
defaultMode="dark"
storageKey="my-dark-mode-storage-key">
<Component {...pageProps} />
</ColorModeContextProvider>
)
}ColorModeContext
ColorModeContext provides access to all of the data made available by <ColorModeContextProvider>. This is mostly exposed for use in class components; if you're using function components, use useColorMode instead.
NOTE: <ColorModeContextProvider> must be available in a higher scope* for this to be used.
Example
import { ColorModeContext } from 'next-color-mode'
export class DarkModeComponent extends React.Component {
static contextType = ThemeContext
render() {
const isDarkMode = this.context.colorMode === 'dark'
return (
<div style={{
backgroundColor: isDarkMode ? 'black' : 'white',
color: isDarkMode ? 'white' : 'black',
}} />
)
}
}useColorMode
useColorMode is a hook that provides access to all of the data made available by <ColorModeContextProvider>.
Example
import { useColorMode } from 'next-color-mode'
export function DarkModeComponent() {
const { colorMode } = useColorMode()
const isDarkMode = colorMode === 'dark'
return (
<div style={{
backgroundColor: isDarkMode ? 'black' : 'white',
color: isDarkMode ? 'white' : 'black',
}} />
)
}Acknowledgments
https://www.joshwcomeau.com/react/dark-mode/