use-prefers-color-scheme
React hook for subscribing to user's color scheme preference.
🚀
Getting Started
🐇
Jump Start
npm install @anatoliygatt/use-prefers-color-scheme
import { usePrefersColorScheme } from '@anatoliygatt/use-prefers-color-scheme';
function Example() {
const preferredColorScheme = usePrefersColorScheme();
const isDarkColorSchemePreferred = preferredColorScheme === 'dark';
return (
<div>
Preferred Color Scheme:{' '}
{isDarkColorSchemePreferred ? '🌚 Dark' : '🌞 Light'}
</div>
);
}
💻
Live Demo
⚙️
Usage with Server Side Rendering (SSR)
Frameworks like Next.js and Gatsby take advantage of server-side rendering, which means that the HTML is pre-rendered at some point before it's sent to the browser. When we first render our React component tree, we don't know whether the user prefers light or dark color scheme.
It may lead to the markup mismatches during hydration. In order to prevent this, we need to set the ssr option provided by the usePrefersColorScheme() hook to true, like so:
usePrefersColorScheme({ ssr: true });
This will guarantee no markup mismatches between the original server render and the first client render, however, we will have to make a compromise: force a dark color scheme for all users in the very first render.
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
13 Sep 2, 2022
65 Dec 25, 2022
21 Oct 25, 2022
5 Nov 15, 2022
13 Oct 23, 2022
27 Jun 27, 2022
2 Oct 1, 2022
9 Nov 1, 2021
4 Jun 23, 2022
7 Dec 4, 2022
17 Jul 31, 2022
11 Nov 27, 2022
13 Apr 22, 2022
14 Aug 27, 2022
2 Oct 2, 2022
3 Aug 26, 2022