✨深色模式下排版的核心逻辑：别和系统 “对着干”
很多人做深色模式排版，总想着怎么让自己的设计 “脱颖而出”。但其实深色模式的核心是 “适配”，不是 “对抗”。系统切换到深色模式时，用户的视觉习惯已经发生了变化 —— 眼睛更适应低亮度、高对比度的环境。这时候如果你的排版还沿用浅色模式那套，比如用亮黄色大标题配纯黑背景，只会让读者觉得刺眼。
对比度是生命线。文字和背景的对比度至少要达到 4.5:1，这是 WCAG accessibility 标准里明确提到的。但在深色模式里，这个标准要更严格些。因为深色背景会放大颜色差异，稍微差点意思就会显得模糊。比如深灰色背景配浅灰色文字，看起来就像蒙了层雾，读者划两下就没耐心了。
还有个容易被忽略的点：深色模式不是 “单色模式”。别以为把背景换成黑色就完事儿了，不同的深色之间也有层次。比如用 #121212 做正文背景，#1E1E1E 做卡片背景，这种细微的差异能让排版更有呼吸感，也能帮读者快速区分内容区块。
🎨文字处理：别让读者 “瞎猜” 内容
标题怎么选色？很多人喜欢用白色，但纯白 (#FFFFFF) 在纯黑背景上会有 “光晕” 效应，看久了眼睛累。试试 #F5F5F5 这种 “近白色”，或者根据品牌色调整 —— 比如品牌主色是蓝色，用 #B3D1FF 这种浅蓝，既保持识别度又不刺眼。
字号和行间距得 “放宽”。深色模式下文字容易显得紧凑，尤其是小字号。正文建议用 16px 起步，比浅色模式大 1-2px。行间距也得加，1.75 倍比 1.5 倍更合适，能减少文字之间的压迫感。
重点内容别靠颜色 “喊”。加粗比变色更有效。比如想强调某个词，用加粗 + 稍微深一点的同色系颜色（比如正文是 #E0E0E0，重点就用 #FFFFFF），比突然跳出来一个红色更舒服。读者在深色模式下对颜色的敏感度会降低，强行用亮色突出反而会分散注意力。
🖼️图片适配：别让图片成 “黑洞”
png 图一定要检查透明区域。很多人用带透明背景的 png 图，在浅色模式下没问题，到了深色模式就会变成 “悬浮块”—— 透明区域直接透出深色背景，和图片主体脱节。简单的解决办法：给 png 图加个浅灰色的 “安全边”，或者在公众号编辑器里手动给图片加个底色，确保在深色模式下图片边缘是清晰的。
jpg 图要注意亮度。深色模式会让图片的暗部更暗，亮部更亮。如果图片本身对比度低，比如风景照里有大片阴影，在深色模式下可能会变成一团黑。可以用修图工具稍微提高阴影部分的亮度，让细节能看清楚。但别调太狠，不然会显得图片 “发灰”。
尽量用 “双版本” 图片。重要的头图、封面图，最好准备浅色和深色两个版本。在公众号编辑器里用代码控制 —— 当系统检测到深色模式时，自动切换到深色版本图片。不会代码也没关系，现在很多排版工具（比如 135 编辑器、壹伴）都有 “深色模式图片适配” 功能，直接勾选就行。
📐元素设计：让每个模块 “懂事”
分割线别用 “硬线条”。浅色模式里常用的 1px 灰色分割线，到了深色模式就会变成 “白线”，特别突兀。换成虚线、点线，或者用 “色块渐变” 当分割线 —— 比如从 #333333 渐变到 #111111，既起到分隔作用，又不破坏整体的深色氛围。
卡片组件要 “轻量级”。深色模式里的卡片别用太厚的阴影，不然会像 “浮在屏幕上的黑块”。试试用细边框（#333333）代替阴影，或者卡片背景比整体背景浅一点点（比如整体是 #121212，卡片用 #1A1A1A），靠这种细微差异来突出卡片，而不是靠阴影 “堆” 效果。
按钮要 “有温度”。深色模式下的按钮别用纯红色、纯绿色这种高饱和色。换成低饱和的版本，比如红色按钮用 #D32F2F，绿色用 #388E3C。同时按钮上的文字一定要亮，白色或近白色，确保一眼就能看出 “这是个能点的按钮”。
⚠️特殊场景：别让这些细节 “翻车”
代码块和引用框要单独处理。很多技术类公众号喜欢用代码块，默认的黑色代码块在深色模式下会和背景 “融为一体”。给代码块加个 #2D2D2D 的背景，文字用 #C5C8C6 这种浅灰绿色，既符合程序员的阅读习惯，又不会在深色模式下 “隐身”。引用框同理，用 #2C3E50 这种深蓝色调，比默认的灰色更显层次。
表情符号别 “扎堆”。深色模式下，黄色的 emoji（比如😂👍）会特别显眼。如果一段话里堆了好几个，会像 “撒了一把小黄点”，看着乱。尽量用单色或低饱和的 emoji，或者减少使用频率，让表情真正起到 “调味” 的作用，而不是 “抢戏”。
留言区也要顾到。很多人只关注正文排版，忽略了留言区。其实读者看完文章会翻留言，留言区的头像、昵称、文字在深色模式下的显示效果也很重要。如果公众号有自定义留言区样式，记得把文字颜色调成适应深色背景的，别让读者在留言区还要 “眯着眼看”。
🔍测试和优化：别凭感觉 “猜” 效果
多设备测试是必须的。iOS 和 Android 的深色模式逻辑不一样，比如 iOS 的 “深色” 更偏冷调，Android 的更偏暖调。同样的排版，在 iPhone 上看着舒服，在华为手机上可能就有点别扭。最好找几部不同品牌、不同系统版本的手机，逐个检查排版效果。
利用 “强制切换” 功能。在公众号编辑器里写完后，别直接群发。用手机预览时，手动切换深色 / 浅色模式，看看文字会不会 “跳色”，图片会不会 “变形”。有些编辑器自带 “深色模式预览” 按钮，一定要用起来，别等读者反馈了才发现问题。
关注用户反馈。如果有读者留言说 “深色模式下看不清”，别不当回事。把他们的手机型号、系统版本记下来，针对性地调整排版。有时候一个小改动 —— 比如把某个颜色的明度提高 5%，就能解决大问题。
其实深色模式排版的核心就一句话：站在读者的角度，让眼睛 “舒服”。别为了追求 “酷炫” 而忽略了阅读的本质。毕竟读者打开公众号是来看内容的，好的排版应该像 “隐形的助手”，让他们不知不觉就读完了整篇文章，而不是被排版 “劝退”。
【该文章由diwuai.com
第五 ai 创作，第五 AI - 高质量公众号、头条号等自媒体文章创作平台 | 降 AI 味 + AI 检测 + 全网热搜爆文库🔗立即免费注册 开始体验工具箱 - 朱雀 AI 味降低到 0%- 降 AI 去 AI 味】
