JS主题切换时#navbar字体颜色不生效，求排查问题原因

问题概述 #

希望在页面切换到暗黑模式时修改id为navbar的元素下字体颜色，浅色模式恢复原色。已通过JavaScript实现主题切换，将data-theme属性设置在<html>标签上，且页面背景样式生效，但针对Navbar的暗黑模式样式未生效。

现有代码 #

JavaScript主题切换代码：

const onClick = () => {
  theme.value = theme.value === 'light'
    ? 'dark'
    : 'light'

  setPreference()
}

const getColorPreference = () => {
  if (localStorage.getItem(storageKey))
    return localStorage.getItem(storageKey)
  else
    return window.matchMedia('(prefers-color-scheme: dark)').matches
      ? 'dark'
      : 'light'
}

const setPreference = () => {
  localStorage.setItem(storageKey, theme.value)
  reflectPreference()
}

const reflectPreference = () => {
  document.firstElementChild
    .setAttribute('data-theme', theme.value)

  document
    .querySelector('#theme-toggle')
    ?.setAttribute('aria-label', theme.value)
}

const theme = {
  value: getColorPreference()
}

页面背景CSS：

html {
    background: linear-gradient(135deg, #a1c4fd 10%, #c2e9fb 90%);
    block-size: 100%;
    color-scheme: light;
    background-attachment: fixed;
}

html[data-theme=dark] {
    background: linear-gradient(135deg, #061c43 10%, #08101f 90%);
    color-scheme: dark;
    background-attachment: fixed;
}

未生效的Navbar暗黑模式CSS：

#navbar ul li[data-theme=dark]  {
    padding: 10px;
    border-radius: 25px;
    float: right;
    margin-left: 3px;
    margin-right: 8px;
    font-weight: 500;
    color: white;
    box-shadow: -5px -5px 8px #ffffff60,5px 5px 10px #00000060;
}

问题原因 #

1. CSS选择器逻辑错误：#navbar ul li[data-theme=dark]是在寻找自身带有data-theme="dark"属性的<li>元素，但实际上通过JavaScript设置的data-theme属性是挂载在根节点<html>上的，导致选择器匹配不到目标元素。
2. 初始化缺失主题应用：当前代码仅初始化了theme.value，但没有主动调用reflectPreference()，页面加载时不会根据保存的偏好或系统主题自动设置data-theme属性。

解决方案 #

1. 修正Navbar的CSS选择器 #

将选择器改为基于<html>标签的data-theme属性来定位Navbar元素：

/* 暗黑模式下的Navbar样式 */
html[data-theme=dark] #navbar ul li {
    padding: 10px;
    border-radius: 25px;
    float: right;
    margin-left: 3px;
    margin-right: 8px;
    font-weight: 500;
    color: white;
    box-shadow: -5px -5px 8px #ffffff60,5px 5px 10px #00000060;
}

/* 可选：浅色模式下的样式恢复（如果需要覆盖默认样式） */
html[data-theme=light] #navbar ul li {
    color: #333; /* 恢复默认深色文字 */
    box-shadow: none; /* 移除暗黑模式下的阴影 */
}

2. 补充页面初始化的主题应用 #

在JavaScript代码末尾添加reflectPreference()调用，确保页面加载时自动应用正确的主题：

// 初始化时应用主题偏好
reflectPreference()

3. 处理样式优先级问题（可选） #

如果修改选择器后样式仍不生效，可能是原有<li>元素的样式优先级更高。可以通过增加选择器特异性解决（避免使用!important）：

html[data-theme=dark] body #navbar ul li {
    color: white;
    /* 其他样式 */
}

内容的提问来源于stack exchange，提问作者Răzvan Bocîrnea