首页 非 监听并跟随系统来切换暗黑模式

监听并跟随系统来切换暗黑模式

如果项目有做暗黑模式的 CSS 样式，并且需求只是让其跟随系统模式进行自动切换的话，那么以下方法可以非常简单的将需求完成。

<script>
    const element = document.documentElement;
    const darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
    // 定义跟随系统
    function onWindowMatch() {
      if (localStorage.theme === 'dark' || (!('theme' in localStorage) && darkQuery.matches)) {
        element.classList.add('dark');
      } else {
        element.classList.remove('dark');
      }
    }
    onWindowMatch();
    // 监听系统模式
    darkQuery.addEventListener('change', (e) => {
      if (!('theme' in localStorage)) {
        if (e.matches) {
          element.classList.add('dark');
        } else {
          element.classList.remove('dark');
        }
      }
    });
  </script>

此方法只会监听系统模式，然后与浏览器本地存储空间的值进行对比判断，从而决定是否在 html 标签上添加 dark 这个 class 类。

如果想提供按钮来供用户自行切换的话，可以在 onWindowMatch() 函数后添加相应的逻辑，可参考：

// 选择跟随系统
const osToggle = document.querySelector('.os-toggle');
osToggle.addEventListener('click', () => {
    localStorage.removeItem('theme');
    // 使用函数
    onWindowMatch();
});

// 选择暗夜模式
const darkToggle = document.querySelector('.dark-toggle');
darkToggle.addEventListener('click', () => {
    element.classList.add('dark');
    localStorage.theme = 'dark';
});

// 选择明亮模式
const lightToggle = document.querySelector('.light-toggle');
lightToggle.addEventListener('click', () => {
    element.classList.remove('dark');
    localStorage.theme = 'light';
});

至于按钮的布局以及暗黑模式的 CSS 样式，根据自己使用的页面布局自行调整即可。关于暗黑模式的 CSS 样式，建议可以研究一下 Tailwind CSS，这种原子化的 CSS 样式，熟悉后真的可以事半功倍。