适合深色模式的HTML code标签样式调整方法-html教程-PHP中文网

深色模式下 code 标签文字发灰的根本原因是继承的低对比度 color 值未被重置；需显式设置高对比度 color、清除 background-color、统一 pre/code 样式职责，并使用深色优化字体与行高。

适合深色模式的html code标签样式调整方法

code 标签在深色模式下文字发灰看不清

根本原因是默认 code 标签继承的 color 值（比如 #666）在深色背景上对比度不足。CSS 变量方案里常漏掉它——很多人只改了 --text-primary，却没覆盖 code、pre、kbd 这类语义化内联元素。

必须显式重置：code 不该依赖继承，而应直接设高对比度值：

html[data-theme="dark"] code {
  color: #c7d0ff; /* 比浅色模式下的 #333 更亮但不过曝 */
  background-color: #2a2e3b;
  padding: 0.1em 0.3em;
  border-radius: 4px;
}

别用 !important，靠选择器权重就够了（html[data-theme="dark"] code 已足够）
避免用纯白 #fff：OLED 屏幕上易刺眼，且与深色背景反差过大导致视觉疲劳
如果用了 CodeMirror 或 Prism 等语法高亮库，它们内部的 code 是封装在 .token 类里的，此处样式不生效——得单独处理库的 token 类

pre > code 嵌套结构背景色错位

常见写法是 <pre class="brush:php;toolbar:false;"><code>...</code></pre>，但深色模式下只给 pre 设了背景，code 自己又带一层背景或透明边框，结果出现双层阴影、内边距错乱、行号对不齐。

统一收口到 pre 上，让 code 退为纯内容容器：

html[data-theme="dark"] pre {
  background-color: #1e293b;
  padding: 1rem;
  border-radius: 8px;
  overflow-x: auto;
}
html[data-theme="dark"] pre code {
  background: none;
  color: inherit;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  line-height: 1.5;
}

pre 负责容器样式（圆角、内边距、滚动），code 只管字体和颜色
务必删掉 code 的 background-color，否则和 pre 背景叠加出灰蒙蒙的“脏感”
如果用了 tab-size 或 white-space 控制缩进，这些属性必须写在 pre 上，code 里设无效

内联 code 标签和代码块混用时样式断裂

一个页面里既有 <p>调用 <code>fetch() 方法

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

这种内联，又有 <pre class="brush:php;toolbar:false;"><code>...</code></pre> 块级代码，两者在深色模式下颜色/背景/圆角不一致，显得割裂。

解决方案是分层定义，用不同选择器隔离语义：

/* 内联代码 */
html[data-theme="dark"] code:not(pre > code) {
  color: #a6b2cc;
  background-color: #2d3748;
  padding: 0.15em 0.3em;
  border-radius: 4px;
}
<p>/<em> 代码块内的 code </em>/
html[data-theme="dark"] pre > code {
color: #e2e8f0;
background: none;
padding: 0;
border-radius: 0;
}</p>

code:not(pre > code) 精准排除嵌套场景，避免样式污染
内联 code 保留轻微背景和圆角，增强可读性；块级 code 完全交由 pre 控制
两者的 color 值要错开：内联稍暗（#a6b2cc），块级更亮（#e2e8f0），形成视觉层级

font-family 和 line-height 在深色模式下失真

很多项目只换颜色，却沿用浅色模式的字体栈，比如 font-family: -apple-system, BlinkMacSystemFont, sans-serif。在深色背景下，无衬线字体易发虚，尤其小字号时字符边缘模糊。

深色模式需专用字体微调：

html[data-theme="dark"] code,
html[data-theme="dark"] pre {
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Consolas, monospace;
  line-height: 1.6; /* 浅色模式常用 1.4–1.5，深色需略高防粘连 */
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}