Dark mode

import { useEffect, useState } from 'react';
import { Toggle } from '@base-ui/react/toggle';
import { ToggleGroup } from '@base-ui/react/toggle-group';

const THEMES = ['light', 'dark', 'system'] as const;
type Theme = (typeof THEMES)[number];
const DARK_QUERY = '(prefers-color-scheme: dark)';

// Theme tokens such as bg-background switch under .dark on <html>. Run the
// same code in an inline <head> script too, so the first paint is right.
function applyTheme(theme: Theme) {
  const dark =
    theme === 'dark' || (theme === 'system' && matchMedia(DARK_QUERY).matches);
  document.documentElement.classList.toggle('dark', dark);
  document.documentElement.style.colorScheme = dark ? 'dark' : 'light';
}

export function ThemePicker() {
  const [theme, setTheme] = useState<Theme>(
    () => THEMES.find((t) => t === localStorage.getItem('theme')) ?? 'system'
  );

  useEffect(() => {
    applyTheme(theme);
    localStorage.setItem('theme', theme);
    if (theme !== 'system') return;
    // Follow the device setting while System is selected.
    const media = matchMedia(DARK_QUERY);
    const onChange = () => applyTheme('system');
    media.addEventListener('change', onChange);
    return () => media.removeEventListener('change', onChange);
  }, [theme]);

  return (
    <ToggleGroup
      aria-label='Theme'
      value={[theme]}
      onValueChange={(value) => {
        const next = THEMES.find((t) => t === value[0]);
        if (next) setTheme(next); // ignore clicks on the selected option
      }}
      className='inline-flex gap-1 rounded-full border bg-muted p-1'
    >
      {THEMES.map((option) => (
        <Toggle
          key={option}
          value={option}
          className='rounded-full px-3 py-1.5 text-sm text-muted-foreground capitalize data-pressed:bg-background data-pressed:text-foreground data-pressed:shadow-sm focus-visible:outline-2 focus-visible:outline-blue-500'
        >
          {option}
        </Toggle>
      ))}
    </ToggleGroup>
  );
}