VSCode Modern Theme

Author: fabrialberioThemes in extension: 2

Light and dark themes inspired by VSCode Modern themes.

GitHub

Color themes

Zed preview

macOS Zed window using this variant's theme style.

coding-thememain/zed

coding-theme

src

theme.rsM

palette.jsonU

main.rs

Cargo.tomlM

README.md

theme.rs

palette.json

src›theme.rs

FixSelections

//! Palette tokens for the Zed buffer.

use gpui::{Hsla, px};unused import: `px`

const MAX_LUM: f32 = 0.5;

#[derive(Clone, Debug)]

pub struct Palette { background: Hsla }

impl Palette {

pub fn is_dark(&self) -> bool {

self.background.l < MAX_LUM

}

}

fn main() {

let palette = Palette { background: Hsla::from(0x282c33) };

let fallback = true;

println!("{palette:#?}");

}

coding-theme

~/coding-theme on zed ❯ cargo run --release
   Compiling coding-theme v0.1.0 (/Users/zed/coding-theme)
    Finished `release` profile [optimized] target(s) in 4.82s
     Running `target/release/coding-theme`
theme: Palette { background: #ffffff, accent: #4078f2 }
❯ 

rust-analyzer12src/theme.rs

14:23LFRustUTF-8

colors

UI color keys from this variant's theme style.

key	HEX	RGB	RGBA
border
created
deleted
editor.background
editor.foreground
editor.gutter.background
editor.invisible
error
hidden
hint
ignored
info.background
modified
player.0.cursor
scrollbar.thumb.background
scrollbar.thumb.hover_background
tab.active_background
terminal.background
text
text.muted
toolbar.background
warning

syntax

Syntax capture colors from the theme style. Italic and bold are not listed — the preview above shows them in the code.

capture	HEX	RGB	RGBA
attribute
boolean
comment
constant
emphasis
emphasis.strong
function
keyword
link_text
link_uri
namespace
number
property
punctuation.list_marker
selector
selector.pseudo
string
string.escape
string.special
tag
title
type
variable

settings.json

Search for "VSCode Modern Theme" in the Zed extensions store, then paste the settings below.

{
  "theme": {
    "mode": "system",
    "light": "VSCode Modern Light",
    "dark": "VSCode Modern Dark"
  }
}

Theme file