深色模式下 code 标签文字发灰的根本原因是继承的低对比度 color 值未被重置；需显式设置高对比度 color、清除 background-color、统一 pre/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><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() 方法</p> 这种内联，又有 <pre><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;
}-
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;
}- 优先用专为编程设计的等宽字体（如 JetBrains Mono），它们在深色背景上 hinting 更优
-
line-height加高一点，避免深色背景放大字符间距压缩感 - 禁用
antialiased（尤其 macOS），它会让字体边缘发虚；subpixel-antialiased或auto更稳
最易被忽略的是：所有这些样式必须写在 html[data-theme="dark"] 下，不能只靠 @media (prefers-color-scheme: dark)。否则用户手动切换主题时，code 样式不会响应变化。
