我如何将暗模式添加到我的网站

分步说明制作网站的2个版本,使其适合白天和晚上使用

Dark mode

更新:我现在使用媒体查询级别5:prefers-color-scheme

Media Queries Level 5规格包含一个新的prefers-color-scheme媒体功能。

目前所有主要浏览器都支持此功能。自76版以来的Chrome / Edge,自67版以来的Firefox和Safari(自版本12.1起)。即使是iOS Safari,

我们可以使用它来判断用户是在暗还是亮模式下浏览页面:

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}
@media (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}

现在,我默认使用它来显示站点的浅色版本,如果系统处于黑暗模式,则使用深色版本。

如果系统没有内置暗模式(旧的Windows / macOS,Linux),那么我的建议是使用扩展名,例如夜眼或类似。

我之前如何实现暗模式prefers-color-scheme可用

我最近重新设计了我的网站。这是2张图片,以供参考:

Old homepage

Old post page

我差不多是在1年前设计这个网站的,并且在此过程中进行了许多更改,就像我们对任何网站所做的一样。

最终我长大了这个设计:标题太大了,失去了太多的空间而不是直接显示内容,等等。

我昨天晚上坐下来,开始重新设计网站,今天早上完成了重新设计:

New homepage

New post page

好多了!最重要的是内容更加突出。

我使用了等宽字体(Inconsolata),因为作为编程博客,它是一个不错的博客,尽管由于字体使用而导致可读性降低和页面大小增加,因为我该字体在我的网站上。我更喜欢它,并且由于我的网站是我日常活动的重要组成部分,因此我希望它能像我想要的那样。

我只是错过了一件事:暗模式。在重新设计的过程中,我想到了暗模式选项。

我是怎么做的?首先,我在侧边栏中添加了Moon Emoji Moon,以使人们将模式从浅色更改为深色。

然后,我添加了一个在单击时运行的JavaScript代码段。我刚刚将其添加到onclick在HTML中内联事件处理程序,而无需花哨:

<p>
  <a href="#" onclick="localStorage.setItem('mode', (localStorage.getItem('mode') || 'dark') === 'dark' ? 'light' : 'dark'); localStorage.getItem('mode') === 'dark' ? document.querySelector('body').classList.add('dark') : document.querySelector('body').classList.remove('dark')" title="Dark/light
</p>

这是在onclick中运行的JavaScript:

localStorage.setItem('mode', (localStorage.getItem('mode') || 'dark') === 'dark' ? 'light' : 'dark'); localStorage.getItem('mode') === 'dark' ? document.querySelector('body').classList.add('dark') : document.querySelector('body').classList.remove('dark')

这有点令人费解,但基本上我会检查mode物业本地存储为“暗”(如果尚未设置,则默认为暗,使用||运算符),然后在本地存储设备中设置与之相反的值。

然后我分配dark上课bodyHTML元素,因此我们可以使用CSS在黑暗模式下为页面设置样式。

DOM加载后,另一个脚本立即运行,并检查模式是否为暗。如果是这样,它将添加dark上课bodyHTML元素:

document.addEventListener('DOMContentLoaded', (event) => {
  ((localStorage.getItem('mode') || 'dark') === 'dark') ? document.querySelector('body').classList.add('dark') : document.querySelector('body').classList.remove('dark')
})

现在,如果人们更改模式,那么下次加载页面时,他们的选择就会被记住。

然后我在CSS中添加了很多CSS指令,所有指令都以body.dark。像这些:

body.dark {
  background-color: rgb(30,34,39);
  color: #fff;
}
body.dark code[class*=language-],
body.dark table tbody>tr:nth-child(odd)>td,
body.dark table tbody>tr:nth-child(odd)>th {
  background: #282c34
}

现在事情应该已经正常了!这是我的网站处于黑暗模式:

Dark homepage

Dark post page

我添加了dark上课body元素默认情况下,使黑暗模式成为默认设置

<body class="dark">
  ...
</body>

为什么?首先,我更喜欢它。然后,我在Twitter上进行了一项民意调查,人们更喜欢它。

Poll

但这也是出于技术原因,实际上是一个非常简单的原因。我不会在服务器端存储用户选择的内容,因此在本地存储可用之前,我无法知道模式。

如果该站点是在服务器端生成的,那么我可以这样做,但是它是一个静态站点,因此我总是向请求它的每个人提供相同的页面。即使我有一个cookie,也没有地方可以处理它(另一方面,这意味着我的页面加载速度更快)。

因此,当某人导航到我网站上的另一个页面,或在第二次访问中首次加载该页面时,我不想在确定模式时显示明亮的页面。也许访客在半夜里在暗室里编码。

我宁愿在浅色模式下执行此操作:显示深色页面几毫秒,然后再次将其变白。


更多实验教程: