ネイティブ カラー スキーム設定のオーバーライド

ダーク モードの実装は、さまざまなオペレーティング システムで広く採用されていることから重要になっています。 CSS メディア ルール @media (prefers-color-scheme: dark) を通じてネイティブ ブラウザーのサポートが存在しますが、ユーザーの好みに完全に対応していない場合や、Microsoft Edge などのサポートされていないブラウザーに対応していない可能性があります。

システム設定の分離ウェブサイトのテーマから

最適なユーザー制御を提供するには、ユーザーがシステムのカラースキーム設定をオーバーライドできるようにすることが重要です。これにより、特定の Web サイトで好みのテーマを選択できるようになります。これを実現するには、CSS 変数と JavaScript の組み合わせが利用されます。

CSS 構成

CSS 変数はテーマ パラメータを定義します:

:root {
  --font-color: #000;
  --link-color: #1C75B9;
  --link-white-color: #fff;
  --bg-color: rgb(243,243,243);
}

[data-theme="dark"] {
  --font-color: #c1bfbd;
  --link-color: #0a86da;
  --link-white-color: #c1bfbd;
  --bg-color: #333;
}

柔軟性を確保するために、スタイルシート全体で変数が使用されます。

body {
  color: #000;
  color: var(--font-color);
  background: rgb(243,243,243);
  background: var(--bg-color);
}

JavaScript の実装

JavaScript は、ユーザーの好みの検出とテーマ間の切り替えにおいて重要な役割を果たします。

function detectColorScheme() {
  let theme = "light";

  if (localStorage.getItem("theme") == "dark") {
    theme = "dark";
  } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
    theme = "dark";
  }

  if (theme == "dark") {
    document.documentElement.setAttribute("data-theme", "dark");
  }
}

detectColorScheme();

toggleTheme 関数はテーマの切り替えを処理します:

function switchTheme(e) {
  if (e.target.checked) {
    localStorage.setItem('theme', 'dark');
    document.documentElement.setAttribute('data-theme', 'dark');
  } else {
    localStorage.setItem('theme', 'light');
    document.documentElement.setAttribute('data-theme', 'light');
  }  
}

この JavaScript はテーマの自動検出を保証し、ユーザーがチェックボックスでテーマをオーバーライドできるようにします:

結論

CSS 変数と JavaScript を組み合わせることで、システム設定に関係なく、ユーザーが Web サイトの配色を制御できるようになります。 。このアプローチにより、ユーザー エクスペリエンスが強化され、個人の好みやさまざまなブラウザーの制限に対応できます。