Back to Blog

DIY: Build Your First Theme in Ten Minutes

2026-07-28

Every theme is driven by a theme.json: background, panel, accent, secondary, and text colors, plus wallpaper focus geometry.

Setup: copy any built-in theme folder and give it a new id (e.g. preset-my-style). The colors block — bg/panel/accent/secondary/text — is the skeleton of the whole look.

Wallpaper: drop a 16:9 jpg into the folder, point the image field at it, and set art.focusX to around 0.7 to keep the left clear for the sidebar.

Validate: import it via the tray’s "Import Theme ZIP..." or run the bundled CSS safety validator to ensure nothing illegal slipped in.

Tips: keep enough contrast between text and panel in dark themes; right-side focus usually looks best because the Codex sidebar sits on the left.