
codex-theme-switcher
Apply, switch, and restore Codex desktop themes from the local /.codexthemes library with one command, and report which theme is currently active. Use when a user asks to apply or activate a theme they created or installed, switch between installed themes, restore the native Codex look, or check or debug which theme is currently applied.
- Installs
- 1.7K
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/codexthemes/skills --skill codex-theme-switcher- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads codex-theme-switcher automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Switch the active Codex theme
Apply a theme from the managed local library ~/.codexthemes/themes/<theme-id>/ to the running Codex desktop app, switch between installed themes, restore the native look, and verify what is actually active. This skill is standalone: its TypeScript scripts own the reversible injection runtime. It does not create or edit themes (codex-theme-creator), install them from the gallery (codex-theme-installer), or publish them (codex-theme-submitter). The only required local tools are Node.js 20+, npx, and the official Codex desktop app.
Run all commands from the installed skill directory. The runtime injects only an owned <style> element over Codex's loopback-only debugging endpoint; it never modifies the signed app bundle, and it themes every open Codex page, not just one window.
Step 1: pick the theme
npx tsx scripts/switch-theme.ts list
Lists every installed theme (id, name, layout mode) and which one is currently active. Themes arrive in the library from codex-theme-creator (created locally) or codex-theme-installer (downloaded from codexthemes.ai). If the theme the user wants is not listed, hand off to those skills instead of guessing paths.
Step 2: apply or switch
npx tsx scripts/switch-theme.ts apply <theme-id>
- If Codex is already exposing its debugging endpoint (it is after any previous themed launch), this hot-swaps the theme in place on every open page — no restart, output
{"status": "active", "pagesThemed": n}. - If there is no endpoint (first apply of this app session, or Codex was fully quit), ask the user for explicit permission to restart Codex, then rerun with
--launch:
npx tsx scripts/switch-theme.ts apply <theme-id> --launch
--launch prints {"status": "scheduled"} and hands the quit → relaunch → inject sequence to a detached helper that survives the restart (an agent hosted inside Codex dies with it; expect the tool call to be interrupted). Never build your own restart mechanism — no shell wrappers, launchd or scheduled tasks, or script copies; the helper already survives the restart.
The launcher supports macOS and Windows. On Windows it finds the Codex/ChatGPT executable (running process path, %LOCALAPPDATA%\Programs\..., or the WindowsApps execution alias — pass --app with the full .exe path if detection fails), closes it gracefully with taskkill (never /F), and relaunches it with the debugging flags. If the endpoint never appears after the relaunch, that installed build (for example a Microsoft Store package) drops the debugging flags — report that limitation plainly; never modify files under WindowsApps or the installation directory.
Built-in readability gate
Every apply measures the real rendered pixels after injection (screenshot-based contrast of visible text). If the theme leaves text unreadable, the apply automatically reverts to the previously active theme (or the native look) and reports {"status": "reverted", "failures": [...]} with the measured evidence. Tell the user the theme is broken as shipped and offer to fix it with codex-theme-creator; pass --force only when the user explicitly says they want to keep the unreadable theme anyway.
Step 3: verify — scheduled is not success
npx tsx scripts/switch-theme.ts status
status probes every live Codex page and reports active (all pages themed, one theme id), partial (pages disagree — reapply to converge them), or inactive, plus the per-page evidence. Only report success to the user after status shows active with the expected theme id. If it stays inactive after a --launch, read ~/.codexthemes/state/launch.log for the helper's result.
If an old theme keeps coming back after a successful hot swap (a stale session from an earlier task is still re-injecting it, and its registrations cannot be removed from outside that session), get the user's restart permission and force a clean relaunch — never ask the user to quit the app by hand:
npx tsx scripts/switch-theme.ts apply <theme-id> --launch --relaunch
--relaunch restarts Codex even though an endpoint is already live, which evicts every stale session, then injects the requested theme. It follows the same scheduled → status verification flow.
Step 4: always hand the user the escape hatch
Every successful apply report must also state the background scope from the active output, so the user is never surprised that artwork is home-only. Relay backgroundScopeNote in plain language, for example: "Background artwork shows on the home page only; the colors apply on every page. To show it on conversation pages too, ask codex-theme-creator to rebuild with backgroundScope: workspace." Then end with the undo hints, for example: "Reply rollback to return to the theme you had before, or restore for the native Codex look — fully quitting Codex also removes the theme." A user who dislikes the result must never have to ask how to undo it or how to change the scope.
Every apply records the previously active theme. When the user replies rollback (or says the new theme is broken, ugly, or not what they wanted):
npx tsx scripts/switch-theme.ts rollback
This re-applies the previously active theme, or restores the native look when there is none. It runs through the same apply pipeline, so the readability gate and status verification still apply. (A theme that fails the readability gate never needs a manual rollback — the apply auto-reverts on its own.)
When the user asks for the native look instead (or replies restore):
npx tsx scripts/switch-theme.ts restore
Removes the injected style and page markers from every page and clears the runtime state — no restart needed. A full application quit also drops the theme; reapply with --launch when the user wants it back. If the theme keeps reappearing after restore, a stale session is re-injecting it — use the --launch --relaunch flow from Step 2 with the user's permission, or have them fully quit and reopen Codex.
Boundaries
- Ask before any restart; a hot swap needs no permission beyond the user's request to switch.
- Never claim a theme is active based on
applyoutput alone when a restart was involved — verify withstatus. - Never modify
app.asar, the signed application bundle, user tasks, or authentication data. - Do not edit theme sources here; route design changes to codex-theme-creator.
FAQ
What does the codex-theme-switcher skill do?
Apply, switch, and restore Codex desktop themes from the local /.codexthemes library with one command, and report which theme is currently active. Use when a user asks to apply or activate a theme they created or installed, switch between installed themes, restore the native Codex look, or check or debug which theme is currently applied.
How do I install codex-theme-switcher?
Run npx skills add https://github.com/codexthemes/skills --skill codex-theme-switcher in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/codex-theme-switcher/ (personal) or .claude/skills/codex-theme-switcher/ (project).
Which AI agents can use codex-theme-switcher?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is codex-theme-switcher safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains codex-theme-switcher?
It is published by codexthemes in codexthemes/skills. It has 1,668 recorded installs.
More from codexthemes/skills
codex-theme-installer
codexthemes/skills
Download a published Codex theme from codexthemes.ai and install its source files into the local /.codexthemes theme library, anonymously within a free quota or with a CodexThemes API key for higher limits. Use when a user asks to install, download, get, or try a theme from CodexThemes, names a codexthemes.ai theme URL or theme id to install, or hits a download rate limit and needs API key guidance.
codex-theme-creator
codexthemes/skills
Create, redesign, validate, preview, package, and prepare cohesive themes for the official Codex desktop app from a visual brief or reference image. Use when a user asks for a new Codex theme, wants to preserve or adapt the native Codex layout, wants artwork on the home or conversation page, reports inconsistent themed surfaces, or needs a portable .codex-theme submission for CodexThemes.
codex-theme-finder
codexthemes/skills
Open the skill to read its SKILL.md instructions.
codex-theme-submitter
codexthemes/skills
Open the skill to read its SKILL.md instructions.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.