codex-dream-skin-theme-injector

# Codex Dream Skin Theme Injector > Skill by [ara.so](https://ara.so) — Codex Skills collection. ## Overview Codex Dream Skin is a **local CDP (Chrome DevTools Protocol) injection tool** that applies custom visual themes to the Codex desktop application without modifying the official installation binaries, `.app` bundle, `app.asar`, or code signature. **Key capabilities:** - Inject custom CSS/background images into running Codex instance - Bind CDP server to `127.0.0.1` only (local security boundary) - One-click install, apply, restore scripts - Platform-specific implementations for macOS and Windows - Interactive UI elements remain native (not just a static overlay) **Security model:** - Does NOT modify official installation files - Does NOT change API keys or base URLs - CDP bound to localhost only - Requires Codex to be launched with `--remote-debugging-port` flag --- ## Installation ### macOS (Apple Silicon & Intel) Located in `macos/` directory. **Quick install:** ```bash cd macos # Double-click or run: ./Install\ Codex\ Dream\ Skin.command ``` **Manual setup:** ```bash # 1. Clone repo git clone https://github.com/Fei-Away/Codex-Dream-Skin.git cd Codex-Dream-Skin/macos # 2. Make scripts executable chmod +x scripts/*.sh chmod +x *.command # 3. Run installer ./Install\ Codex\ Dream\ Skin.command ``` The installer will: - Check for Codex.app in `/Applications` - Install helper scripts to `~/Library/Application Support/Codex-Dream-Skin/` - Create launch wrappers - Set up configuration directory ### Windows Located in `windows/` directory. **PowerShell setup:** ```powershell # 1. Navigate to windows directory cd windows # 2. Install (sets up scripts and config) .\scripts\install-dream-skin.ps1 # 3. Start Dream Skin with Codex .\scripts\start-dream-skin.ps1 ``` **What it does:** - Locates Codex installation (typically in `%LOCALAPPDATA%\Programs\Codex`) - Sets up helper scripts in `%APPDATA%\Codex-Dream-Skin` - Configures CDP port (default 9222) - Creates theme injection scripts --- ## Usage ### Starting Codex with Dream Skin **macOS:** ```bash # Use the installed launcher ~/Library/Application\ Support/Codex-Dream-Skin/launch-codex-with-skin.sh # Or manually: /Applications/Codex.app/Contents/MacOS/Codex --remote-debugging-port=9222 & sleep 3 ~/Library/Application\ Support/Codex-Dream-Skin/inject-theme.sh ``` **Windows:** ```powershell # Use start script .\scripts\start-dream-skin.ps1 # Or manually: Start-Process "$env:LOCALAPPDATA\Programs\Codex\Codex.exe" -ArgumentList "--remote-debugging-port=9222" Start-Sleep -Seconds 3 .\scripts\inject-theme.ps1 ``` ### Switching Themes **Theme structure:** ``` themes/ my-theme/ config.json background.jpg custom.css ``` **config.json example:** ```json { "name": "My Custom Theme", "background": "background.jpg", "css": "custom.css", "opacity": 0.85, "blur": 10 } ``` **Apply theme (macOS):** ```bash # Edit config to point to your theme vim ~/Library/Application\ Support/Codex-Dream-Skin/config.json # Set theme path { "theme": "~/Codex-Dream-Skin/themes/my-theme", "cdp_port": 9222 } # Restart Codex with skin ~/Library/Application\ Support/Codex-Dream-Skin/launch-codex-with-skin.sh ``` **Apply theme (Windows):** ```powershell # Edit config notepad $env:APPDATA\Codex-Dream-Skin\config.json # Set theme path { "theme": "C:\\Users\\YourName\\Codex-Dream-Skin\\themes\\my-theme", "cdp_port": 9222 } # Restart .\scripts\start-dream-skin.ps1 ``` ### Custom CSS Injection **Example custom.css:** ```css /* Background overlay */ body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('./background.jpg'); background-size: cover; background-position: center; opacity: 0.15; z-index: -1; pointer-events: none; } /* Sidebar transparency */ .sidebar { background: rgba(255, 255, 255, 0.9) !important; backdrop-filter: blur(10px); } /* Input area styling */ .input-container { background: rgba(248, 249, 250, 0.95) !important; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } /* Accent color override */ :root { --accent-color: #ff6b9d; --accent-hover: #ff8fb3; } ``` ### CDP Injection Script (macOS) **inject-theme.sh snippet:** ```bash #!/bin/bash CDP_PORT=${CDP_PORT:-9222} CONFIG_DIR="$HOME/Library/Application Support/Codex-Dream-Skin" THEME_DIR=$(jq -r '.theme' "$CONFIG_DIR/config.json") # Wait for CDP to be available timeout=10 while [ $timeout -gt 0 ]; do if curl -s "http://127.0.0.1:$CDP_PORT/json" >/dev/null; then break fi sleep 1 ((timeout--)) done # Get WebSocket URL WS_URL=$(curl -s "http://127.0.0.1:$CDP_PORT/json" | jq -r '.[0].webSocketDebuggerUrl') # Inject CSS CSS_CONTENT=$(cat "$THEME_DIR/custom.css" | jq -Rs .) wscat -c "$WS_URL" -x "{\"id\":1,\"method\":\"Runtime.evaluate\",\"params\":{\"expression\":\"const style=document.createElement('style');style.textContent=$CSS_CONTENT;document.head.appendChild(style);\"}}" ``` ### CDP Injection Script (Windows) **inject-theme.ps1 snippet:** ```powershell $CDP_PORT = 9222 $ConfigPath = "$env:APPDATA\Codex-Dream-Skin\config.json" $Config = Get-Content $ConfigPath | ConvertFrom-Json $ThemeDir = $Config.theme # Wait for CDP $timeout = 10 while ($timeout -gt 0) { try { $response = Invoke-WebRequest -Uri "http://127.0.0.1:$CDP_PORT/json" -UseBasicParsing break } catch { Start-Sleep -Seconds 1 $timeout-- } } # Get WebSocket URL $pages = Invoke-RestMethod -Uri "http://127.0.0.1:$CDP_PORT/json" $wsUrl = $pages[0].webSocketDebuggerUrl # Read CSS $cssContent = Get-Content "$ThemeDir\custom.css" -Raw $cssEscaped = $cssContent -replace '"', '\"' -replace "`r`n", "\n" # Inject via WebSocket $js = "const style=document.createElement('style');style.textContent=`"$cssEscaped`";document.head.appendChild(style);" $payload = @{ id = 1 method = "Runtime.evaluate" params = @{ expression = $js } } | ConvertTo-Json -Compress # Send via WebSocket (requires WebSocket client) # Use wscat or custom WebSocket implementation ``` --- ## Configuration ### Main Config File **Location:** - macOS: `~/Library/Application Support/Codex-Dream-Skin/config.json` - Windows: `%APPDATA%\Codex-Dream-Skin\config.json` **Schema:** ```json { "theme": "/path/to/theme/directory", "cdp_port": 9222, "auto_inject": true, "inject_delay": 3, "backup_enabled": true } ``` **Fields:** - `theme`: Absolute path to theme directory - `cdp_port`: CDP debugging port (default 9222) - `auto_inject`: Auto-inject on Codex launch - `inject_delay`: Seconds to wait before injection - `backup_enabled`: Keep backup of original state ### Environment Variables ```bash # Override CDP port export CDP_PORT=9223 # Custom config location export CODEX_SKIN_CONFIG="$HOME/.config/codex-skin.json" # Theme directory export CODEX_THEME_DIR="$HOME/my-themes/current" ``` --- ## Key Commands ### macOS Scripts Located in `macos/scripts/`: ```bash # Install Dream Skin ./Install\ Codex\ Dream\ Skin.command # Launch Codex with theming ~/Library/Application\ Support/Codex-Dream-Skin/launch-codex-with-skin.sh # Inject theme into running instance ~/Library/Application\ Support/Codex-Dream-Skin/inject-theme.sh # Restore original appearance ~/Library/Application\ Support/Codex-Dream-Skin/restore-original.sh # Verify installation ./macos/tests/run-tests.sh # Uninstall ./macos/scripts/uninstall.sh ``` ### Windows Scripts Located in `windows/scripts/`: ```powershell # Install .\scripts\install-dream-skin.ps1 # Start with theme .\scripts\start-dream-skin.ps1 # Inject to running instance .\scripts\inject-theme.ps1 # Restore original .\scripts\restore-original.ps1 # Verify .\scripts\verify-installation.ps1 ``` --- ## Common Patterns ### Pattern 1: Quick Theme Switch **macOS:** ```bash #!/bin/bash # switch-theme.sh THEME_NAME=$1 CONFIG="$HOME/Library/Application Support/Codex-Dream-Skin/config.json" THEME_BASE="$HOME/Codex-Dream-Skin/themes" # Update config jq --arg theme "$THEME_BASE/$THEME_NAME" '.theme = $theme' "$CONFIG" > /tmp/config.json mv /tmp/config.json "$CONFIG" # Kill Codex pkill -f "Codex.*remote-debugging" # Restart with new theme ~/Library/Application\ Support/Codex-Dream-Skin/launch-codex-with-skin.sh ``` **Usage:** ```bash ./switch-theme.sh pink-custom ./switch-theme.sh hatsune-miku ``` ### Pattern 2: Dynamic CSS Injection **JavaScript injected via CDP:** ```javascript // Inject with opacity control const injectTheme = (cssUrl, opacity = 0.85) => { const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = cssUrl; document.head.appendChild(link); const overlay = document.createElement('div'); overlay.style = ` position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url('${cssUrl.replace('.css', '.jpg')}'); background-size: cover; opacity: ${opacity}; z-index: -1; pointer-events: none; `; document.body.prepend(overlay); }; injectTheme('http://localhost:8080/theme.css', 0.9); ``` **CDP command:** ```bash # Evaluate JavaScript via CDP curl -X POST http://127.0.0.1:9222/json/new WS_URL=$(curl -s http://127.0.0.1:9222/json | jq -r '.[0].webSocketDebuggerUrl') echo '{ "id": 1,