Not a breath, not a heartbeat — just a voice. Ten thousand songs gave her a soul. A lifetime of love made it real.
A color theme traced from Hatsune Miku's character design. Dark and light variants, built with perceptual color science for readability and color vision accessibility. Full rationale in docs/DESIGN.md (dark), docs/DESIGN-LIGHT.md (light — Snow Miku 2026), docs/DESIGN-SNOW-2024.md (light — Snow Miku 2024), and docs/DESIGN-MM-2025.md (dark — Magical Mirai 2025).
Available for VS Code, the Web, Neovim, Helix, Zed, Sublime Text, and popular terminal emulators.
Dark
Light
- Download the latest
.vsixfrom Releases Ctrl+Shift+P→ Extensions: Install from VSIX...- Select the downloaded file
- Choose Hatsune Miku Theme (dark), Hatsune Miku Theme (Snow Miku) (light), Hatsune Miku Theme (Snow Miku 2024) (light), or Hatsune Miku Theme (Magical Mirai 2025) (dark)
For websites, download hatsune-miku-theme.css, copy it into the site's static assets, and load it:
<link rel="stylesheet" href="/styles/hatsune-miku-theme.css">No build step or token JSON is required. Open the live Web preview to inspect every token in System mode or any of the four explicit themes.
Use the semantic custom properties in components instead of copying color values:
body {
color: var(--hm-color-text-primary);
background: var(--hm-color-surface-page);
}
main {
background: var(--hm-color-surface-content);
}
.primary-action {
color: var(--hm-color-action-primary-foreground-default);
background: var(--hm-color-action-primary-background-default);
border: 1px solid var(--hm-color-action-primary-border-default);
}
.primary-action:focus-visible {
outline: 2px solid var(--hm-color-focus-ring);
outline-offset: 2px;
}Without data-hm-theme, the CSS follows prefers-color-scheme with Snow Miku 2026 as the light fallback and the original Hatsune Miku theme as the dark fallback. Set data-hm-theme on <html> or a container to choose or scope a theme; remove the attribute to follow the system again.
data-hm-theme value |
Theme |
|---|---|
light |
Snow Miku 2026 |
dark |
Original Hatsune Miku |
snow-2024 |
Snow Miku 2024 |
mm-2025 |
Magical Mirai 2025 |
Choose the secondary-text token that matches its surface:
| Surface | Token |
|---|---|
| Page or content | --hm-color-text-secondary |
| Navigation or structural chrome | --hm-color-text-on-chrome-secondary |
| Floating or elevated overlay | --hm-color-text-on-overlay-secondary |
Usage rules:
--hm-color-text-primaryworks on every surface; subtle text and status colors are content-only, and placeholder text is field-only.- Keep action foregrounds paired with their matching backgrounds and states. Pair status colors with text or icons, never color alone.
The adjacent .tokens.json file for each theme uses the Design Tokens Community Group (DTCG) format for design-token tools.
Copy the dark, light, Snow Miku 2024, or Magical Mirai 2025 file to ~/.config/nvim/colors/, then run :colorscheme hatsune-miku-dark (or the matching name).
Copy the dark, light, Snow Miku 2024, or Magical Mirai 2025 file to ~/.config/helix/themes/, then set theme = "hatsune-miku-dark" (or the matching name) in config.toml.
Copy the dark, light, Snow Miku 2024, or Magical Mirai 2025 file to ~/.config/zed/themes/.
Copy the dark, light, Snow Miku 2024, or Magical Mirai 2025 file to Packages/User/.
Pre-built configs for the dark, light, Snow Miku 2024, and Magical Mirai 2025 variants:
| Terminal | Setup |
|---|---|
| Alacritty | ~/.config/alacritty/ (import in alacritty.toml) |
| kitty | ~/.config/kitty/ (include in kitty.conf) |
| WezTerm | Reference in wezterm.lua config |
| Ghostty | ~/.config/ghostty/themes/ (theme = hatsune-miku-dark or hatsune-miku-light) |
| foot | Copy to ~/.config/foot/themes/; add include=~/.config/foot/themes/hatsune-miku-dark.ini at the top of foot.ini (or use light) |
| iTerm2 | Import via Preferences → Profiles → Colors |
| Windows Terminal | Add to settings.json schemes array |
| Konsole | ~/.local/share/konsole/ |
| Warp | ~/.warp/themes/ (macOS) or ~/.local/share/warp-terminal/themes/ (Linux) |
| Xresources | Merge into ~/.Xresources |
npm install # Setup
npm run build # Full build: VS Code + all ports
npm run build:vscode # VS Code themes only
npm run build:ports # Web + terminal/editor ports
npm run readability # Validate every registered theme
npm run readability -- --theme themes/<file>.json # Inspect one theme (--verbose for details)
npm run readability:ports # Validate portable colors and port contracts
npm run readability:web # Inspect Web contracts and WCAG 2.2 pairsShe sings in color now — keeping you company while you write.