Which Modes Do Codex Themes Support? A Light/Dark Guide

The question I get most in the theme store inbox is not "which colors look nice." It's "why doesn't my theme follow my system automatically?" Let me walk you through how codex theme light dark mode actually works, from the two color tables to the switch animation.

Why one theme needs two color schemes

In the morning I want a bright workspace. At night, the same screen feels like it's screaming at me. That's not a preference thing, it's a rhythm most editor users share. A Codex theme with proper light dark mode support gives you two working setups, so you never have to dig into settings just to change the lighting.

How a dual-mode theme is put together

Inside every theme file there are two color tables hiding. One is called light, the other dark. They handle background, foreground, borders and syntax highlight independently.

If you open the customizer and see two palettes, don't be annoyed. They each earn their keep.

Following the system: prefers-color-scheme

Codex themes ship with three modes: force light, force dark, and auto. Auto relies on the CSS `prefers-color-scheme` media query. When your OS is light, the theme stays light; flip the OS to dark and the theme follows. No clicks needed.

```

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

:root { /* dark variable overrides */ }

}

```

That's the whole trick. If the theme declares this query, your editor follows the system scheme.

Which built-in themes support both modes by default

Five built-ins ship with a complete light/dark pair out of the box:

• Codex default theme
• Graphite
• Dusk
• Ink Paper
• Forest

Pick "auto" in the settings and you can see the effect immediately. For more styles, browse

The real reason to write both palettes when you customize

People often define one palette and call it done. Then they flip to the other mode and the interface turns into a whiteout or a black hole. The theme framework swaps variables between the two schemes, and anything you left undefined falls back to the default. That's when contrast falls apart. Writing both palettes is just giving both environments sane parameters so the switch never breaks.

Avoiding the harsh flash on switch

Going from light to dark in one frame makes the whole screen blink. It stings. What works for me:

• Skip instant switching. Let the transition run 150 to 300 milliseconds.
• Avoid pure black in dark mode. A deep blue-gray is much easier on the eyes.
• Keep the same hue for highlight colors in both modes, only adjust lightness.
• Check syntax highlights right after switching. Make sure no text collides with the background.

How do I make my Codex theme follow the system?

Pick "auto" in the theme settings. The theme reads prefers-color-scheme and follows the OS. 我的 Codex 主题怎么跟随系统？在设置里选"自动"即可。

Text is unreadable in dark mode on my custom theme.

You probably only wrote the light variables. Head to

Do all built-in themes support both modes?

Not all of them. The five listed above do, and the rest can be checked in the settings. 内置主题都支持双模式吗？不是全部，上面列的五款默认支持。

If you want more color inspiration, head back to the