--
title: "Which Modes Do Codex Themes Support? A Light/Dark Guide"
description: "Which Modes Do Codex Themes Support? A Light/Dark Guide"
tags: ["codex", "themes", "design", "webdev"]
canonical_url: https://codex-skin-studio.shop/en/blog/codex-theme-light-dark-modes/
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.
| Property | Light | Dark |
|---|---|---|
| Background | near white / light gray | near black / deep gray |
| Foreground | dark text | light text |
| Syntax highlight | higher saturation, hue-based contrast | lower saturation to reduce glare |
| Borders | light gray | one shade darker |
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 gallery, where themes are sorted by mode.
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.
FAQ
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.
Text is unreadable in dark mode on my custom theme. You probably only wrote the light variables. Head to the customize guide and fill in the dark set.
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.
Full guide with the color tables: https://codex-skin-studio.shop/en/blog/codex-theme-light-dark-modes/
