只需几行 JavaScript 即可更改浅色和深色主题

好吧..涉及到一点CSS？但它比我在互联网上找到的答案要容易得多。

我想要实现什么？
我试图用这个方法实现两件事。

1. 我需要允许网站以用户喜欢的方式加载（他们已经在操作系统中选择主题的部分）
2. 但我也想允许它们在加载后在深色和浅色模式之间切换。

所以我们将有一个网站，它将加载用户期望的主题，然后允许他们在需要时更改它。

第 1 步：创建用于切换的按钮

<img class="mode" src="./img/moon.svg">

我使用一个图像作为我的按钮，其中有一个月亮的 svg 图像。您可以添加您感觉可以在两个选项之间切换的按钮或复选框。

第 2 步：将颜色详细信息作为自定义属性放入 CSS 中

:root{
    color-scheme: light dark;

    --light-bg: ghostwhite;
    --light-color: darkslategray;
    --light-code: tomato;

    --dark-bg: darkslategray;
    --dark-color: ghostwhite;
    --dark-code: gold;
}

.light{
    color-scheme: light;
}

.dark{
    color-scheme: dark;
}

好吧..所以在根中你会看到名为 color-scheme 的属性，这将改变我们的游戏规则。
正如您所看到的，它需要浅色或深色的值。我还创建了两个类 .light 和 .dark，将颜色方案的值设置为深色或浅色。

第 3 步：为代码的各个部分添加颜色

body{
    background-color: light-dark(var(--light-bg), var(--dark-bg));
}

现在，每当属性需要颜色（例如背景、颜色属性）时，您都可以使用名为 light-dark() 的函数。
该函数有两个值，第一个值在颜色方案设置为浅色时使用，第二个值在颜色方案设置为深色时使用。

是的...这是2024年5月发布的功能。它相当新，但很快就会适配。截至撰写本文时，它处于基线支持中。这是它的文档

light-dark() - CSS：级联样式表 | light-dark() MDN

light-dark() CSS 函数可以为属性设置两种颜色 - 通过检测开发人员是否设置了浅色或深色配色方案或用户是否请求浅色或深色主题返回两种颜色选项之一 - 无需将主题颜色包含在偏好中-颜色方案媒体特征查询。 用户可以通过操作系统设置（例如浅色或深色模式）或用户代理设置来表明他们的颜色方案偏好。 light-dark() 函数能够提供两个颜色值，其中任何 都可以。值被接受。如果用户的首选项设置为浅色或未设置首选项，则 light-dark() CSS 颜色函数返回第一个值；如果用户的首选项设置为深色，则返回第二个值。

开发者.mozilla.org

如果您使用此功能，CSS 将自动从操作系统检测用户首选项并将其设置为他们想要的颜色。
我们实现了第一个目标，网站将加载用户操作系统中已经想要的颜色模式。

第 4 步：使用 Javascript 在深色模式和浅色模式之间切换

// mode is the toggle button 
mode.addEventListener("click", ()=>{
    // we are getting the color scheme here
    let theme = document.documentElement.style.colorScheme;
    /*  when a website is first loaded
    it will have null as its color-scheme value*/
    if(theme == null){
        // this window.matchMedia() checks if the user prefers the dark theme
        if(window.matchMedia("(prefers-color-scheme:dark)").matches){
            /* if they prefer dark, clicking on our button should turn everything to light, 
            the color-scheme will be given a value as light  */
            document.documentElement.style.colorScheme = "light"; 
        }
        // Or else the color-scheme will be set to dark
        document.documentElement.style.colorScheme = "dark";
    }

    /* Now since our toggle button set the color scheme,
        we can simply change light to dark and dark to light using below code 
    */

    else{
        document.documentElement.style.colorScheme = (theme == "light")? "dark": "light";
    }
});

这里，document.documentElement.style.colorScheme 实际上指的是 CSS 中的 :root 元素。
由于我们已经在上一步中实现了以用户首选模式打开网站，因此当单击切换按钮时，它会执行以下操作。

1. 它检查 color-scheme 是否有任何值，如果没有，则网站处于用户首选模式，我们需要确定是深色还是浅色来更改模式。
2. 它使用 window.matchMedia("(prefers-color-scheme:dark)").matches 来查找是否处于深色模式，如果处于深色模式，我们将 color-scheme 更改为浅色，如果不是，我们将其更改为深色。
3. 下次他们单击按钮时，我们已经为颜色方案设置了值，因此我们只需在深色或浅色之间切换。

*PS：*这是我的第一篇文章，我仍然是网络开发的初学者。但当我搜索这个方法时，并没有看到任何相关的帖子。如果您已经知道这一点，我很抱歉点击诱饵您？我认为这篇文章将帮助我在每次开发新项目时记住这个过程。
如果您正在努力让您的网站在旧浏览器上运行，那么此方法绝对不适合您。在关于这篇文章的评论中告诉我。感谢您的阅读。

以上是只需几行 JavaScript 即可更改浅色和深色主题的详细内容。更多信息请关注PHP中文网其他相关文章！