前端

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

Mores小栋博客！

想给博客加一个深色模式，最好能跟随系统设置，也能让用户手动切换。有没有改动比较小的做法？

回答 1阅读 0

1 个回答

  1. Mores小栋博客！

    核心思路是把所有颜色写成 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，滚动条和表单控件也会跟着变成深色。
    • 深色背景不要用纯黑，正文也不要用纯白，对比度太强看久了累眼睛。
    • 图片、代码高亮、图表的配色要单独检查一遍。

0 条回复

A文章作者M管理员
上传评论图片

暂无讨论，说说你的看法吧