Turquoise and teal. Light and dark. Same palette, everywhere I work.

Most themes give you somebody else's colors. This one is the palette from my own site — the "Faceted Clarity" design system behind jcdiamante.com — turned into an editor theme.

Deep navy canvas, turquoise accents, and a genuinely usable light variant that isn't just the dark one with the lightness flipped. Every color role was re-derived for a paper-white background instead of being reused, because a turquoise that sings on #060a13 is illegible on #ffffff.

This is the VS Code port of Zeraphim for Zed — same palette, same decisions, mapped onto VS Code's workbench, TextMate scopes and semantic tokens.

Themes

Name	Appearance	Canvas
Zeraphim Dark	dark	`#060a13`
Zeraphim Light	light	`#ffffff`

Install

From the Marketplace

Open VS Code
Cmd Shift X (Extensions)
Search for Zeraphim
Click Install, then Set Color Theme

Or from a terminal:

code --install-extension Zeraphim.zeraphim-theme

From a `.vsix` file

code --install-extension zeraphim-theme-0.1.0.vsix

As a local dev copy

Symlink or copy this folder into your VS Code extensions directory, then restart:

# macOS / Linux
ln -s "$PWD" ~/.vscode/extensions/zeraphim-theme

# Windows (PowerShell)
New-Item -ItemType SymbolicLink -Path "$env:USERPROFILE\.vscode\extensions\zeraphim-theme" -Target "$PWD"

Or press F5 in this folder to launch an Extension Development Host with the theme loaded.

Switching

Cmd K Cmd T opens the theme picker, or Cmd Shift P → Preferences: Color Theme. Arrow keys preview live; Enter commits.

To follow your system appearance, edit settings.json:

{
  "window.autoDetectColorScheme": true,
  "workbench.preferredDarkColorTheme": "Zeraphim Dark",
  "workbench.preferredLightColorTheme": "Zeraphim Light"
}

Or pin one:

{
  "workbench.colorTheme": "Zeraphim Dark"
}

What's in the box

Both appearances, at full parity — no gaps between the variants
Full workbench coverage — editor, tabs, sidebar, activity bar, status bar, title bar, panels, terminal, notifications, quick pick, peek view, diff editor, merge conflicts, minimap, breadcrumbs, debug UI, notebooks, settings
16 ANSI terminal colors plus bright variants, so the integrated terminal matches the editor instead of fighting it
TextMate tokenColors mirroring the 45 syntax captures from the Zed theme
semanticTokenColors so language servers can override scopes with something sharper — readonly bindings pick up the constant color, default-library symbols get their own hue, deprecated symbols get struck through
Rainbow bracket pairs drawn from the brand hues, in palette order
Italic comments, bold-italic keywords, and weighted headings, echoing the Syne/Lexend split on the site
Contrast-checked — every foreground was measured against the surface it actually lands on, not eyeballed

About the light variant

Three brand colors don't survive a white background. #c88813 amber reaches only 2.6:1 as text, so warnings, numbers and constants use a corrected #8f6410 while the original amber stays for decoration. Same story for the faint inks. The dark variant uses the brand tokens verbatim.

The terminal's white slots are deliberately inverted in the light theme — programs assume ANSI 15 is a legible foreground, and literal white vanishes on paper.

Development

Tweak a theme file and the changes appear live in the Extension Development Host (F5) — no reload needed.

To inspect what scope a piece of text actually has: Cmd Shift P → Developer: Inspect Editor Tokens and Scopes. That popup tells you the TextMate scope, the semantic token type, and which rule in this theme won.

To find the name of a UI element you want to recolor, see the Theme Color reference.

Publishing

npm install -g @vscode/vsce
vsce package                 # builds zeraphim-theme-0.1.0.vsix
vsce publish                 # uploads to the Marketplace

Publishing needs a publisher and a Personal Access Token from an Azure DevOps organization, with Marketplace → Manage scope, scoped to All accessible organizations.

Contributing

Something looks off? Open an issue. Include a screenshot and the language, if it's a syntax problem — plus the output of Inspect Editor Tokens and Scopes if you have it.

License

MIT

Built by @Zeraphim.

Zeraphim