vscode-theme-porcelain

Inspired by

• Interface contrast from Vitesse Theme
• Hue of the token coloring from Boxy Theme Kit
• Palette modified from Catppuccin
• Color levels of foreground and background from Nuxt UI.

Usage

// .vscode/setting.json
{
  "window.autoDetectColorScheme": true,
  "workbench.preferredLightColorTheme": "Porcelain Light",
  "workbench.preferredDarkColorTheme": "Porcelain Dark",
}

Recommendation

Icon Theme

• File Icon Theme: Catppuccin (Latte for light, Mocha for dark)
• Product Icon Theme: Carbon

// .vscode/setting.json
{
  "workbench.iconTheme": "catppuccin-latte",
  "workbench.productIconTheme": "icons-carbon"
}

Additionally, we recommend using Dynamic Icon Theme to change tour icon theme dynamically.

// .vscode/setting.json
{
  "icontheme.darkIconTheme": "catppuccin-mocha",
  "icontheme.lightIconTheme": "catppuccin-latte"
}

Font

I use Fira Code with ligatures enabled, but these fonts are also quite interesting:

• Annotation Mono: A monospaced font with handwriting-style characters.
• Input Mono: A monospaced font with a modern look.

Terminal

Porcelain themes include terminal colors. It looks fantastic when used with Starship.