如何为网站添加 CSS 暗模式（转载）

2024-02-11 23:23:16

How To Add CSS Dark Mode To A Website

如何为网站添加 CSS 暗模式

原文地址：https://kevq.uk/how-to-add-css-dark-mode-to-a-website/

Posted on 发表于03/02/2020 03 / 02 / 2020 by 作者Kev Quirk 凯文 · 夸克

A lot of people like to have the option of having a dark mode for a website. Maybe they prefer the look, or maybe they want to save their eyes from strain. This post will show you how to implement an automatic CSS dark mode that changes depending on your visitor’s theme.

很多人喜欢选择一个黑暗模式的网站。也许他们更喜欢这个样子，也许他们想让自己的眼睛免受疲劳。这篇文章将告诉你如何实现一个自动的 CSS 暗模式，它会根据访问者的主题而改变。

CSS Dark Mode

黑暗模式

On this site, I define variables to set the colours of my theme. I’d suggest you do the same, as it will make this process a lot easier. My standard variables are as follows:

在这个网站上，我定义变量来设置我的主题的颜色。我建议你也这样做，因为这会使这个过程更加容易。我的标准变量如下:

:root  {
--accent: #226997;
--main : #333;
--light : #666;
--lighter : #f3f3f3;
--border : #e6e6e6;
--bg : #ffffff ;
}

If you want to use these variables throughout your stylesheet, you do so like this:

如果你想在样式表中使用这些变量，你可以这样做:

p {
color : var (--main );
}

This way, if you ever want to change the colours of your theme, all you need to do is amend the variable you defined and everything using that variable will be updated.

这样，如果你想改变主题的颜色，你所需要做的就是修改你定义的变量，使用这个变量的所有东西都会被更新。

Now we need to define a new set of variables that will be used when CSS dark mode is invoked. For me, the additional variables look like this:

现在我们需要定义一组新的变量，这些变量将在调用 CSS 暗模式时使用。对我来说，额外的变量看起来像这样:

/* Define colours for dark mode */ / * 为黑暗模式定义颜色 * /
:root {
--accent  : #3493d1;
--main : #f3f3f3;
--light : #ececec;
--lighter : #666;
--border : #e6e6e6;
--bg : #333333 ;
}

Adding Dark Mode Support

增加暗模式支持

We now have our two sets of variables defined. The only thing left to do is add the prefers-color-scheme media query to our dark variables.

现在我们已经定义了两组变量。剩下唯一要做的就是添加偏好颜色方案媒体查询到我们的黑变量。

Take your dark colour variables and add the @media query below:

带上你的深色变量，在下面添加@media 查询:

/* Define colours for dark mode */ / * 为黑暗模式定义颜色 * /
@media  (prefers-color-scheme: dark ) {
:root {
--accent: # 3493d1;
--main:  # f3f3f3;
--light: # ececec;
--lighter:#666; 
--border:#e6e6e6; 
--bg: #333333; 
}
}

That’s literally it! Your site will now automatically switch to dark mode if someone is using a dark operating system theme and visits your site.

就是这样！您的网站现在将自动切换到黑暗模式，如果有人正在使用黑暗的操作系统主题和访问您的网站。

My light theme 我的灯光主题

My dark theme 我的黑暗主题

Testing It Works

测试它的作用

I’m sure you will want to test this change works. To do so, you can simply enable a dark theme on your operating system, such as the iOS dark theme.

我相信您会希望测试这种改变是否有效。要做到这一点，你可以简单地在你的操作系统上启用一个黑暗主题，比如 iOS 黑暗主题。

Alternatively, if you don’t want to mess around with your OS themes, you can force this test in Firefox. Here’s how:

或者，如果你不想在你的操作系统主题上浪费时间，你可以在 Firefox 中强制进行这个测试。以下是如何做到的:

Open Firefox and type 打开 Firefox 并输入about:config in the address bar and hit enter. 然后按回车键
You will be asked to accept the risk. Accept it. 你会被要求接受这个风险，接受它
In the search bar, search for 在搜索栏中，搜索ui.systemUsesDarkTheme.
Change the checkbox to 将复选框改为number and click on the 然后点击+ symbol. 符号
Change the value to 将值更改为1 and click on the tick button. 然后点击打勾按钮
The page should now turn dark. 这一页现在应该变暗了
Head back to your website and the theme should have automatically updated to dark mode. 回到你的网站和主题应该已经自动更新到黑暗模式
If you want to test it switches back, change the value to 如果要测试它，则切换回来，将值更改为0.
Once you have finished testing, click the trash can to delete the option. 完成测试后，单击回收筒删除该选项

Conclusion

总结

You should now have a website that is not only responsive in terms of mobile interface, but also by theme too. I’m sure your late night visitors, or those who just prefer a dark themed site, will thank you.

你现在应该有一个网站，不仅是响应在移动界面，而且也按主题。我相信你的深夜访问者，或者那些只是喜欢黑暗主题网站的人，会感谢你的。

码农公寓