Skip to content
| Marketplace
Sign in
Visual Studio Code>Themes>Harmonia ThemeNew to Visual Studio Code? Get it now.
Harmonia Theme

Harmonia Theme

AgusRdz

|
34 installs
| (0) | Free
A subtle, carefully crafted theme to reduce visual noise while coding.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Harmonia Theme

Visual Studio Marketplace

Harmonia is a carefully crafted theme suite for Visual Studio Code. All variants are designed for long, focused coding sessions with soft, thoughtful visuals and semantic clarity.

Currently included:

  • 🌑 Harmonia Dark - deep, soft background, balanced accents
  • ☀️ Harmonia Light - gentle light mode, clean readability
  • 🌌 Harmonia Noir - violet-black, elegant and moody
  • 🎯 Harmonia Dark High Contrast - bold contrast for maximum focus
  • 🖤 Harmonia OLED True Black - pure black background, power-efficient on OLED

🌗 Purpose

Harmonia was created for developers who want:

  • Visual peace over visual noise
  • Focused, low-glare interfaces in both light and dark modes
  • Clear, consistent syntax highlighting
  • A UI that supports your work instead of distracting from it

🎯 Features

  • 🎨 Cohesive color palettes - expressive accents with balanced backgrounds
  • 🧠 Semantic clarity - functions, variables, parameters, and keywords all distinct
  • 💬 Readable comments - styled to fade gently but never disappear
  • 📄 Enhanced Markdown - blockquotes, headers, inline code, separators styled for clarity
  • 💻 Terminal harmony - ANSI colors tuned to match the theme mood
  • 🧩 Language-first design - tuned for PHP, JS, JSON, Docker, configs, logs, and more

🎨 Color Philosophy

Harmonia Dark

  • #1a1b26 - soft, deep background (never pure black)
  • #d0d0e0 - consistent, low-contrast foreground text
  • Accents: #c574dd, #88c6c3, #a3d9a5 --- expressive yet quiet
  • Structure: #5a5f7a for dividers, quotes, and spacing

Harmonia Light

  • #eceef1 - soft, light background (never pure white)
  • #2d2d2d - clean, readable foreground text
  • Accents: #c574dd, #86c591, #83bde7 --- elegant without harshness
  • Structure: #c1c1c1 and #c3c7ce for subtle guides and dividers

Harmonia Noir

  • #14121A - rich violet-black background for deep focus
  • #d0d0e0 - soft, neutral foreground text
  • Accents: #b88ce8, #9fd6d1, #e0a96d - sophisticated, moody tones
  • Structure: #4C4665 and #2A2835 for subtle depth and guides

Harmonia Dark High Contrast

  • #0f0f0f - stronger, pure background
  • #ffffff - crisp, accessible foreground text
  • Accents: #ff4081, #00e5ff, #76ff03 - high-contrast, vivid highlights
  • Structure: #888888, #444444 - clear borders and guides

Harmonia OLED True Black

  • #000000 - true black background for OLED panels (power efficient)
  • #d0d0d0 - soft neutral text for comfort
  • Accents: #ff79c6, #50fa7b, #8be9fd - vivid, high-energy highlights
  • Structure: #44475a, #282a36 - careful borders and subtle guides

Each variant is designed to reduce fatigue, keep code readable, and make your editor feel like a calm workspace.


⚙️ Recommended Settings

{
  "workbench.colorTheme": "Harmonia Dark",
  "editor.fontFamily": "'Monaspace Argon', 'Fira Code', 'MonoLisa', 'JetBrains Mono', 'DejaVu Sans Code', 'monospace'",
  "editor.fontLigatures": "'calt', 'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'ss07', 'ss08', 'ss09', 'cv01' 2, 'liga'",
  "editor.fontSize": 16,
  "editor.lineHeight": 0,
  "editor.cursorBlinking": true,
  "editor.renderWhitespace": "none",
  "editor.minimap.enabled": false,
  "terminal.integrated.fontFamily": "'Fira Code', monospace",
  "terminal.integrated.fontSize": 16
}

🎨 Advanced Usage

Harmonia works out of the box, but you can take advantage of VS Code's customization options to fine-tune your experience.

Set Default Theme

"workbench.colorTheme": "Harmonia Noir"

Always start VS Code with Harmonia Noir. Change to "Harmonia Dark" or "Harmonia Light" as needed.

Preferred Dark/Light Theme

"workbench.preferredDarkColorTheme": "Harmonia Noir",
"workbench.preferredLightColorTheme": "Harmonia Light",
"window.autoDetectColorScheme": true

Automatically switch between Light and Dark variants based on your operating system theme.

Theme-Specific Overrides

VS Code allows overriding colors per theme without editing the theme itself. Official docs: Customize a Color Theme

"workbench.colorCustomizations": {
  "[Harmonia Dark]": {
    "editor.background": "#1a1b26",
    "editor.foreground": "#d0d0e0",
    // other tweaks...
  },
}

This example tweaks line numbers differently for each variant. You can use the same method to adjust highlights, borders, or any UI color.


🔤 Recommended Fonts

Harmonia pairs well with these fonts, chosen for clarity and comfort during long sessions:

Font Link
Monaspace Argon monaspace.githubnext.com
Fira Code github.com/tonsky/FiraCode
MonoLisa monolisa.dev (the free version is enough)
JetBrains Mono jetbrains.com/lp/mono
DejaVu Sans Code dejavu-fonts.github.io
monospace (System fallback - no installation needed)

🎨 Preview

Harmonia Dark

JS Example PHP Example CSS Example

Harmonia Light

JS Example PHP Example CSS Example

Harmonia Noir

JS Example PHP Example CSS Example

Harmonia Dark High Contrast

JS Example PHP Example CSS Example

Harmonia OLED True Black

JS Example PHP Example CSS Example


License

Harmonia is released under the MIT License. Use, modify, and share it freely.

Feedback is always welcome! This started as a personal project for my own daily coding, and I'm happy to share it with anyone who finds it useful. Suggestions are appreciated - updates are not guaranteed, but the theme will continue to evolve with time.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft