Codex 主题的亮色暗色到底怎么适配？一篇讲透

后台收到最多的提问，不是"哪个颜色好看"，而是"我的主题怎么不会自动跟着系统切换"。今天把 Codex 主题亮色暗色（codex theme light dark mode）这件事从头讲透。

一套主题，为什么非要配两套颜色

白天在亮色界面下看久了眼睛容易累，到了晚上暗色反而更舒服。这不是玄学，是大多数编辑器用户的真实使用节奏。light dark mode 适配，就是让同一套主题在两种环境下都成立，而不是让你每天手动去改设置。

双模式是怎么定义出来的

每个主题文件里其实藏着两份配色表，一份叫 light，一份叫 dark，背景、前景、边框、语法高亮各管各的。

如果你打开自定义主题的设置页，看到两套色板，别嫌麻烦，它们各有各的用途。

跟随系统：prefers-color-scheme 怎么声明

Codex 主题支持三种模式：强制亮色、强制暗色、自动。自动模式依赖 CSS 的 `prefers-color-scheme` 媒体查询，系统亮它就显示亮色，系统暗它就切暗色，不需要你点任何东西。主题文件里的声明大致长这样：

```

@media (prefers-color-scheme: dark) {

:root { /* 暗色变量覆盖 */ }

}

```

一句话总结：只要主题声明了这个查询，你的编辑器就会跟着操作系统的深浅色走。

哪些内置主题默认支持双模式

这一版内置主题里，下面这几款默认就带完整的 light/dark 双套配色：

• Codex 官方默认主题
• 石墨风（Graphite）
• 晚霞（Dusk）
• 纸墨（Ink Paper）
• 森林（Forest）

安装后在设置里把模式切到"自动"，马上就能看到效果。想看更多样式，可以逛逛

自定义主题时，两套配色都要写的真正原因

很多人自定义主题只写了一套颜色，结果切到另一模式后，界面要么发白要么发黑，文字直接看不见。原因不复杂：主题框架会在两种模式之间切换变量，你没定义的那套变量会回落到默认值，对比度当场崩掉。两套都写上，等于给两种环境都准备了合理参数，切换时不会翻车。

切换时怎么避免刺眼过渡

从亮变暗只花一帧，整个屏幕闪一下，眼睛很难受。我常用的做法：

• 别用瞬时切换，让过渡动画控制在 150–300 毫秒
• 暗色背景别用纯黑，带一点蓝灰的深色，能明显缓解眩光
• 两个模式里保持高亮色同一色相，只调明度
• 切换完先看语法高亮，确认没有跟背景撞色的文字

**Codex 主题怎么跟随系统自动切换？**

在主题设置里把模式选成"自动"，主题会读取系统的 prefers-color-scheme，跟着深浅色走。

How do I make my Codex theme follow the system? Pick "auto" in the theme settings and it will listen to prefers-color-scheme.

**我自定义的主题切到暗色后文字看不清，怎么办？**

多半只写了亮色那套变量。去

Text is unreadable in dark mode on my custom theme. You likely only defined the light variables. Head to /guides/customize and fill in the dark set.

**内置主题全都支持双模式吗？**

不是全部，上面列的五款默认支持，其余的在设置里确认一下就行。

Do all built-in themes support both modes? Not all. The five listed above do; check the settings for the rest.

想要更多配色灵感，回到