Reactで、サイトの色をユーザーが選べるようにする方法

:root { --accent: #00c8e8; --on-accent: #1f2a30; }
body { margin: 0; font: 15px/1.6 'Noto Sans CJK JP', sans-serif; color: #1f2a30;
  background: color-mix(in srgb, var(--accent) 12%, white); }
.site-header { background: var(--accent); color: var(--on-accent); padding: 12px 16px; font-weight: bold; font-size: 17px; }
.card h2 { color: color-mix(in srgb, var(--accent) 70%, black); font-size: 17px; margin: 8px 0 4px; }
.primary { background: var(--accent); color: var(--on-accent); border: 0; border-radius: 6px; padding: 6px 18px; font: inherit; }

import { textColorOn } from './contrast';

export const COLORS = [
  { label: '水色', value: '#00c8e8' },
  { label: 'ピンク', value: '#ea7896' },
  { label: '緑', value: '#2b7a3b' },
  { label: '紫', value: '#6c4bc4' },
] as const;

export const DEFAULT_COLOR = '#00c8e8';
const STORAGE_KEY = 'theme-color';
const HEX = /^#[0-9a-f]{6}$/;

// localStorage の値は書き換えられることがあるので、#rrggbb の形のときだけ使う
export function readStoredColor(): string {
  try {
    const v = localStorage.getItem(STORAGE_KEY)?.toLowerCase();
    if (v && HEX.test(v)) return v;
  } catch {
    // localStorage が使えない設定のブラウザでは、既定の色にする
  }
  return DEFAULT_COLOR;
}

// <html> に CSS 変数を設定する。色を使う側は、var(--accent) などで読む
export function applyThemeColor(color: string) {
  const root = document.documentElement.style;
  root.setProperty('--accent', color);
  root.setProperty('--on-accent', textColorOn(color));
}

import { useSyncExternalStore } from 'react';
import { applyThemeColor, DEFAULT_COLOR, readStoredColor } from './theme';

let current = readStoredColor();
const listeners = new Set<() => void>();

function emit() {
  for (const l of listeners) l();
}

function subscribe(listener: () => void) {
  listeners.add(listener);
  // 別のタブで色が変わったら、このタブにも反映する
  const onStorage = (e: StorageEvent) => {
    if (e.key !== 'theme-color' && e.key !== null) return;
    current = readStoredColor();
    applyThemeColor(current);
    emit();
  };
  window.addEventListener('storage', onStorage);
  return () => {
    listeners.delete(listener);
    window.removeEventListener('storage', onStorage);
  };
}

export function setThemeColor(color: string) {
  current = color;
  try {
    localStorage.setItem('theme-color', color);
  } catch {
    // 保存できなくても、開いているあいだは選んだ色を使う
  }
  applyThemeColor(color);
  emit();
}

export function useThemeColor() {
  return useSyncExternalStore(subscribe, () => current, () => DEFAULT_COLOR);
}

import { COLORS } from './theme';
import { setThemeColor, useThemeColor } from './useThemeColor';

export function ThemeColorPicker() {
  const color = useThemeColor();
  const isPreset = COLORS.some((c) => c.value === color);

  return (
    <fieldset className="picker">
      <legend>サイトの色</legend>
      {COLORS.map((c) => (
        <label key={c.value} className="swatch">
          <input
            type="radio"
            name="theme-color"
            value={c.value}
            checked={color === c.value}
            onChange={() => setThemeColor(c.value)}
          />
          <span className="dot" style={{ background: c.value }} aria-hidden="true" />
          {c.label}
        </label>
      ))}
      <label className="swatch">
        <input type="color" value={color} onChange={(e) => setThemeColor(e.target.value)} />
        {isPreset ? '自分で選ぶ' : `自分で選んだ色（${color}）`}
      </label>
    </fieldset>
  );
}

// WCAG の相対輝度とコントラスト比で、背景の色の上に載せる文字の色を選ぶ
function channel(v: number): number {
  const c = v / 255;
  return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
}

export function luminance(hex: string): number {
  const n = parseInt(hex.slice(1), 16);
  return 0.2126 * channel((n >> 16) & 255) + 0.7152 * channel((n >> 8) & 255) + 0.0722 * channel(n & 255);
}

export function contrast(a: string, b: string): number {
  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
  return (hi + 0.05) / (lo + 0.05);
}

// 白と濃い色のうち、背景とのコントラスト比が高いほうを返す
export function textColorOn(bg: string): string {
  return contrast(bg, '#ffffff') >= contrast(bg, '#1f2a30') ? '#ffffff' : '#1f2a30';
}

水色 #00c8e8: 白との比 2.01 / #1f2a30 との比 7.28 → 文字の色 #1f2a30（4.5 以上）
ピンク #ea7896: 白との比 2.75 / #1f2a30 との比 5.32 → 文字の色 #1f2a30（4.5 以上）
緑 #2b7a3b: 白との比 5.32 / #1f2a30 との比 2.76 → 文字の色 #ffffff（4.5 以上）
紫 #6c4bc4: 白との比 6.10 / #1f2a30 との比 2.40 → 文字の色 #ffffff（4.5 以上）
黄色（自分で選んだ例） #f5d000: 白との比 1.51 / #1f2a30 との比 9.71 → 文字の色 #1f2a30（4.5 以上）
紺（自分で選んだ例） #1d3a8a: 白との比 10.37 / #1f2a30 との比 1.41 → 文字の色 #ffffff（4.5 以上）
明るさが中くらいのピンク（届かない例） #d85878: 白との比 3.76 / #1f2a30 との比 3.90 → 文字の色 #1f2a30（4.5 未満）
明るさが中くらいの緑（届かない例） #2f9e44: 白との比 3.45 / #1f2a30 との比 4.26 → 文字の色 #1f2a30（4.5 未満）

// <head> で、描画より前に読み込む小さなスクリプト。保存された色を CSS 変数に入れる
import { applyThemeColor, readStoredColor } from './theme';

applyThemeColor(readStoredColor());

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>サイトの色</title>
  <link rel="stylesheet" href="/style.css">
  <script src="/theme-init.js"></script>
</head>

React だけで設定（サーバーで描いた HTML）
  0.7秒後:        --accent=#00c8e8 / header=rgb(0, 200, 232) / 選ばれているラジオボタン=水色
  JS が届いたあと: --accent=#ea7896 / header=rgb(234, 120, 150) / 選ばれているラジオボタン=ピンク（開いてから 1.9 秒）
head で theme-init.js（サーバーで描いた HTML）
  0.7秒後:        --accent=#ea7896 / header=rgb(234, 120, 150) / 選ばれているラジオボタン=水色
  JS が届いたあと: --accent=#ea7896 / header=rgb(234, 120, 150) / 選ばれているラジオボタン=ピンク（開いてから 1.8 秒）

"red" → --accent #00c8e8 / 選ばれているラジオボタン 水色
"#12" → --accent #00c8e8 / 選ばれているラジオボタン 水色
"url(https://example.com/x.png)" → --accent #00c8e8 / 選ばれているラジオボタン 水色
"#EA7896" → --accent #ea7896 / 選ばれているラジオボタン ピンク