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

Harmonia Theme

AgusRdz

|
59 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

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.

🎨 Harmonia Theme Family

Variant Mode Description Palette
🌑 Dark Dark Technical, focused, and balanced. #1a1b26, #9CB8FF, #83D3B2
🌌 Noir Dark Elegant, moody, and cinematic. #14121A, #C2A0F5, #A8E0D2
💎 High Contrast Dark Sharp and vibrant for high visibility. #1a1b26, #E3B1FF, #A9F0DA
🖤 OLED True Black Dark Pure black for OLED screens. #000000, #B99EF0, #A7DEAE
☀️ Light Light Clean, balanced, and neutral. #eceef1, #4B5EBD, #2F7C61
📄 Paper White Light Print-like and ultra-readable. #ffffff, #2D2D2D, #3574A3
🌈 Aurora Dark Soft, colorful, and relaxing. #1D1C28, #E8A2C8, #B0E3C5

🩵 The Harmonia Journey - Complete, but Ever-Evolving

With version 1.5.1, the Harmonia core collection is now considered feature complete. Each variant - from Dark to Aurora - represents a unique balance of clarity, comfort, and emotion, forming a full spectrum designed for long, pleasant coding sessions.

Harmonia will continue to receive:

  • Minor refinements for contrast, readability, and accessibility.
  • Adjustments to stay in sync with new VS Code tokens and UI updates.
  • Occasional explorations under Harmonia Elements, a sub-family of experimental palettes inspired by natural tones (e.g. Teal, Sand, Rose).

Harmonia is no longer expanding - it’s maturing. Its philosophy of visual harmony, comfort, and balance remains at the core of every update.

🌿 Thank you for helping Harmonia grow into a complete family of colors, trusted by developers who value focus, serenity, and timeless design.


🌗 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: #9CB8FF, #88c6c3, #c574dd --- 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: #C2A0F5, #A8E0D2, #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

Harmonia Paper White

  • #ffffff - bright, paper-like background for a clean and natural workspace
  • #2d2d2d - crisp, comfortable foreground text
  • Accents: #AA0000, #000088, #005500, #660066 - vivid ink-like hues inspired by print media
  • Guides & dividers: soft grays (#E0E0E0, #DDDDDD) for balanced separation without visual noise

Harmonia Aurora

  • #b7a0ff - gentle violet for keywords and logic
  • #f7a3a8 - warm rose for HTML/JSX tags
  • #b0e3c5 - soft mint for strings and class names
  • #a5d8f7 - cool blue for functions and utilities
  • #f9d79f - subtle amber for numbers and constants

Highlights:

  • Balanced pastels with clean contrast - colorful yet easy on the eyes.
  • Inspired by sunrise tones: a midpoint between Dark and Light.
  • Perfect for relaxed creative coding or front-end design work.

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

Harmonia Paper White

JS Example PHP Example CSS Example

Harmonia Aurora

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