如何实现可切换浏览器深色模式偏好的网站按钮？

首先明确：网页没有权限修改浏览器/系统层面的prefers-color-scheme偏好设置。这属于用户的隐私级全局设置，浏览器出于安全和用户控制权的考虑，不会允许网页篡改这类系统级偏好。

不过你可以通过以下方案，让网站按钮和浏览器偏好机制共存且不冲突，同时保留按钮的便捷性：

实现思路 #

优先尊重用户通过网站按钮做出的选择，当用户没有主动选择时，再遵循浏览器的prefers-color-scheme偏好。通过localStorage存储用户的手动选择，结合CSS类和媒体查询实现逻辑。

具体代码实现 #

CSS 样式 #

/* 默认浅色模式变量 */
html {
  --text-color: #1a1a1a;
  --bg-color: #ffffff;
}

/* 深色模式样式：两种触发条件 */
/* 1. 用户手动选择深色模式（通过按钮添加dark-mode类） */
html.dark-mode,
/* 2. 用户未手动选择，且浏览器偏好深色模式 */
@media (prefers-color-scheme: dark) {
  html:not(.light-mode) {
    --text-color: #f0f0f0;
    --bg-color: #121212;
    /* 保留你原有的filter方案也可以 */
    filter: grayscale(0.75) invert(1) contrast(1);
  }
}

/* 应用样式变量到页面元素 */
body {
  color: var(--text-color);
  background-color: var(--bg-color);
  transition: all 0.3s ease;
}

JavaScript 交互逻辑 #

// 获取切换按钮
const darkModeToggle = document.getElementById('dark-mode-toggle');

// 初始化颜色模式：优先读取本地存储，无则遵循浏览器偏好
function initColorMode() {
  const savedMode = localStorage.getItem('site-color-mode');
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

  if (savedMode === 'dark') {
    document.documentElement.classList.add('dark-mode');
  } else if (savedMode === 'light') {
    document.documentElement.classList.add('light-mode');
  } else if (prefersDark) {
    document.documentElement.classList.add('dark-mode');
  }
}

// 切换颜色模式的函数
function toggleColorMode() {
  const htmlEl = document.documentElement;
  let targetMode;

  if (htmlEl.classList.contains('dark-mode')) {
    // 切换为浅色模式
    htmlEl.classList.remove('dark-mode');
    htmlEl.classList.add('light-mode');
    targetMode = 'light';
  } else {
    // 切换为深色模式
    htmlEl.classList.remove('light-mode');
    htmlEl.classList.add('dark-mode');
    targetMode = 'dark';
  }

  // 保存用户选择到本地存储
  localStorage.setItem('site-color-mode', targetMode);
}

// 绑定按钮点击事件并初始化模式
darkModeToggle?.addEventListener('click', toggleColorMode);
initColorMode();

方案优势 #

• 无冲突：用户手动选择的模式会覆盖浏览器的系统偏好，避免两种机制互相干扰
• 持久化：用户的选择会通过localStorage保存，下次访问网站时会直接应用
• 兼容性：不依赖任何外部资源，完全基于原生CSS和JS实现，适配所有支持prefers-color-scheme的现代浏览器

内容的提问来源于stack exchange，提问作者BurninLeo