暗黑模式你的网站：为夜行动者准备的眼睛呵护模式

2023-09-16 10:48:56

屏幕正成为我们工作和生活的重要组成部分。手机、电脑、平板等各种设备，随时随地都在陪伴着我们。为了让眼睛在长时间使用电子设备时依然保持舒适，暗黑模式就派上用场了。顾名思义，暗黑模式就是将原本浅色的背景色调改成深色，从而降低屏幕亮度、减少眼睛疲劳。

网站也是数字世界不可或缺的一部分。为网站添加暗黑模式，不仅可以让我们在昏暗环境下更轻松地浏览内容，还能在黑夜中营造一种惬意的氛围。不仅如此，很多研究表明，暗黑模式还有助于提高专注度，这对于正在奋笔疾书的码农们来说无疑是福音。

好消息是，在现代浏览器中，为网站添加暗黑模式的步骤并不复杂，几行简单的 CSS 代码就能完成这一切。下面，我们就来看看如何使用 CSS 来实现网站的暗黑模式。

一、使用 CSS 媒体查询

媒体查询是一种 CSS 技术，可以根据设备、屏幕尺寸、光线条件等条件来应用不同的样式。在我们的例子中，我们可以使用媒体查询来检测用户是否启用了暗黑模式，然后应用相应的样式。

以下是使用媒体查询来实现网站暗黑模式的示例代码：

/* 当用户启用暗黑模式时，应用以下样式 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
    color: #fff;
  }
  
  /* 其它元素样式 */
}

二、使用 JavaScript

如果你想实现更复杂的暗黑模式，比如允许用户手动切换模式，那么你就可以使用 JavaScript 来完成。

以下是使用 JavaScript 来实现网站暗黑模式的示例代码：

/* 获取 body 元素 */
const body = document.querySelector('body');

/* 添加一个按钮来切换暗黑模式 */
const button = document.createElement('button');
button.textContent = '切换暗黑模式';
button.addEventListener('click', () => {
  // 切换 body 元素的 class，从而切换暗黑模式
  body.classList.toggle('dark-mode');
});

/* 将按钮添加到 body 元素中 */
body.appendChild(button);

/* 在 body 元素上添加 dark-mode class，初始状态为暗黑模式 */
body.classList.add('dark-mode');