
- [Quick Notes](#quick-notes)
- [Examples](#examples)
  - [Set the initial Mode](#set-the-initial-mode)
  - [Toggling the Mode](#toggling-the-mode)
  - [Hook Tracking the Mode in state using a `MutationObserver`](#hook-tracking-the-mode-in-state-using-a-mutationobserver)
  - [Applying Styles Using CSS Variables](#applying-styles-using-css-variables)
  - [Applying Styles Directly in CSS/SCSS Modules](#applying-styles-directly-in-cssscss-modules)
- [References](#references)

----

## Quick Notes
- Use global class to indicate when dark mode is enabled
- For SPAs, the global class can be applied at the root component level
- For NextJS, set the global class on the body in the `_document.tsx`
- When using [styled components](https://styled-components.com/), leverage the `ThemeProvider`
- Set the default dark/light mode based on the `prefers-color-scheme` media query to honor user's preference
  - See related: [Using Users' Preferences for Dark Mode](/posts/detecting-dark-mode)
- When the mode is changed, store the user's selection in [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)


## Examples
### Set the initial Mode
```typescript
// Constants for the dark mode CSS class and local storage key
export const DARK_MODE_CLASS = 'dark_mode';
export const DARK_MODE_STORAGE_KEY = 'dark_mode';
```

```typescript
if (
  localStorage?.getItem(DARK_MODE_STORAGE_KEY}) ??
  window.matchMedia('(prefers-color-scheme: dark)').matches
) {
  document.body.classList.add(DARK_MODE_CLASS);
}
```

To ensure this happens as early as possible in NextJS:
> File: `_document.tsx`
```tsx
class CustomDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          <Main />
          <NextScript />
          <Script id="dark_mode_init" strategy="afterInteractive">
            {`
            if (
              localStorage?.getItem('${DARK_MODE_STORAGE_KEY}') ??
              window.matchMedia('(prefers-color-scheme: dark)').matches
            ) {
              document.body.classList.add('${DARK_MODE_CLASS}');
            }
            `}
          </Script>
        </body>
      </Html>
    );
  }
}
```

### Toggling the Mode
```typescript
// Constants for the dark mode CSS class and local storage key
export const DARK_MODE_CLASS = 'dark_mode';
export const DARK_MODE_STORAGE_KEY = 'dark_mode';
```

```typescript
export function toggleDarkMode() {
  if (document.body.classList.contains(DARK_MODE_CLASS)) {
    document.body.classList.remove(DARK_MODE_CLASS);
    localStorage?.setItem(DARK_MODE_STORAGE_KEY, '');
  } else {
    document.body.classList.add(DARK_MODE_CLASS);
    localStorage?.setItem(DARK_MODE_STORAGE_KEY, 'true');
  }
}
```

### Hook Tracking the Mode in state using a `MutationObserver`
```typescript
export default function useIsDarkMode() {
  const [isDarkMode, setIsDarkMode] = useState<boolean>(false);

  useEffect(() => {
    const observer = new MutationObserver(() => {
      setIsDarkMode(document.body.classList.contains(DARK_MODE_CLASS));
    });
    observer.observe(document.body, {
      attributes: true,
      attributeFilter: ['class'],
      characterData: false,
      childList: false,
      subtree: false,
    });

    // Set the initial value
    // For NextJS this has to be done within the effect since
    // it must be run client side - for SSR projects it can be done
    // in the state initialization
    setIsDarkMode(document.body.classList.contains(DARK_MODE_CLASS));

    return () => {
      observer.disconnect();
    };
  }, []);

  return isDarkMode;
}
```

### Applying Styles Using CSS Variables
```css
body {
  --background-color: #ffffff;
  --text-color: #000000;

  /**
   * The variables can be used anywhere below body
   * (even in components using css modules)
   */
  color: var(--text-color);
  background-color: var(--background-color);
}

body.dark_mode {
  --background-color: #000000;
  --text-color: #ffffff;
}
```

### Applying Styles Directly in CSS/SCSS Modules
```css
.my_component {
  // Light mode styles
  background-color: #ffffff;
  color: #000000;
}

:global(body.dark_mode) {
  .my_component {
    /** Dark mode styles */
    background-color: #ffffff;
    color: #000000;
  }
}
```

## References
-  [MDN Docs - Using CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
-  [NextJS Docs - Scripts: `afterInteractive`](https://nextjs.org/docs/basic-features/script#afterinteractive)
-  [styled components Docs - Theming](https://styled-components.com/docs/advanced)

Dark Mode Toggle in React


- [CSS Media Query](#css-media-query)
- [JavaScript - One time check](#javascript---one-time-check)
- [JavaScript / TypeScript - Watch for color scheme preference change](#javascript--typescript---watch-for-color-scheme-preference-change)
- [React Hook](#react-hook)
- [References](#references)

----


Dark mode is available and used pretty much everywhere now. Most operating systems allow users to set their preference between light and dark mode and this can be detected in the browser.

The following are notes on how to detect users' preferences in CSS and JavaScript / TypeScript.

## CSS Media Query

For CSS, all that is required is to write your styles by default in light mode and then wrap your dark mode changes in the `@media (prefers-color-scheme: dark)` media query (Note: you can also write your styles for dark mode by default and change the query to match `light` instead to do the inverse).
```css
/** Default for light mode */
body {
  background-color: #1f1f1f;
  color: #efefef;
}

@media (prefers-color-scheme: dark) {
  /** Make background dark and text light in dark mode */
  body {
    background-color: #1f1f1f;
    color: #efefef;
  }
}
```

## JavaScript - One time check
```js
if (
  window.matchMedia &&
  window.matchMedia('(prefers-color-scheme: dark)').matches
) {
  // Dark mode
} else {
  // Light mode
}
```

## JavaScript / TypeScript - Watch for color scheme preference change
```typescript
window.matchMedia &&
window
  .matchMedia('(prefers-color-scheme: dark)')
  .addEventListener('change', (evt: MediaQueryListEvent) => {
    // This event fires whenever the client changes their preferred color scheme
    if (evt.matches) {
      // Dark Mode
    } else {
      // Light mode
    }
  });
```

## React Hook
**[Example on CodeSandbox](https://codesandbox.io/s/dark-mode-react-hook-3nijjf)**
>File: `usePrefersDarkMode.ts`
```typescript
import { useEffect, useState } from "react";

export default function usePrefersDarkMode() {
  const [prefersDarkMode, setPrefersDarkMode] = useState<boolean>(
    window.matchMedia("(prefers-color-scheme: dark)").matches
  );

  useEffect(() => {
    const onPreferenceChange = (evt: MediaQueryListEvent) => {
      setPrefersDarkMode(evt.matches);
    };
    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
    mediaQuery.addEventListener("change", onPreferenceChange);

    return () => {
      // Remove listener on unmount
      mediaQuery.removeEventListener("change", onPreferenceChange);
    };
  }, []);

  return prefersDarkMode;
}
```


## References

- [MDN: prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)

Posts tagged "dark mode"

Dark Mode Toggle in React

Using Users' Preferences for Dark Mode