immich-folio/components/ThemeToggle.tsx

/**
 * ThemeToggle — dark/light mode switch.
 *
 * A visitor's own choice is kept in localStorage and always wins. Without one,
 * the starting mode comes from `mode:` in settings.yaml, which the layout has
 * already rendered onto <html> as data-default-theme — reading it from the DOM
 * rather than taking a prop keeps this component mountable anywhere without
 * threading config through the tree. `auto` follows the operating system.
 *
 * It used to hardcode dark, so an operator who preferred light had no way to
 * give visitors anything else (#512).
 *
 * Uses useSyncExternalStore to satisfy React strict mode lint rules.
 */

'use client';

import { useSyncExternalStore, useCallback } from 'react';
import { useDictionary } from './I18nProvider';

type Theme = 'dark' | 'light';

/** Module-level theme state — shared across all instances. */
let currentTheme: Theme = 'dark';
const listeners = new Set<() => void>();

function subscribe(callback: () => void): () => void {
  listeners.add(callback);
  return () => listeners.delete(callback);
}

function getSnapshot(): Theme {
  return currentTheme;
}

function getServerSnapshot(): Theme {
  return 'dark'; // SSR default
}

/** What the OS asks for. Dark unless it says otherwise, as before. */
function systemTheme(): Theme {
  return typeof window !== 'undefined' &&
    window.matchMedia?.('(prefers-color-scheme: light)').matches
    ? 'light'
    : 'dark';
}

/** The configured starting mode, read off the <html> the server rendered. */
function configuredTheme(): Theme {
  const mode = document.documentElement.getAttribute('data-default-theme');
  if (mode === 'light' || mode === 'dark') return mode;
  // 'auto', or an older layout that renders no attribute at all.
  return systemTheme();
}

function applyTheme(theme: Theme) {
  currentTheme = theme;
  if (typeof document !== 'undefined') {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('theme', theme);
  }
  listeners.forEach((cb) => cb());
}

// Initialize from localStorage on module load (client-side only)
if (typeof window !== 'undefined') {
  const stored = localStorage.getItem('theme');
  currentTheme = stored === 'light' || stored === 'dark' ? stored : configuredTheme();
  document.documentElement.setAttribute('data-theme', currentTheme);
}

export function ThemeToggle() {
  const theme = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
  const t = useDictionary();
  const label = theme === 'dark' ? t.theme.switchToLight : t.theme.switchToDark;

  const toggle = useCallback(() => {
    applyTheme(theme === 'dark' ? 'light' : 'dark');
  }, [theme]);

  return (
    <button
      className="theme-toggle"
      onClick={toggle}
      aria-label={label}
      type="button"
      title={label}
    >
      {theme === 'dark' ? (
        // Sun icon
        <svg
          aria-hidden="true"
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <circle cx="12" cy="12" r="5" />
          <line x1="12" y1="1" x2="12" y2="3" />
          <line x1="12" y1="21" x2="12" y2="23" />
          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
          <line x1="1" y1="12" x2="3" y2="12" />
          <line x1="21" y1="12" x2="23" y2="12" />
          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
        </svg>
      ) : (
        // Moon icon
        <svg
          aria-hidden="true"
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
        </svg>
      )}
    </button>
  );
}