How to Override the Native Dark Mode Setting and Provide Users with Flexible Display Control?

How to Override the Native Dark Mode Setting

Introduction

With the proliferation of dark modes on various platforms, it's important to provide users with flexibility in choosing their preferred display appearance. This article addresses the challenge of overriding the native browser setting to toggle between dark and default modes, even if the user's system is set to dark mode.

CSS Variables and Themes

To create a switchable theme system, CSS variables and themes can be used. The root element defines default variables for light mode, while a dedicated dark theme overrides these variables with dark-themed values.

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

Elements then reference these variables, providing a consistent and global theme across the website.

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

JavaScript for Detection and Toggling

To automatically detect the user's preferred theme or override the system setting, JavaScript is employed. The detectColorScheme function checks for user-defined preferences in local storage, browser support for matchMedia, or the system's dark mode preference.

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

A toggle switch allows users to manually override their theme preference. The switchTheme function updates the data-theme attribute and sets a localStorage variable to persist the setting across page loads.

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

Conclusion

By combining CSS variables, themes, and JavaScript, websites can provide users with a customizable and user-centric interface, regardless of their system preferences or override desires. This solution allows for the coexistence of dark and light themes while ensuring a consistent and controlled visual experience across the entire application.

The above is the detailed content of How to Override the Native Dark Mode Setting and Provide Users with Flexible Display Control?. For more information, please follow other related articles on the PHP Chinese website!