反転ではなく作り直す暗色設計

<div class="card">
  <h2>役割で名付けた変数</h2>
  <p>色は <code>--surface</code> や <code>--text-muted</code> のように役割で持ちます。<code>--gray-100</code> のような名前にすると、暗色テーマで「一番薄い灰色が一番濃い」という矛盾が起きます。</p>
  <div class="inset">
    沈んだ面は <code>--surface-2</code>。明色では地より暗く、暗色では地より明るい。同じ変数名で逆向きの値を持てるのが、役割で名付ける利点です。
  </div>
  <div class="row" style="margin-top:1rem">
    <input type="text" value="入力欄も追従します" aria-label="サンプル入力" />
    <button class="btn" type="button">ボタン</button>
    <span class="tag">タグ</span>
  </div>
</div>

/* 1) 変数は「色の名前」ではなく「役割」で名付ける。
      --gray-100 ではなく --surface。テーマを足すときに破綻しない。 */
:root {
  color-scheme: light;

  --bg:        #f7f8fb;  /* ページの地 */
  --surface:   #ffffff;  /* カードなど持ち上がった面 */
  --surface-2: #eef1f6;  /* さらに一段沈んだ面 */
  --border:    #e2e6ee;
  --text:      #1b2030;
  --text-muted:#5a6478;
  --accent:    #2563eb;
  --accent-bg: #eaf1fe;
  /* 明色では影で奥行きを作る */
  --shadow: 0 1px 2px rgba(27, 32, 48, .06), 0 8px 24px -16px rgba(27, 32, 48, .3);
}

/* 2) 暗色は「反転」ではない。影が効かなくなるぶん、
      面の明度差そのもので階層を作り直す。 */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --bg:        #0f131b;
    --surface:   #171d28;  /* 地より明るい＝手前 */
    --surface-2: #1f2733;
    --border:    #2b3444;
    --text:      #e7ecf4;
    --text-muted:#98a2b5;
    --accent:    #6ea8ff;  /* 暗背景では彩度を落として明度を上げる */
    --accent-bg: #17233a;
    /* 暗色の影はほぼ見えない。境界線に仕事を移す */
    --shadow: 0 0 0 1px rgba(255, 255, 255, .04);
  }
}

/* 3) color-scheme を宣言すると、フォーム部品・スクロールバー・
      既定の選択色までブラウザが揃えてくれる。これを書かないと
      入力欄だけ明色のまま残る。 */

<div class="card">
  <h2>2つの値を1行で持つ</h2>
  <p><code>light-dark(明色, 暗色)</code> と書くと、<code>color-scheme</code> の状態に応じてブラウザが選びます。<code>@media (prefers-color-scheme: dark)</code> のブロックを丸ごと書かずに済むので、変数定義がおよそ半分になります。</p>
  <p>使う条件は <code>color-scheme: light dark</code> を宣言しておくこと。宣言が無いと常に明色側が選ばれます。手動切替と組み合わせるときも、<code>color-scheme</code> を上書きするだけで全変数が追従します。</p>
</div>

/* light-dark() は「いまのカラースキームに応じて2つの値から選ぶ」関数。
   @media を2回書かずに済むので、変数定義が半分の行数になる。
   使う条件は color-scheme が宣言されていること。 */
:root {
  color-scheme: light dark;   /* 両対応であることを宣言する */

  --bg:        light-dark(#f7f8fb, #0f131b);
  --surface:   light-dark(#ffffff, #171d28);
  --border:    light-dark(#e2e6ee, #2b3444);
  --text:      light-dark(#1b2030, #e7ecf4);
  --text-muted:light-dark(#5a6478, #98a2b5);
  --accent:    light-dark(#2563eb, #6ea8ff);
}

/* 未対応ブラウザ向けの受け皿。light-dark() が解釈できないと
   宣言ごと無効になるので、先に単色を書いておけば残る。 */
@supports not (color: light-dark(#000, #fff)) {
  :root { --bg: #f7f8fb; --surface: #fff; --border: #e2e6ee;
          --text: #1b2030; --text-muted: #5a6478; --accent: #2563eb; }
  @media (prefers-color-scheme: dark) {
    :root { --bg: #0f131b; --surface: #171d28; --border: #2b3444;
            --text: #e7ecf4; --text-muted: #98a2b5; --accent: #6ea8ff; }
  }
}

<div class="switch" role="group" aria-label="テーマの切替">
  <button type="button" data-theme-value="auto" aria-pressed="true">システム</button>
  <button type="button" data-theme-value="light" aria-pressed="false">ライト</button>
  <button type="button" data-theme-value="dark" aria-pressed="false">ダーク</button>
</div>

<div class="card">
  <h2>3状態にするのが要点</h2>
  <p>明・暗の2状態にすると「システム設定に戻す」ができなくなります。既定は <code>auto</code> にしておき、利用者が明示的に選んだときだけ <code>data-theme</code> を固定してください。</p>
</div>

<p class="state" id="state">現在: システム設定に追従</p>

/* テーマは data-theme 属性で持つ。値は auto / light / dark の3つ。
   auto のときだけ @media にシステム設定を判断させる。 */
:root {
  color-scheme: light;
  --bg: #f7f8fb; --surface: #fff; --border: #e2e6ee;
  --text: #1b2030; --text-muted: #5a6478; --accent: #2563eb;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f131b; --surface: #171d28; --border: #2b3444;
    --text: #e7ecf4; --text-muted: #98a2b5; --accent: #6ea8ff;
  }
}
/* 手動で暗色を選んだときは、システム設定より優先させる */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f131b; --surface: #171d28; --border: #2b3444;
  --text: #e7ecf4; --text-muted: #98a2b5; --accent: #6ea8ff;
}

/* 切替の瞬間に色が飛ぶのを抑える。ただし
   「動きを減らす」設定では即座に切り替える。 */
body { transition: background-color .2s ease, color .2s ease; }
@media (prefers-reduced-motion: reduce) { body { transition: none; } }

.switch {
  display: inline-flex; gap: 2px; padding: 3px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 999px;
}
.switch button {
  font: inherit; font-size: .84rem; line-height: 1.7;
  padding: .35rem .9rem; border: 0; border-radius: 999px;
  background: none; color: var(--text-muted); cursor: pointer;
}
/* 現在の状態は aria-pressed で持ち、CSS はそれを見て塗る */
.switch button[aria-pressed="true"] {
  background: var(--surface); color: var(--accent); font-weight: 700;
}
.switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

const KEY = "theme";
const root = document.documentElement;
const buttons = [...document.querySelectorAll("[data-theme-value]")];
const state = document.getElementById("state");

// localStorage は必ず try/catch で包む。プライベートモード、
// 保存を禁止した設定、サンドボックス化された iframe では例外を投げる。
const store = {
  get() { try { return localStorage.getItem(KEY); } catch { return null; } },
  set(v) { try { v ? localStorage.setItem(KEY, v) : localStorage.removeItem(KEY); } catch {} },
};

function apply(value) {
  if (value === "auto") root.removeAttribute("data-theme");
  else root.setAttribute("data-theme", value);

  buttons.forEach((b) =>
    b.setAttribute("aria-pressed", String(b.dataset.themeValue === value)),
  );

  const label = { auto: "システム設定に追従", light: "ライト固定", dark: "ダーク固定" };
  state.textContent = "現在: " + label[value];
}

buttons.forEach((b) =>
  b.addEventListener("click", () => {
    const v = b.dataset.themeValue;
    store.set(v === "auto" ? null : v);
    apply(v);
  }),
);

apply(store.get() ?? "auto");

<div class="card">
  <h2>影は消える。境界線に仕事を移す</h2>
  <p>明色では影が奥行きを作りますが、暗背景の上に黒い影を落としてもほぼ見えません。暗色では影を消し、代わりに境界線と面の明度差で階層を表します。</p>
  <div class="demo-row">
    <div class="elevated">持ち上がった面</div>
    <div class="elevated">もう一枚</div>
  </div>
</div>

<div class="card">
  <h2>明色前提のロゴは浮く</h2>
  <p>白地に置く前提で作られたロゴを暗背景にそのまま置くと、そこだけが光って見えます。明度と彩度をわずかに落とすと馴染みます。写真には当てないでください。</p>
  <div class="demo-row">
    <span class="logo-box">
      <svg width="104" height="24" viewBox="0 0 104 24" role="img" aria-label="サンプルロゴ">
        <rect x="0" y="4" width="16" height="16" rx="5" fill="#2563eb"></rect>
        <text x="24" y="17" font-family="Inter, sans-serif" font-size="14" font-weight="700" fill="#1b2030">Console</text>
      </svg>
    </span>
  </div>
</div>

<div class="card">
  <h2>純白と純黒を使わない</h2>
  <p class="contrast-note">暗背景に <code>#fff</code> の本文を置くと眩しく、長文で目が疲れます。<code>#e7ecf4</code> のように少し落とすだけで読みやすさが変わります。背景も <code>#000</code> ではなく <code>#0f131b</code> のように色味を持たせたほうが、明るい部屋でも沈みません。</p>
</div>

/* 1) 影は暗色でほとんど見えない。奥行きは境界線と面の明度差に移す。 */
.elevated {
  background: var(--surface);
  border-radius: 12px;
  padding: .9rem 1rem;
  box-shadow: light-dark(
    0 8px 24px -14px rgba(27, 32, 48, .45),
    none
  );
  border: 1px solid light-dark(transparent, #2b3444);
}

/* 2) 明色前提の画像・ロゴは暗背景で浮く。
      明度を少し落とし、彩度をわずかに下げると馴染む。
      写真には当てないこと（人物の肌が濁る）。 */
.logo-box { padding: .7rem 1rem; border-radius: 10px; background: #fff; }
@media (prefers-color-scheme: dark) {
  .logo-box { background: #eef1f6; }
  .logo-box svg { filter: brightness(.92) saturate(.9); }
}

/* 3) 図やイラストをテーマごとに差し替えるなら picture が確実。
      CSS の filter で反転させると、文字まで反転して読めなくなる。 */
/* 4) 純白と純黒は使わない。#fff の文字は暗背景で眩しく、
      #000 の背景は明るい部屋で沈む。少し寄せた値にする。 */
.contrast-note {
  border-left: 3px solid var(--accent);
  padding-left: .9rem;
  color: var(--text-muted);
  line-height: 1.85;
  font-size: .9rem;
}