如何覆盖原生深色模式设置，为用户提供灵活的显示控制？

如何覆盖原生深色模式设置

简介

随着深色的扩散由于不同平台上的模式不同，为用户提供选择其首选显示外观的灵活性非常重要。本文解决了覆盖本机浏览器设置以在深色模式和默认模式之间切换的挑战，即使用户的系统设置为深色模式也是如此。

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>

然后元素引用这些变量，从而在整个网站上提供一致的全局主题。

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

用于检测和切换的 JavaScript

为了自动检测用户的首选主题或覆盖系统设置，使用了 JavaScript。 detectorColorScheme 函数检查本地存储中用户定义的首选项、浏览器对 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，网站可以为用户提供可定制且以用户为中心的界面，无论他们的系统偏好或覆盖需求如何。该解决方案允许深色和浅色主题共存，同时确保整个应用程序具有一致且受控的视觉体验。

以上是如何覆盖原生深色模式设置，为用户提供灵活的显示控制？的详细内容。更多信息请关注PHP中文网其他相关文章！