VSCode Light Modern Theme

Author: Xiangpeng Hao (adapted from Microsoft's VSCode theme)Themes in extension: 1

A port of Visual Studio Code's Light Modern theme for Zed

GitHub

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
background
border
created
deleted
editor.active_line_number
editor.background
editor.document_highlight.bracket_background
editor.foreground
editor.invisible
editor.line_number
elevated_surface.background
error
error.background
error.border
hint
hint.background
hint.border
ignored
info
info.background
info.border
modified
pane_group.border
pane.focused_border
panel.background
panel.foreground
panel.indent_guide
panel.indent_guide_active
panel.indent_guide_hover
player.0.background
player.0.cursor
player.0.selection
player.1.background
player.1.cursor
player.1.selection
search.match_background
status_bar.background
status_bar.foreground
tab_bar.background
tab.active_background
tab.active_foreground
tab.inactive_background
tab.inactive_foreground
terminal.ansi.background
terminal.ansi.black
terminal.ansi.blue
terminal.ansi.bright_black
terminal.ansi.bright_blue
terminal.ansi.bright_cyan
terminal.ansi.bright_green
terminal.ansi.bright_magenta
terminal.ansi.bright_red
terminal.ansi.bright_white
terminal.ansi.bright_yellow
terminal.ansi.cyan
terminal.ansi.green
terminal.ansi.magenta
terminal.ansi.red
terminal.ansi.white
terminal.ansi.yellow
terminal.background
terminal.bright_foreground
terminal.dim_foreground
terminal.foreground
text
text.accent
text.muted
title_bar.background
title_bar.foreground
title_bar.inactive_background
title_bar.inactive_foreground
toolbar.background
warning
warning.background
warning.border

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
comment.doc
constant
constructor
emphasis
emphasis.strong
enum
function
keyword
keyword.control
lifetime
link_text
link_uri
number
operator
property
punctuation
punctuation.bracket
punctuation.delimiter
punctuation.list_marker
punctuation.special
string
string.escape
string.regex
string.special
string.special.symbol
tag
text.literal
title
type
variable
variable.special

settings.json

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

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

Theme file