网站想加深色模式，有没有省事的做法？的回答

核心思路是把所有颜色写成 CSS 变量，深色模式只重新定义这些变量的值，组件样式本身不用改。

CSS

:root {
  --bg: #ffffff;
  --text: #1f2328;
  --line: #e5e7eb;
}

/* 跟随系统：用户没有手动选择浅色时生效 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17181a;
    --text: #d5d7db;
    --line: #2d2f33;
  }
}

/* 用户手动选择深色 */
:root[data-theme="dark"] {
  --bg: #17181a;
  --text: #d5d7db;
  --line: #2d2f33;
}

body {
  background: var(--bg);
  color: var(--text);
}

几个细节：

手动切换时在 html 元素上设置 data-theme，并把选择存进 localStorage。
读取设置的脚本要放在 head 里同步执行，否则刷新页面时会先闪一下浅色。
加上 color-scheme: light dark，滚动条和表单控件也会跟着变成深色。
深色背景不要用纯黑，正文也不要用纯白，对比度太强看久了累眼睛。
图片、代码高亮、图表的配色要单独检查一遍。