CSS の「prefers-color-scheme」設(shè)定をオーバーライドする

macOS、Windows、および Windows でのダーク モードの導(dǎo)入に対応するためiOS では、Web アプリケーションにダーク モードを?qū)g裝することが不可欠です。 Safari、Chrome、Firefox のネイティブ オプションは、CSS メディア ルール「@media (prefers-color-scheme: dark)」を利用して、システムがダーク モードに設(shè)定されているときにダーク モード スタイルを自動的に適用します。

ただし、このアプローチの限界は、一部のユーザーが特定の Web サイトに対してシステムのダーク モードをオーバーライドすることを好む可能性があることにあります。さらに、Microsoft Edge は現(xiàn)在、このメディア ルールをサポートしていません。

ソリューション

この課題に対処するには、次のような包括的なソリューションが必要です。

CSS

CSS 変數(shù)とテーマの実裝:

<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>

次に、該當(dāng)する場合は次の変數(shù)を利用します:

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

JavaScript

ユーザーの好みのテーマを検出し、ライト モードとダーク モードを切り替えます:

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

    // Get the theme from local storage, overriding OS settings
    if(localStorage.getItem("theme")){
        if(localStorage.getItem("theme") == "dark"){
            var theme = "dark";
        }
    } else if(!window.matchMedia) {
        // MatchMedia method not supported
        return false;
    } else if(window.matchMedia("(prefers-color-scheme: dark)").matches) {
        // OS theme setting detected as dark
        var theme = "dark";
    }

    // Set document with a `data-theme` attribute if dark theme preferred
    if (theme=="dark") {
         document.documentElement.setAttribute("data-theme", "dark");
    }
}
detectColorScheme();

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;
    }    
}

// Toggle switch listener
const toggleSwitch = document.querySelector('#theme-switch input[type="checkbox"]');
toggleSwitch.addEventListener('change', switchTheme, false);

// Pre-check the dark-theme checkbox if dark-theme is set
if (document.documentElement.getAttribute("data-theme") == "dark"){
    toggleSwitch.checked = true;
}</code>

HTML

テーマを切り替えるためのチェックボックスを含めます。

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

このアプローチでは、CSS 変數(shù)と JavaScript を利用して、ユーザーの好みのテーマを自動的に検出し、動的に適用します。また、特定の Web アプリケーションのダーク モード設(shè)定を上書きできる柔軟性もユーザーに提供します。

以上が特定の Web サイトのシステムの「prefers-color-scheme」設(shè)定をオーバーライドして、システムのダーク モード設(shè)定に関係なく一貫したユーザー エクスペリエンスを確保するにはどうすればよいでしょうか?の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。