CSS 変数と JavaScript を使用して、Web サイトにカスタマイズ可能なダーク モードを作成するにはどうすればよいですか?

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

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

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

変数とテーマを使用した CSS のカスタマイズ

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

<code class="css">:root {
    --font-color: #000;
    ...
    --bg-color: rgb(243,243,243);
}

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

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

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

ヘッダー内HTML のセクションに、JavaScript を追加してユーザーの好みのテーマを検出します:

<code class="javascript">function detectColorScheme() {
    var theme = "light";
    ...
}
detectColorScheme();</code>

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

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

function switchTheme(e) {
    ...
}

toggleSwitch.addEventListener('change', switchTheme, false);</code>

テーマ切り替え用の HTML

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

<code class="html"><label id="theme-switch" class="theme-switch" for="checkbox_theme">
    <input type="checkbox" id="checkbox_theme">
</label></code>

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

以上がCSS 変数と JavaScript を使用して、Web サイトにカスタマイズ可能なダーク モードを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。