Meridian Theme for VS Code

A refined light theme with cohesive colors and complete UI coverage.
Comes in 💙 blue-tinted and 🩶 neutral variants.
Check out the 🌚 dark theme here: Zenith Theme for VS Code.

[!NOTE] Updated for VS Code Modern UI. The updated themes are backward compatible, but you can switch to "Meridian (Legacy)" or "Meridian Neutral (Legacy)" if you prefer the old style.

Installation

1. Install theme from the VS Code Marketplace (direct link)
2. Set your Color Theme to Meridian
3. Set your File Icon Theme to Meridian for file icons that match the theme colors
4. (Optional) Apply the suggested settings below

Suggested settings

Editor tabs

VS Code themes cannot customize the hover background for Modern UI's default "connected" editor tabs. They also cannot add a bottom border without it crossing the active tab. Use the settings below as workarounds for your chosen workbench.experimental.modernUIEditorTabStyle:

"workbench.colorCustomizations": {
  "[Meridian]": {
    // Connected tabs (default)
    "modernEditorTab.activeHoverBackground": "#fafcfd",
    "modernEditorTab.hoverBackground": "#00000000",

    // Pill tabs
    // "editorGroupHeader.border": "#cdd3d7",
    // "tab.inactiveForeground": "#505b62",
    // "tab.unfocusedInactiveForeground": "#505b62"
  },
  "[Meridian Neutral]": {
    // Connected tabs (default)
    "modernEditorTab.activeHoverBackground": "#fcfcfc",
    "modernEditorTab.hoverBackground": "#00000000",

    // Pill tabs
    // "editorGroupHeader.border": "#d2d2d2",
    // "tab.inactiveForeground": "#595959",
    // "tab.unfocusedInactiveForeground": "#595959"
  }
}

Font

The font in the screenshot is JetBrains Mono with these these settings:

"editor.fontFamily": "JetBrains Mono",
"editor.fontLigatures": true, // If you want ligatures.
"editor.fontSize": 13,

"terminal.integrated.fontFamily": "JetBrains Mono",
"terminal.integrated.fontLigatures": true, // If you want ligatures.
"terminal.integrated.fontSize": 13,
"terminal.integrated.lineHeight": 1.1,

UI elements

// Tone down the use of colors in Explorer and Editor.
"explorer.decorations.colors": false,
"outline.problems.colors": false,
"workbench.editor.decorations.colors": false,
"editor.bracketPairColorization.enabled": false,

// Extend Editor line highlight into gutter, adjust Scrollbar and resize indicator (Sash) sizes, and align Explorer file icons.
"editor.renderLineHighlight": "all",
"editor.scrollbar.horizontalScrollbarSize": 10,
"editor.scrollbar.verticalScrollbarSize": 10,
"workbench.tree.indent": 18,
"workbench.tree.renderIndentGuides": "none",
"workbench.sash.size": 2,

Extensions

Apply these you use the following extensions:

"errorLens.borderRadius": "4px",
"errorLens.margin": "2ch",
"errorLens.messageBackgroundMode": "message",
"errorLens.padding": "1px 4px",

"gitlens.currentLine.fontStyle": "italic",

Other

suggested-settings.json contains these and other theme- and layout-related settings for easy copy-and-pasting.

Acknowledgments

The syntax highlighting colors were inspired by the "zenwritten_light" Ghostty theme (mbadolato/iTerm2-Color-Schemes) which was in turn taken from mcchrish/zenbones.nvim.

The file icon theme uses the Seti UI icons (jesseweed/seti-ui).

Found a bug or have a request? Please open an issue.