这个周末,我想探索如何为我的网站添加深色模式,以方便阅读我博客的2个人。我决定保持简单,使用系统范围内的颜色模式首选项。
我原以为我可能必须使用神秘的CSS和Javascript语法来首先查询系统的深色模式首选项,然后相应地设置颜色,但浏览器供应商使它变得简单得多,很容易使用。****
废话不多说，上代码👇：
这是将深色模式添加到任何网站所需的全部代码(我将在本帖的后面解释一些警告):
<meta name="color-scheme" content="dark light">
就是这样!它不需要自定义CSS,并且在所有现代浏览器中都受支持。还有一个相应的CSS属性:color-scheme,它适用于各个标签。
但是,这里有一个重大警告。如果您在页面的任何位置使用color或background CSS属性设置了自定义颜色,那么这对您无效。它只会反转没有明确设置颜色的元素的颜色。
其他方法
如果您在网页中大量使用自定义颜色,可以在CSS中使用prefers-color-scheme媒体查询来更细致地控制不同模式下网页的外观。
例如:
css
@media (prefers-color-scheme: dark) { body { background-color: black; color: white; }}
希望这有帮助!
