← 全部文章

教程

用棕褐色和奶油色背景让阅读更轻松

17 5月 2026 · 作者 JustZix Team

明亮的白色背景在搜索结果里没问题,但在长时间阅读中很折磨人。温暖的纸张色调减少眩光、平息对比度,让你能读一个小时而不眯眼。下面是用 JustZix 把它应用到任何网站的方法。

为什么不直接用深色?

深色模式在昏暗的房间里有帮助,但对于长篇阅读,许多人发现反转的文本更难、而非更容易——黑底上的浅色文字会闪烁模糊,这种效应称为光晕。温暖的浅色表面让文本保持清晰,同时去掉纯白的刺眼边缘。把它想成平装书的纸,而不是办公室的纸。

经典棕褐色配方

棕褐色把温暖的米色背景与深棕色文本颜色配对。把它应用到页面外壳和文章上:

html, body,
article, main, .post {
  background-color: #f4ecd8 !important;
  color: #4a3b28 !important;
}
article a { color: #8a5a2b !important; }
article a:hover { color: #6b3f17 !important; }

米色上的棕色组合让对比度舒适地保持在无障碍底线之上,同时仍然柔和。

更浅的奶油色

如果棕褐色感觉太重,奶油色更接近白色但消除了眩光。它在正常的日间光线下效果很好:

html, body, article, main {
  background-color: #faf6ec !important;
  color: #33302a !important;
}

别忘了下面的表面

许多网站用卡片、代码块和引用块叠加它们自己的背景。如果你只给 body 重新上色,那些面板仍会发白。把它们也扫一遍:

article pre,
article blockquote,
.card, .panel, figure {
  background-color: #efe7d2 !important;
  color: #4a3b28 !important;
  border-color: #d8cba8 !important;
}
input, textarea {
  background-color: #fbf8ef !important;
  color: #33302a !important;
}

用滤镜柔化图片

满饱和度的照片可能与温暖的页面相冲突。一个温和的滤镜把它们融入调色板,又不隐藏细节:

article img {
  filter: sepia(0.12) brightness(0.97) !important;
}

把棕褐色值保持低——大约 0.1 到 0.2——这样照片保持自然,而截图和图表融入其中。

随时间变化的色调

对于夜间阅读,你可以用一个更暖的块把表面再调暗一点。建立第二条 JustZix 规则,日落后切换它:

html, body, article, main {
  background-color: #e8ddc2 !important;
  color: #3a2f1f !important;
}

把它做成一条规则

新建一条 JustZix 规则,把它的 URL 模式指向你最常读的出版物,把背景、表面和图片块粘贴进 CSS 面板,然后保存。现在网站用纸张而非灯泡迎接你。把切换开关放在手边,这样你就能在日间奶油色和夜间棕褐色之间翻转。

温暖的背景与受约束的栏宽和宽裕的行高搭配得很美。参见关于把栏宽调对的配套文章,浏览我们的现成示例获取完整阅读主题,并下载 JustZix 让你的眼睛休息一下。