使用<meta color-scheme>标签后明暗模式渲染异常，默认亮色模式不生效

1. 调整CSS变量逻辑（强制默认亮色） #

把亮色模式的变量直接设为:root的默认值，暗色模式通过添加.dark类来覆盖——这样不管系统的配色设置是什么，页面加载时都会默认显示亮色：

/* 默认亮色模式（优先级最高） */
:root {
  --main-color: rgb(253, 248, 247);
  --text-color: rgb(0, 0, 0);
}

/* 手动切换后的暗色模式 */
:root.dark {
  --main-color: rgb(0, 0, 0);
  --text-color: rgb(253, 248, 247);
}

如果想保留「用户未手动切换时跟随系统设置」的可选逻辑，可以补充这段媒体查询（但默认仍为亮色）：

/* 仅当用户没手动设置过主题时，才跟随系统暗色 */
@media screen and (prefers-color-scheme: dark) {
  :root:not(.dark) {
    --main-color: rgb(0, 0, 0);
    --text-color: rgb(253, 248, 247);
  }
}

2. 添加切换按钮与JS交互 #

在HTML中加入切换按钮：

<button id="theme-toggle">切换暗色模式</button>

用JS处理切换逻辑，同时把用户的选择存在localStorage里，下次打开页面时自动应用：

const themeToggle = document.getElementById('theme-toggle');
const root = document.documentElement;

// 初始化主题：优先读取用户保存的设置，无保存则默认亮色
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
  root.classList.add('dark');
}

// 按钮点击事件：切换主题并保存设置
themeToggle.addEventListener('click', () => {
  root.classList.toggle('dark');
  const currentTheme = root.classList.contains('dark') ? 'dark' : 'light';
  localStorage.setItem('theme', currentTheme);
});

3. 关于meta标签 #

你之前添加的<meta name="color-scheme" content="light dark">可以保留，它的作用是告诉浏览器页面支持两种配色方案，不会影响默认亮色的设置，核心逻辑还是靠CSS和JS控制。

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