iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Themes & Fonts

By · Reviewed & last updated · Part of VS Code Tutorial

VS Code themes: colour themes, icon themes, fonts, and how to build or fork a theme that fits the way you read code.

VS Code — themes

EXAMPLE
# ===== Switch themes =====
# Command Palette -> 'Preferences: Color Theme'
# Or: settings.json
{
  "workbench.colorTheme": "Default Dark Modern",
  "workbench.iconTheme": "material-icon-theme"
}

# ===== Bundled themes you should try =====
# Dark themes: Default Dark Modern, Monokai, Dark+, Tomorrow Night, Solarized Dark
# Light themes: Default Light Modern, Quiet Light, Solarized Light
# Popular community: One Dark Pro, Dracula, Night Owl, GitHub Light/Dark, Catppuccin

# ===== Icon themes =====
# Material Icon Theme, vscode-icons, Seti UI (built-in), Catppuccin Icons

# ===== Fonts =====
# Editor settings:
{
  "editor.fontFamily": "JetBrains Mono, Fira Code, Cascadia Code, Menlo, monospace",
  "editor.fontSize": 13,
  "editor.fontLigatures": true,
  "editor.fontVariations": true
}

# Popular monospace fonts (with ligatures):
#   JetBrains Mono, Fira Code, Cascadia Code, Iosevka, Monaspace, IBM Plex Mono

# ===== Customise specific colours (without forking) =====
{
  "workbench.colorCustomizations": {
    "editor.background": "#1a1b1e",
    "editor.foreground": "#dcdcdc",
    "editor.lineHighlightBackground": "#2a2b2e",
    "editorCursor.foreground": "#7aa2f7",
    "editorBracketHighlight.foreground1": "#f7768e"
  },
  "editor.tokenColorCustomizations": {
    "comments": "#6b7280",
    "strings": "#a6e3a1"
  }
}

# Apply per-theme:
{
  "workbench.colorCustomizations": {
    "[Default Dark Modern]": {
      "editor.background": "#1a1b1e"
    }
  }
}

# ===== Semantic highlighting =====
{
  "editor.semanticHighlighting.enabled": true,
  "editor.semanticTokenColorCustomizations": {
    "enabled": true,
    "rules": {
      "function": { "foreground": "#7aa2f7" },
      "variable.readonly": { "foreground": "#bb9af7" }
    }
  }
}

# ===== Build your own theme =====
# Use Yeoman + the theme generator:
npm install -g yo generator-code
yo code
# Pick 'New Color Theme' -> 'No, start fresh' or import a TextMate theme.
# Edit theme.json under themes/.

# Iterate quickly with 'Developer: Inspect Editor Tokens and Scopes' to see what token you are styling.

# ===== Sharing across machines =====
# Settings Sync syncs colour theme + customisations.
# Or pin via Settings Sync ignored list if you want different themes per machine.

# ===== Readability tips =====
# - High contrast for the line you are editing (lineHighlightBackground)
# - Distinct comment colour (often muted)
# - Bracket-pair colours that pop without clashing
# - Cursor colour visible on every background
# - Test in both bright daylight + dark room

# ===== Patterns to internalise =====
# - Pick a theme you can sit with for hours, not just 'popular'
# - Customise the few colours that bug you instead of forking
# - Pair theme with a monospace font you like
# - Keep colourCustomizations in user (or workspace) settings.json — version-able

# ===== Pitfalls =====
# - Themes that hide errors / warnings (red on red)
# - Too-low contrast on selection / line highlight
# - Mixing several themes for different file types -> visual whiplash
# - Custom theme that ignores extensions' semantic tokens

Why it matters

A theme is part of the editor ergonomics. Pick one that reads well for you, customise the line highlight + cursor + bracket pairs if needed, and pair it with a good monospace font. Settings Sync carries it across machines; small tweaks beat forking a whole theme.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
// Pick a theme:  Ctrl/Cmd + K, then Ctrl/Cmd + T.
// Popular themes: One Dark Pro, GitHub, Dracula, Solarized, Catppuccin.
// Programming fonts: JetBrains Mono, Fira Code, Cascadia Code, Iosevka.
Try it Yourself »

Discussion

Loading…