Skip to content
All posts
Tutorial2026/07/17

How to Create a Custom Codex Theme

Design a coherent Codex palette for surfaces, ink, accent, semantic colors, fonts, and code highlighting without sacrificing readability.

Five coordinated color fields arranged as a theme system

Quick answer

Start from a built-in light or dark appearance, then define one role at a time: surface, foreground ink, accent, contrast, code theme, UI font, code font, and semantic colors. Preview every state before sharing.

Codex App officially documents controls for base theme, accent, background, foreground, UI font, code font, and sharing. This workflow was reviewed on build 26.707.72221 for macOS.

Build a role-based palette

Do not begin with five attractive colors and assign them randomly. Begin with roles.

  • Surface is the main canvas.
  • Ink is the primary foreground.
  • Accent identifies actions and selected states.
  • Diff added and diff removed need distinct semantic meaning.
  • Skill should be recognizable without competing with the main accent.

Use a second, nearby surface for panels in your visual studies, but remember the native share payload stores the main surface and derives many interface states from contrast.

Test before exporting

Check long paragraphs, tiny metadata, disabled controls, keyboard focus, code blocks, inline code, additions, deletions, and selected rows. Test both a busy task and an empty home view. A palette that looks elegant in a five-color strip can still fail when muted text sits on a derived panel color.

Record the theme name, supported variant, Codex build, platform, creation date, source, and license. Keep a known-good built-in theme available as the restore path.

When the theme is stable, export through Codex rather than reconstructing an undocumented format by hand. Before publishing, read how to share a theme safely, the security policy, and the license notes.