Next.js color-mode

A helper for creating non-flickering and accessible themed applications

## Features - [x] 🙉 Non-flickering - [x] ♿ Accessible (supports `prefers-color-scheme`) - [x] 🐱 Dynamic theme values - [x] 🐄 No additional dependencies - [x] 🧠 Agnostic to the way you style your app ## Installation ``` $ npm i --save nextjs-color-mode # or $ yarn add nextjs-color-mode ``` ## Setup First, you need to import `ColorModeScript` from `nextjs-color-mode` and place it somewhere in the `_app.js` file. > 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. ```jsx // _app.js import Head from 'next/head' import { ColorModeScript } from 'nextjs-color-mode' const criticalThemeCss = ` .next-light-theme { --background: #fff; --text: #000; } .next-dark-theme { --background: #000; --text: #fff; } body { background: var(--background); color: var(--text); } ` function MyApp({ Component, pageProps }) { return ( <>

Bartłomiej Stefański

What I have built