[{"id":"cG9zdDo1MTg=","slug":"supporting-detecting-dark-mode-in-the-browser","title":"Supporting & detecting dark mode in the browser","content":"\n

How do you detect if a user of your website has a preference for light or dark theme? Or maybe has not chosen at all?

\n\n\n\n

We will look at a few ways how to detect and handle dark modes in 2020:

\n\n\n\n

\n\n\n\n

Pure CSS

\n\n\n\n

First lets have a look how we can do this using only CSS. There is a new css media query that is supported by almost any browser right now.
prefers-color-theme

\n\n\n\n

Example Time

\n\n\n\n

.box { \n    background: #eee;\n}\n\n@media (prefers-color-scheme: dark) {\n    .box { \n        background: #000;\n    }\n}\n\n@media (prefers-color-scheme: light) {\n    .box { \n        background: #fff;\n    }\n}

\n\n\n\n

Just like we use media queries for device width we can easily target specific CSS in case the user has a specific preference.

\n\n\n\n

For completeness, if the user has no preference you can use the media query @media (prefers-color-scheme: no-preference).

\n\n\n\n

JS

\n\n\n\n

Simple

\n\n\n\n

So how do we do the same thing in JS? There is a little helper called window.matchMedia (also widely supported) wich takes a media query and tells us if the media query is true of false.

\n\n\n\n

Example

\n\n\n\n

const isDark = window.matchMedia('(prefers-color-scheme: dark)')\nisDark.matched // true or false

\n\n\n\n

That simple.

\n\n\n\n

Reactive

\n\n\n\n

If we want to go reactive, the matchMedia function also allows us to set a listener, so every time the setting changes, we get notified and can act accordingly.

\n\n\n\n

Example

\n\n\n\n

const isDark = window.matchMedia('(prefers-color-scheme: dark)')\nisDark.addListener((event: MediaQueryListEvent) => {\n  event.matches // true or false\n})

\n\n\n\n

React

\n\n\n\n

And of course react. We love it, we use it. So I made a little library because all the libs I found for react did not include typescript typing!! 🤕

\n\n\n\n

Of course it comes with hooks 🎣.

\n\n\n\n

yarn add use-light-switch

\n\n\n\n

`useLightSwitch()`

\n\n\n\n

This is the basic usage.

\n\n\n\n

import { Mode, useLightSwitch } from 'use-light-switch'\n\n\nconst Simple: React.FC = () => {\n    const mode = useLightSwitch()\n\n    if (mode === Mode.Dark) ...\n\n    return ...\n}

\n\n\n\n

`useModeSelector()`

\n\n\n\n

This is the more useful one IMO.

\n\n\n\n

import React from 'react'\nimport ReactDOM from 'react-dom'\nimport { useModeSelector } from 'use-light-switch'\n\nconst App: React.FC = () => {\n    const selected = useModeSelector({\n        light: { color: 'green', name: 'Light' },\n        dark: { color: 'red', name: 'Dark' },\n        unset: { color: 'blue', name: 'Unset' },\n    })\n\n    return <div>\n        <p>Try switching your dark mode in macOS or Windows</p>\n        <div style={{\n            padding: '1em 2em',\n            backgroundColor: selected.color\n        }}>\n            {selected.name}\n        </div>\n    </div>\n}\n\nReactDOM.render(<App />, window.document.getElementById('root'))

\n","status":"publish","date":"2020-01-07T14:38:19","modified":"2020-09-22T20:50:58","tags":{"nodes":[{"id":"dGVybToxNA==","slug":"css","name":"css","count":1},{"id":"dGVybToxNQ==","slug":"dark-mode","name":"dark-mode","count":1},{"id":"dGVybTozOA==","slug":"media-query","name":"media-query","count":1}]},"post":{"featured":{"srcSet":"https://api.nicco.io/wp-content/uploads/2020/01/davisco-5E5N49RWtbA-unsplash-scaled-1-300x200.jpg 300w, https://api.nicco.io/wp-content/uploads/2020/01/davisco-5E5N49RWtbA-unsplash-scaled-1-1024x683.jpg 1024w, https://api.nicco.io/wp-content/uploads/2020/01/davisco-5E5N49RWtbA-unsplash-scaled-1-150x100.jpg 150w, https://api.nicco.io/wp-content/uploads/2020/01/davisco-5E5N49RWtbA-unsplash-scaled-1-768x512.jpg 768w, https://api.nicco.io/wp-content/uploads/2020/01/davisco-5E5N49RWtbA-unsplash-scaled-1-1536x1024.jpg 1536w, https://api.nicco.io/wp-content/uploads/2020/01/davisco-5E5N49RWtbA-unsplash-scaled-1-2048x1366.jpg 2048w, https://api.nicco.io/wp-content/uploads/2020/01/davisco-5E5N49RWtbA-unsplash-scaled-1-500x333.jpg 500w, https://api.nicco.io/wp-content/uploads/2020/01/davisco-5E5N49RWtbA-unsplash-scaled-1-800x533.jpg 800w, https://api.nicco.io/wp-content/uploads/2020/01/davisco-5E5N49RWtbA-unsplash-scaled-1-1200x800.jpg 1200w, https://api.nicco.io/wp-content/uploads/2020/01/davisco-5E5N49RWtbA-unsplash-scaled-1-1500x1000.jpg 1500w, https://api.nicco.io/wp-content/uploads/2020/01/davisco-5E5N49RWtbA-unsplash-scaled-1-2000x1334.jpg 2000w","altText":"","sourceUrl":"https://api.nicco.io/wp-content/uploads/2020/01/davisco-5E5N49RWtbA-unsplash-scaled-1.jpg"}}}]