CSS 変数と JavaScript を使用したダーク モードのカスタマイズ

アプリまたは Web サイトにダーク モードを実装することは、シームレスなユーザー エクスペリエンスを提供するために重要です。ネイティブ CSS メディア ルールは、ブラウザーがシステム設定のダーク モードを検出するオプションを提供しますが、ユーザーは、Microsoft Edge など、まだサポートしていない特定のサイトやブラウザーに対して別のテーマを好む場合があります。

対処するにはこれにより、CSS 変数と JavaScript を利用してテーマ設定を管理できます。

変数とテーマによる CSS カスタマイズ

ルートまたはデフォルト レベルで CSS 変数を定義し、指定しますダークテーマ:

:root {
    --font-color: #000;
    ...
    --bg-color: rgb(243,243,243);
}

[data-theme="dark"] {
    --font-color: #c1bfbd;
    ...
    --bg-color: #333;
}

スタイルを動的に調整するために必要な変数を呼び出します。

テーマの検出と切り替えのための JavaScript

HTML のヘッダー セクションに、次のコードを追加します。ユーザーの好みのテーマを検出するための JavaScript:

function detectColorScheme() {
    var theme = "light";
    ...
}
detectColorScheme();

JavaScript を使用して明るいテーマと暗いテーマを切り替えます:

const toggleSwitch = document.querySelector('#theme-switch input[type="checkbox"]');

function switchTheme(e) {
    ...
}

toggleSwitch.addEventListener('change', switchTheme, false);

テーマ切り替え用の HTML

ユーザー制御のテーマ切り替え用の HTML チェックボックスを作成します:

このアプローチを使用すると、ユーザーのテーマを自動的に検出し、ユーザーがそれをオーバーライドできるようにし、ブラウザーやプラットフォーム全体でカスタマイズされたエクスペリエンスを提供できます。