菜单
One-click theme & skin switcher for OpenAI Codex Desktop using CDP injection — custom images, 12 built-in themes, persistent across restarts
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/Aradotso/codex-skills --skill heige-codex-skin-studio命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | heige-codex-skin-studio |
| description | One-click theme & skin switcher for OpenAI Codex Desktop using CDP injection — custom images, 12 built-in themes, persistent across restarts |
| triggers | ["how do I theme Codex Desktop","customize Codex Desktop appearance","apply custom skin to Codex","change Codex Desktop theme","use HeiGe Codex Skin Studio","create custom Codex theme from image","enable persistent theming in Codex","troubleshoot Codex skin not loading"] |
Skill by ara.so — Codex Skills collection.
HeiGe Codex Skin Studio is a theme and skin switcher for OpenAI Codex Desktop (macOS/Windows) that injects custom CSS and backgrounds through Chrome DevTools Protocol (CDP) on loopback 127.0.0.1:9341. It does not modify app.asar, binaries, or signature resources. One image becomes a theme; a top menu (🎨) switches themes instantly and controls persistence across restarts.
.skill file enables Codex to generate images and apply them as themes end-to-endcd /path/to/heige-codex-skin-studio
open scripts/install.command
This installs the launcher and applies the default Miku theme. The 🎨 menu appears in Codex Desktop's top bar.
cd \path\to\heige-codex-skin-studio
scripts\windows\install.bat
For daily use, run scripts\windows\apply.ps1 or the compatibility alias scripts\windows\enable-skin.bat to restore the current session. To enable persistence (launch on login), use the 🎨 menu's "Persistent Skin" toggle.
Uninstall (Windows):
scripts\windows\uninstall.bat
Removes scheduled tasks, Start Menu shortcuts, AppData state, and stable installation directory.
| Script | Purpose |
|---|---|
scripts/install.command (macOS) | Initial install, sets up launcher |
scripts/windows/install.bat | Initial install (Windows) |
scripts/apply.command (macOS) | Restore skin for current session, --restart flag to force quit & relaunch |
scripts/windows/apply.ps1 | Restore skin (Windows) |
scripts/pause.command / scripts/pause.ps1 | Temporarily disable skin (current session) |
scripts/resume.command / scripts/resume.ps1 | Re-enable skin (current session) |
scripts/restore.command / scripts/restore.ps1 | Remove skin, restore native UI |
scripts/windows/close-codex.bat | Safely quit Codex/GPT Desktop, preserve persistence settings |
scripts/windows/uninstall.bat | Complete uninstall (Windows) |
customize.command | Generate theme from local image file |
Command-line options (for apply.command / apply.ps1):
# macOS
./scripts/apply.command --restart # Force quit Codex & relaunch with skin
./scripts/apply.command --theme miku # Apply specific built-in theme
./scripts/apply.command --custom /path/to/image.png # Apply custom image theme
# Windows (PowerShell)
.\scripts\windows\apply.ps1 -Restart
.\scripts\windows\apply.ps1 -Theme "genshin-night"
.\scripts\windows\apply.ps1 -CustomImage "C:\path\to\image.jpg"
🎨 in Codex Desktop＋ Custom Image# macOS
./customize.command
# Prompts for image path, generates theme in output/custom-theme/
Install output/heige-codex-skin-studio.skill in Codex Desktop, then prompt:
"Generate a cyberpunk neon cityscape, then create a Codex theme from it"
Codex will generate the image, extract colors, and apply the theme automatically.
Themes are stored in themes/<theme-name>/theme.json:
{
"name": "Miku 488137",
"author": "HeiGe AI",
"version": "2.0.0",
"description": "High-fidelity Hatsune Miku theme",
"background": {
"light": "miku-light.webp",
"dark": "miku-dark.webp"
},
"colors": {
"light": {
"primary": "#39C5BB",
"secondary": "#5DCECD",
"accent": "#7FD9D8",
"background": "#E8F8F8",
"surface": "#FFFFFF",
"text": "#1A1A1A",
"textSecondary": "#666666",
"border": "#D0E8E8"
},
"dark": {
"primary": "#39C5BB",
"secondary": "#2DB5B0",
"accent": "#5DCECD",
"background": "#0A1A1A",
"surface": "#162828",
"text": "#E8F8F8",
"textSecondary": "#A0B8B8",
"border": "#2D4848"
}
},
"codexAppearance": {
"light": "light",
"dark": "dark"
}
}
Key fields:
background.light / background.dark: relative paths to background imagescolors.light / colors.dark: 8-color palette (primary, secondary, accent, background, surface, text, textSecondary, border)codexAppearance: maps theme mode to Codex's native light/dark settingPersistent skin is controlled via the 🎨 menu toggle:
~/Library/LaunchAgents/com.heigeai.codex-skin-controller.plistHeiGeAI_CodexSkinController for current user loginUser theme library: Custom uploaded themes are stored in:
~/Library/Application Support/HeiGeCodexSkin/user-themes/%APPDATA%\HeiGeCodexSkin\user-themes\State file (tracks current theme, persistence status):
~/Library/Application Support/HeiGeCodexSkin/skin-state.json%APPDATA%\HeiGeCodexSkin\skin-state.json{
"currentTheme": "miku",
"persistenceEnabled": true,
"readingEnhancement": true,
"lastApplied": "2026-07-29T12:34:56.789Z"
}
// In src/injector/theme-manager.js (or your own script)
const ThemeManager = require('./src/injector/theme-manager.js');
const tm = new ThemeManager();
await tm.applyTheme('genshin-night'); // Built-in theme ID
const { generateThemeFromImage } = require('./src/utils/theme-generator.js');
const ThemeManager = require('./src/injector/theme-manager.js');
const imagePath = '/path/to/wallpaper.jpg';
const outputDir = './output/my-custom-theme';
// Extract colors, generate theme.json + CSS
await generateThemeFromImage(imagePath, outputDir, {
themeName: 'My Custom Theme',
author: 'Your Name'
});
// Apply it
const tm = new ThemeManager();
await tm.applyTheme(outputDir); // Pass directory path for custom themes
const CDP = require('chrome-remote-interface');
const client = await CDP({ port: 9341 });
const { Page, Runtime } = client;
await Page.enable();
await Runtime.enable();
const css = `
body {
background-image: url('file:///path/to/bg.png');
background-size: cover;
}
.chat-message {
background-color: rgba(57, 197, 187, 0.9) !important;
}
`;
await Runtime.evaluate({
expression: `
(function() {
const style = document.createElement('style');
style.id = 'heige-custom-skin';
style.textContent = ${JSON.stringify(css)};
document.head.appendChild(style);
})();
`
});
await client.close();
const fs = require('fs');
const path = require('path');
const os = require('os');
const stateDir = process.platform === 'win32'
? path.join(process.env.APPDATA, 'HeiGeCodexSkin')
: path.join(os.homedir(), 'Library', 'Application Support', 'HeiGeCodexSkin');
const statePath = path.join(stateDir, 'skin-state.json');
const state = JSON.parse(fs.readFileSync(statePath, 'utf-8'));
console.log('Current theme:', state.currentTheme);
console.log('Persistence enabled:', state.persistenceEnabled);
// In injected context (via CDP Runtime.evaluate)
window.heigeReadingEnhancement = !window.heigeReadingEnhancement;
// Reload theme to apply
const themeId = document.documentElement.dataset.heigeTheme;
window.heigeApplyTheme(themeId);
HEIGE_CODEX_CDP_PORT — Override CDP port (default: 9341)HEIGE_CODEX_THEME_DIR — Custom theme directory (default: ./themes)HEIGE_LOG_LEVEL — debug | info | warn | error (default: info)Example:
export HEIGE_CODEX_CDP_PORT=9342
export HEIGE_LOG_LEVEL=debug
./scripts/apply.command
🎨 menu → "Persistent Skin" should be greenls ~/Library/LaunchAgents/com.heigeai.codex-skin-controller.plistschtasks /Query /TN HeiGeAI_CodexSkinController# macOS
./scripts/apply.command --restart
# Windows
.\scripts\windows\apply.ps1 -Restart
Force-quit and relaunch Codex with fresh CDP session.
~/Library/Application Support/HeiGeCodexSkin/user-themes/%APPDATA%\HeiGeCodexSkin\user-themes\tail -f ~/.heige-codex-skin.log (macOS) or %TEMP%\heige-codex-skin.log (Windows)--remote-debugging-port=9341ps aux | grep Codex (macOS) or tasklist | findstr Codex (Windows)127.0.0.1:9341plutil -lint ~/Library/LaunchAgents/com.heigeai.codex-skin-controller.plistschtasks /Query /TN HeiGeAI_CodexSkinController /V /FO LIST to verify task exists and is enabledtheme.json color keys are correct (primary, secondary, accent, background, surface, text, textSecondary, border)codexAppearance.light or codexAppearance.dark to the app# macOS
rm -rf ~/Library/Application\ Support/HeiGeCodexSkin
rm ~/Library/LaunchAgents/com.heigeai.codex-skin-controller.plist
launchctl remove com.heigeai.codex-skin-controller
# Windows
schtasks /Delete /TN HeiGeAI_CodexSkinController /F
rd /s /q "%APPDATA%\HeiGeCodexSkin"
rd /s /q "%LOCALAPPDATA%\Programs\HeiGeCodexSkin"
127.0.0.1:9341) has no authentication — any local process with same user privileges can connectSECURITY.md in project rootASSET_PROVENANCE.md// Install the .skill file in Codex Desktop first:
// output/heige-codex-skin-studio.skill
// Then in Codex chat, prompt:
// "Generate a pastel sakura landscape, 1920x1080, then create a Codex theme"
// Codex will execute (simplified):
const { generateImage } = require('./src/ai/image-generator.js');
const { generateThemeFromImage } = require('./src/utils/theme-generator.js');
const ThemeManager = require('./src/injector/theme-manager.js');
async function aiThemePipeline(prompt) {
// 1. Generate image via Codex's internal DALL-E
const imagePath = await generateImage(prompt, {
size: '1920x1080',
outputPath: './output/ai-generated.png'
});
// 2. Extract palette and generate theme
const themeDir = './output/sakura-theme';
await generateThemeFromImage(imagePath, themeDir, {
themeName: 'AI Sakura',
author: 'Codex AI'
});
// 3. Apply theme
const tm = new ThemeManager();
await tm.applyTheme(themeDir);
console.log('✅ AI-generated theme applied!');
}
aiThemePipeline('pastel sakura landscape with cherry blossoms at sunset');
ASSET_PROVENANCE.md for per-file sources and licensingTip: After installing, use the 🎨 menu in Codex Desktop for all theme operations. For programmatic control, import src/injector/theme-manager.js and call applyTheme(themeId).