How can you override the system\'s \'prefers-color-scheme\' setting for specific websites and ensure a consistent user experience regardless of their system\'s dark mode preference?

Overriding the CSS "prefers-color-scheme" Setting

In order to accommodate the introduction of dark modes in macOS, Windows, and iOS, it is essential to implement a dark mode for web applications. Native options in Safari, Chrome, and Firefox utilize the CSS media rule "@media (prefers-color-scheme: dark)" to automatically apply dark mode styles when the system is set to dark mode.

However, the limitation of this approach lies in the potential preference of some users to override the system dark mode for specific websites. Additionally, Microsoft Edge currently lacks support for this media rule.

Solution

To address this challenge, a comprehensive solution involves the following:

CSS

Implementing CSS variables and themes:

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

Then, utilize these variables where applicable:

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

JavaScript

Detect the user's preferred theme and toggle between light and dark modes:

<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

Include a checkbox for toggling between themes:

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

This approach utilizes CSS variables and JavaScript to automatically detect the user's preferred theme and dynamically apply it. It also provides the user with the flexibility to override the dark mode setting for specific web applications.

The above is the detailed content of How can you override the system\'s \'prefers-color-scheme\' setting for specific websites and ensure a consistent user experience regardless of their system\'s dark mode preference?. For more information, please follow other related articles on the PHP Chinese website!