ネイティブのダークモード設定をオーバーライドしてユーザーに柔軟なディスプレイ制御を提供するにはどうすればよいですか?

ネイティブ ダーク モード設定をオーバーライドする方法

はじめに

ダーク モードの急増に伴いさまざまなプラットフォームでモードを使用できるようにするためには、ユーザーが好みの表示外観を柔軟に選択できるようにすることが重要です。この記事では、ユーザーのシステムがダーク モードに設定されている場合でも、ネイティブ ブラウザの設定をオーバーライドしてダーク モードとデフォルト モードを切り替えるという課題について説明します。

CSS 変数とテーマ

切り替え可能なテーマ システムを作成するには、CSS 変数とテーマを使用できます。ルート要素はライト モードのデフォルト変数を定義しますが、専用のダーク テーマはこれらの変数をダーク テーマの値でオーバーライドします。

<code class="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;
}</code>

要素はこれらの変数を参照し、Web サイト全体に一貫したグローバル テーマを提供します。

<code class="css">body {
    color: #000;
    color: var(--font-color);
    background: rgb(243, 243, 243);
    background: var(--bg-color);
}</code>

検出と切り替えのための JavaScript

ユーザーの好みのテーマを自動的に検出したり、システム設定をオーバーライドしたりするために、JavaScript が使用されます。 detectColorScheme 関数は、ローカル ストレージ内のユーザー定義の設定、ブラウザの matchMedia サポート、またはシステムのダーク モード設定をチェックします。

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

    // Prioritize local storage override
    if (localStorage.getItem("theme")) {
        if (localStorage.getItem("theme") == "dark") {
            theme = "dark";
        }
    } else if (!window.matchMedia) {
        // No support for matchMedia
        return false;
    } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
        // System dark mode detected
        theme = "dark";
    }

    // Set `data-theme` attribute on document root
    if (theme == "dark") {
        document.documentElement.setAttribute("data-theme", "dark");
    }
}

detectColorScheme();</code>

トグル スイッチを使用すると、ユーザーはテーマの設定を手動でオーバーライドできます。 switchTheme 関数は、data-theme 属性を更新し、ページの読み込み全体で設定を永続化するように localStorage 変数を設定します。

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

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

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

結論

CSS 変数、テーマを組み合わせることで、 、および JavaScript を使用すると、Web サイトは、ユーザーのシステム設定やオーバーライドの希望に関係なく、カスタマイズ可能なユーザー中心のインターフェイスをユーザーに提供できます。このソリューションにより、暗いテーマと明るいテーマの共存が可能になり、アプリケーション全体で一貫性のある制御された視覚体験が確保されます。

以上がネイティブのダークモード設定をオーバーライドしてユーザーに柔軟なディスプレイ制御を提供するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。