Hatsune Miku Theme
A Vocaloid teal skin that turns Codex into your own diva console
// validate input
function validate(email) {
return /.+@.+\..+/.test(email)
}Get this theme
The commands below are macOS-only (custom-image themes are macOS-exclusive). Windows currently supports only the built-in fixed skin — see the Windows section of the tutorial. Both methods run locally and restore in one click.
Copy apply command (recommended)
Copy and run — it auto-downloads this theme's matching background to ~/Downloads, generates theme.json, and auto-applies (edit the image path in the command to use your own).
Download theme.json pack
Download theme.json and put it in one folder with your background image (renamed background.jpg).
For option 2, drop the folder into the theme library, then switch:
~/.codex/codex-dream-skin-studio/scripts/switch-theme-macos.sh --id codex-miku-themeLibrary path: ~/Library/Application Support/CodexDreamSkinStudio/themes/codex-miku-theme/ (needs theme.json + background.jpg). Hot-switches if Codex is open; otherwise double-click Start.
Color palette
The core palette for this theme. Every control — sidebar, input box, suggestion card, code block — uses these colors.
Tags
Overview
The Hatsune Miku theme turns Codex into your own virtual-diva console. The palette pulls from Miku's signature teal, paired with the soft pink of her ribbons and hair accessories, over a blue-tinted deep teal-black that makes the code area feel like a late-night studio control board. The sidebar, input box, and AI suggestion cards all pick up this fresh anime atmosphere, yet stay easy on the eyes during long sessions. Every native control still clicks and works normally — this isn't a fake screenshot pasted on top, it's a real skinning layer draped over the Codex interface. If you're a longtime Vocaloid fan, love teal, or just want a clean look with real personality, this theme is for you.
Palette breakdown
The primary color #39C5BB is Miku's official teal, applied to accent buttons, links, the AI suggestion card border, and code keywords — recognizable at a glance. The secondary #FF9ED6 comes from her iconic pink ribbon, accenting badges, active states, and a few decorative touches to warm up the cool palette. The background is a blue-tinted deep teal-black #05131A, softer than pure black so it doesn't strain your eyes over long hours; panels #0B2128 and the sidebar #081A20 create a subtle layered depth. Body text uses a mint-tinted near-white #E0FFF7, with muted text stepping down to #79BAAC to keep things readable on the dark surface. Syntax highlighting stays within the teal-green-cyan spectrum so the whole view feels cohesive, never noisy.
Who it's for
This theme suits three kinds of users in particular. First, Vocaloid and Miku fans who want their favorite character beside them while they vibe-code. Second, anime-leaning developers tired of a cookie-cutter Codex — the teal palette is clean yet unmistakable. Third, streamers and screencasters: this skin looks great on camera and carries a strong personal style that viewers remember at a glance. If you lean toward minimal business looks, or pink isn't your thing, watch for our upcoming Dracula, Nord and other classic palette themes.
How to apply (3 steps)
Step one: install the theming engine by double-clicking Install Codex Dream Skin.command in the repo's macos folder (macOS needs no separate Node — it reuses the signed Node bundled inside Codex.app). Step two: double-click Customize Codex Dream Skin.command, pick a Miku background image, and set the Miku teal #39C5BB; the CLI equivalent is customize-theme-macos.sh --image miku.png --name "Hatsune Miku" --accent "#39C5BB" --secondary "#FF61C7" --highlight "#00B4DC". Step three: the script writes theme.json and auto-applies it to the Codex interface via CDP injection over the local loopback 127.0.0.1:9341. If any text feels low-contrast on the dark surface, re-run Customize and adjust the three colors. The whole process stays on your machine and makes no external network calls.
Inspiration & culture
Hatsune Miku is a virtual singer built by Crypton Future Media on Yamaha's VOCALOID engine. Since her debut in 2007 she has become an icon of global anime-internet culture. Her signature teal (#39C5BB, affectionately the 'leek color' among fans) and twin-tail silhouette are instantly recognizable — from NicoNico to Bilibili, holographic concerts to countless fan works, Miku has grown up alongside a generation of online creators. Bringing this palette into Codex is both a tribute to the virtual diva and a little romance for the programmer's daily grind. After all, coding beside a character you love is one of the most moving parts of vibe coding.
Compatibility & one-click restore
Custom-image themes like this Miku skin are macOS-only for now — the Windows build only ships a fixed pink-purple skin and can't yet use your own image. Theming is implemented via local CDP (Chrome DevTools Protocol) injection — an unofficial approach that never modifies Codex's official bundle or code signature, only overlaying visual effects on the interface. If a Codex update briefly breaks the skin, double-click Restore Codex Dream Skin.command to revert to the default UI in one click — it won't affect future updates. Please use it in line with Codex's terms of service.
FAQ for this theme
Is this Miku theme free?
Yes. The theme solutions showcased here are free to reference and use. The palette and asset ideas are public, and you can follow the tutorial to do it yourself; if you'd rather not fuss, our commission service can set it up for you end to end.
Does it work on Mac?
Yes. The Codex desktop app is an Electron app, and both macOS and Windows support CDP-injected theming. The engine auto-detects your platform during setup.
What if the skin breaks after a Codex update?
A Codex version update may briefly break the skin. Run the open-source project's Restore script to revert to the default UI in one click, or wait for the engine to update — it won't interfere with Codex's normal updates.
Does it modify Codex's official bundle on my machine?
No. Theming only injects CSS/JS over the local loopback address to overlay decoration on the interface — it never modifies Codex's official .app bundle or code signature, so it won't affect future official updates.
Before you use it
Theme previews on this page are illustrative; actual results depend on your local setup. Theming works via local CDP (Chrome DevTools Protocol) CSS/JS injection — an unofficial approach that never modifies the official Codex bundle or code signature, but a Codex version update may briefly break the skin. If it breaks, run the open-source Restore script to revert, or wait for the engine to update. Please use it in line with Codex's terms of service.
Related themes
// validate input
function validate(email) {
return /.+@.+\..+/.test(email)
}Dracula Theme
The classic developer dark scheme — timeless purple-pink cool tones
// validate input
function validate(email) {
return /.+@.+\..+/.test(email)
}Nord Theme
Arctic Nordic cool tones — restrained and easy on the eyes
// validate input
function validate(email) {
return /.+@.+\..+/.test(email)
}Monokai Theme
The original editor color scheme — iconic pink-green contrast