Anyone can drop an image behind Codex. Designing a custom codex theme you can actually work in all day is the real skill — and it's the difference between a screenshot that gets likes and a workspace that doesn't wreck your eyes by hour three. This guide is the method: how to pick and crop the image, hit a readable contrast target, pull the right accent color, and tune diff colors so error lines don't fight your palette. Everything here you can do live in the generator with instant Home/Task/Diff preview.
Codex's workspace is landscape, and your code lives in a center-left column. So the busy part of your image belongs on the right third and the banner — never directly behind the code. Get this one thing right and 80% of readability problems disappear. Our generator enforces it by pushing your image toward the banner/right edge and laying a tunable scrim over the reading area.
Works well: wide (landscape) images ≥ 2000px across, with a clear focal point and calm negative space on one side. Moderate contrast. A consistent palette.
Avoid: busy edge-to-edge patterns, tightly-cropped faces, screenshots-of-screenshots, or composite gallery previews that already contain UI artwork (those are not wallpapers — they'll double up interface elements).
File specifics (Mac picker): PNG, JPEG, HEIC, TIFF, WebP. Source up to 50 MB; prepared file capped ~16 MB. Wide ≥ 2000px recommended.
Aim for body text to sit near the WCAG-readable ~4.5:1 contrast ratio against whatever is behind it. You don't need a meter — you need to (a) place busy art away from text, and (b) use background dim + panel opacity to calm the reading surface. Watch the live Diff preview specifically: low-contrast diff lines are the first thing to break, and the easiest to miss.
A theme reads "designed" when the UI accent is pulled from the image, not picked at random — a character's hair color, a sunset's dominant hue. Cool tones (teal, blue, violet) sit best on dark surfaces; warm pastels sit best on light surfaces. The generator auto-suggests an accent via palette extraction; override it if a secondary color reads better.
Custom palettes frequently clash with the default green/red diff highlights. Set:
Wide, ≥ 2000px, with negative space on one side.
Busy art behind the text and no dim. Move the focal point right, raise dim/panel opacity, re-check the Diff preview.
Pull it from the image (hair/sky/focal object); cool on dark, warm on light.
Yes — the generator shows Home, Task and Diff live before you export.