How to Create Your Own Codex Skin

1. Choose an image that leaves room for the interface

The easiest image to theme is not always the most dramatic one. Codex places navigation on the left, primary task content near the center, and the composer toward the bottom. Look for broad shapes and a clear area of negative space instead of fine detail everywhere. Landscapes, abstract gradients, soft studio textures, and restrained illustrations usually survive panel overlays better than collages or screenshots full of text.

Use a source you created, licensed, or have permission to reuse. A personal photo is fine for a private theme, but public downloads and marketing screenshots have different rights considerations. Avoid packaging celebrity portraits, copyrighted characters, brand logos, or artwork taken from social media without permission. The best Codex skins list uses original color directions for exactly this reason.

2. Build a readability system, not a single opacity value

A dark overlay, or veil, creates a stable text layer between the image and the interface. Start around 55–65% for a bright photo and 35–50% for an already dark image. Then adjust the text color. Pure white can feel harsh on a dark photograph, while a slightly warm off-white often reads more naturally. The goal is consistent contrast across both empty and detailed areas of the image.

Blur helps when an image contains small edges that shimmer behind text. Use it lightly. Too much blur turns a meaningful photo into an indistinct color cloud, while too little leaves visual noise under code and buttons. A range of 2–6 pixels is a useful first test, but judge the rendered interface rather than the number itself.

• Keep the image’s brightest point away from the composer and primary copy.
• Check muted labels, not only large white headings.
• Make focus rings visible against both the artwork and the veil.
• Avoid color combinations that hide success, warning, or error states.

3. Preview the skin in a real interface structure

Open the Codex Dream Skin Generator. Choose your image, enter a theme name, and adjust the readability veil, background blur, and interface text color. The preview contains a sidebar, task suggestions, project status, and a composer, so you can see how the image behaves behind more than a decorative hero mockup.

Test at desktop, tablet, and narrow mobile-like widths even though the real desktop app is not a phone interface. Narrowing the preview reveals whether your focal point disappears behind navigation or whether bright image detail moves into a text-heavy region. Also test at least one of the built-in moods first; it gives you a baseline for how much contrast the interface needs.

The preview is intentionally an approximation. It is a design tool, not a promise that every selector matches your installed app version. The open-source adapter controls the live integration; the generator controls the portable visual choices.

4. Export and inspect the theme pack

Select Export Theme Pack. The browser creates a ZIP locally. When you use a custom image, the archive contains the renamed background file, theme.json, dream-skin.css, and a short README that links to the current community installer. No account is required, and the image is not uploaded by the generator.

Before installing, unzip the pack and inspect it. The manifest should preserve your theme name, overlay percentage, blur value, text color, and source image name. The CSS file should use variables rather than version-specific app selectors. This makes the visual pack easier to carry forward when the desktop adapter changes.

5. Install through the current adapter, then verify

Follow the current Codex Dream Skin installation guide for macOS or Windows. Do not assume that a pack can install itself or that a script copied months ago still understands the current ChatGPT desktop app. Read the upstream project’s README, platform folder, and recent issues before running local code.

After installation, verify the real sidebar, project selector, task content, composer, keyboard focus, and window resizing. Decoration should use pointer-events: none so it cannot block native controls. If the app layout is missing or interaction feels wrong, restore the official appearance and use the troubleshooting checklist instead of stacking more CSS fixes onto a broken adapter.

A practical theme creation checklist