跟随系统暗黑模式动态更改已有的颜色

永远只跟随系统、不要被手动切换影响

:deep(.arco-menu) {
      background-color: var(--color-bg);
}

可以通过“改写 CSS 变量本身”的方式实现：default-layout.vue 里继续写 background-color: var(--color-bg); 不动，只在全局样式里让 --color-bg 在 light/dark 时取不同值即可。

body {
  --color-bg: #f6f8fa;
}

body[arco-theme='light'] {
  --color-bg: #f6f8fa;
}

body[arco-theme='dark'] {
  --color-bg: var(--color-bg-2);
}

@media (prefers-color-scheme: dark) {
  body:not([arco-theme]) {
    --color-bg: var(--color-bg-2);
  }
}

如果页面上没有显式设置 arco-theme，就会走 prefers-color-scheme 的媒体查询：系统暗黑 → --color-bg 自动变为暗色（这里用的是 Arco 自带的 --color-bg-2，会随暗黑主题变化）。