如何使用 CSS 让整个网站支持深色模式

不裁_caiii
514 阅读3分钟

使用 CSS 变量

要实现深色模式，我们需要为每个颜色值设置两种不同的配色方案：一种是正常模式下的颜色，另一种是深色模式下的颜色。在 CSS3 中，我们可以使用 CSS 变量来定义颜色值，从而实现快速切换样式。

下面是一个示例代码，展示了如何使用 CSS 变量实现深色模式：

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --text-color: #333;
  --background-color: #fff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #fff;
    --background-color: #222;
  }
}

body {
  color: var(--text-color);
  background-color: var(--background-color);
}

.btn-primary {
  color: #fff;
  background-color: var(--primary-color);
}

.btn-secondary {
  color: #fff;
  background-color: var(--secondary-color);
}

在上面的代码中，我们首先在 :root 伪类下定义了四个 CSS 变量，分别表示主要颜色、次要颜色、文本颜色和背景颜色。然后，我们使用 @media 查询来检测用户的主题首选项，并根据结果修改 CSS 变量的值。

在页面中，我们可以通过调用这些 CSS 变量来设置相应的样式。例如，我们使用了 var(--text-color) 来设置文本颜色，同时在 .btn-primary 和 .btn-secondary 类中使用了 var(--primary-color) 和 var(--secondary-color) 来设置按钮颜色。

使用 mix-blend-mode 属性

除了使用 CSS 变量以外，我们还可以使用 mix-blend-mode 属性来实现深色模式。该属性可以控制元素与其父元素的混合方式，从而实现颜色的混合效果。

下面是一个示例代码，展示了如何使用 mix-blend-mode 实现深色模式：

body {
  color: #333;
  background-color: #fff;
}

@media (prefers-color-scheme: dark) {
  body {
    color: #fff;
    background-color: #222;
    mix-blend-mode: difference;
  }
}

在上面的代码中，我们首先为正常模式下的网站设置了文本颜色和背景颜色。然后，我们使用 @media 查询来检测用户的主题首选项，并根据结果修改颜色和 mix-blend-mode 属性的值。

需要注意的是，mix-blend-mode 属性只适用于部分元素，例如背景色为纯色的元素。如果需要对整个页面进行样式控制，那么就需要使用其他方法。

拓展功能：自动切换主题

除了实现深色模式以外，我们还可以拓展一些功能来提高用户体验。其中，自动切换主题是一个非常有用的功能。它可以根据用户的首选项或系统设置自动为网站选择合适的主题。

下面是一个示例代码，展示了如何使用 JavaScript 和 CSS 变量来实现自动切换主题：

<!DOCTYPE html>
<html>
  <head>
    <style>
      :root {
        --primary-color: #007bff;
        --secondary-color: #6c757d;
        --text-color: #333;
        --background-color: #fff;
      }

      @media (prefers-color-scheme: dark) {        
          :root {
          --text-color: #fff;
          --background-color: #222;
        }
      }

      body {
        color: var(--text-color);
        background-color: var(--background-color);
      }

      .btn-primary {
        color: #fff;
        background-color: var(--primary-color);
      }

      .btn-secondary {
        color: #fff;
        background-color: var(--secondary-color);
      }
    </style>
  </head>
  <body>
    <button id="theme-toggle">Toggle theme</button>

    <script>
      const toggleButton = document.getElementById('theme-toggle');

      function setTheme(theme) {
        const root = document.documentElement;

        if (theme === 'dark') {
          root.style.setProperty('--text-color', '#fff');
          root.style.setProperty('--background-color', '#222');
        } else {
          root.style.setProperty('--text-color', '#333');
          root.style.setProperty('--background-color', '#fff');
        }
      }

      function toggleTheme() {
        const currentTheme = window.localStorage.getItem('theme');

        if (currentTheme === 'dark') {
          setTheme('light');
          window.localStorage.setItem('theme', 'light');
        } else {
          setTheme('dark');
          window.localStorage.setItem('theme', 'dark');
        }
      }

      toggleButton.addEventListener('click', toggleTheme);

      // 根据用户首选项设置主题
      const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

      if (prefersDarkMode) {
        setTheme('dark');
        window.localStorage.setItem('theme', 'dark');
      } else {
        setTheme('light');
        window.localStorage.setItem('theme', 'light');
      }
    </script>
  </body>
</html>

在上面的代码中，我们首先添加了一个按钮，用于切换主题。然后，我们定义了两个 JavaScript 函数：setTheme() 和 toggleTheme()。其中，setTheme() 用于设置主题，而 toggleTheme() 用于切换主题。

在 setTheme() 函数中，我们使用 document.documentElement.style.setProperty() 方法来修改 CSS 变量的值。根据传入的参数，我们可以快速切换主题。

在 toggleTheme() 函数中，我们通过读取本地存储来获取当前主题，并根据结果切换主题。同时，我们还将新的主题保存到本地存储中，以便下一次加载页面时自动应用主题。

最后，在页面加载时，我们使用 window.matchMedia() 方法来检测用户的首选项，并根据结果设置主题。如果用户没有设置首选项，则默认使用亮色主题。

结语

本文介绍了如何使用 CSS 变量和 mix-blend-mode 属性实现整个网站的深色模式，以及如何使用 JavaScript 实现自动切换主题。同时，我们还探索了一些拓展功能，例如根据用户首选项或系统设置选择合适的主题。通过这些方法，我们可以为用户提供更加舒适和个性化的网站体验。

avatar
文章
阅读
粉丝