Creating and Selling a $199 Codex Beauty Theme: A Step‑by‑Step Guide

Technical overview of Codex‑Dream‑Skin

Codex‑Dream‑Skin is an open‑source project that customises the UI of the Codex AI‑programming tool on macOS and Windows. It replaces backgrounds, sidebars, input boxes, suggestion cards, colour schemes and decorative layers by injecting CSS and DOM nodes at runtime. The injection is performed via the Chrome DevTools Protocol (CDP) and does not modify the original .app, app.asar or WindowsApps packages.

Injection mechanism

A launch script starts Codex with a debugging server bound to the loopback address 127.0.0.1. The script obtains the WebSocket debugger URL, connects to it, and sends a Runtime.evaluate command that creates (or replaces) a <style> element with the desired CSS. The injected style node is identified by the id dream-skin so that it can be removed later to restore the original UI.

// Connect only to the local Codex debug port
const socket = new WebSocket(CodexPage.webSocketDebuggerUrl);
socket.addEventListener('open', () => {
  socket.send(JSON.stringify({
    id: 1,
    method: 'Runtime.evaluate',
    params: {
      expression: `
        const old = document.querySelector('#dream-skin');
        if (old) old.remove();
        const style = document.createElement('style');
        style.id = 'dream-skin';
        style.textContent = ':root { --accent: #8b5cf6; } body { background: #120d22; }';
        document.head.appendChild(style);
      `
    }
  }));
});

Handling dynamic UI changes

Codex’s desktop client uses React routing; when the user navigates to a new session the DOM is rebuilt and previously injected nodes disappear. Therefore the injector must monitor page navigation events (e.g., via CDP Page.frameNavigated or Runtime.consoleAPICalled) and re‑apply the style injection after each navigation. Without this re‑injection the customised home page remains while other pages revert to the default layout.

Repository and usage workflow

Clone the repository: https://github.com/Fei-Away/Codex-Dream-Skin After cloning, the typical workflow is:

Run the provided installation script, which reads Codex platform documentation, verifies the application signature, process path and debugging‑port ownership.

Launch Codex through the script so that the CDP endpoint becomes available.

Execute the injection script (or the bundled UI‑switcher) to replace UI assets.

Validate visual aspects such as text contrast, dialog visibility, window scaling and input field readability.

When finished, invoke the bundled Restore function, which removes the injected #dream-skin style node and restores the original UI.

Security and maintenance considerations

CDP grants high‑privilege access to the browser context; even though it only listens on the local device, scripts executed via CDP can run arbitrary JavaScript in the Codex page. Users should avoid running untrusted scripts and should not download external binaries through the injection process.

Future Codex updates may change DOM selectors; when that happens the injection script must be updated accordingly, otherwise the style nodes will not be found and the theme will break.

Using copyrighted assets (e.g., celebrity or anime images) for personal use is permissible, but redistribution for profit may infringe portrait‑right or copyright laws.