sassy

Write themes like a human

Without Sassy — raw VS Code JSON

{
  "editor.background": "#1e1e1e",
  "editor.foreground": "#e6e6e6",
  "statusBar.background": "#002e63",
  "panel.background": "#1a1a1a",
  "sideBar.background": "#252526",
  "activityBar.background": "#333333",
  "tab.activeBackground": "#1e1e1e",
  "tab.inactiveBackground": "#2d2d2d",
  "focusBorder": "#007fd4",
  "errorForeground": "#f44747"
}

With Sassy — structured, reusable, just like you

palette:
  white: "#e6e6e6"
  black: rgb(5, 5, 5)
  blue: oklch(0.6929 0.1647 253.96 / 95%)
  red: css(tomato)

vars:
  accent: $$blue
  std:
    fg:
      base: $$white
    bg:
      base: $$black
      panel: lighten($(std.bg), 15)
      panelLighter: lighten($std.bg.panel, 15)
      accent: darken($(accent), 70)
    outline: fade($(accent), 30)

theme:
  colors:
    editor:
      background: $(std.bg.panel)
      foreground: $(std.fg.base)
    panel:
      background: $(std.bg.panelLighter)
    statusBar:
      background: $(std.bg.accent)
    focusBorder: $(std.outline)

Express yourself

Semantic Variables

Name your colours by what they mean, not what they look like. Change one value and watch it cascade through your entire theme.

Colour Functions

Derive shades with lighten(), darken(), fade(), mix(), and more. Powered by Culori for perceptually accurate results.

Resolve & Debug

Trace any colour from expression to final hex. See exactly how variables chain, where functions apply, and why a value resolved the way it did.

Any Colour Space

Hex, RGB, HSL, OKLCH, CSS named colours — use whatever makes sense. Sassy converts everything to hex for VS Code.

Built-in Linting

Catch duplicate scopes, undefined variables, unused definitions, and precedence issues before they become visual bugs.

Watch Mode

Live rebuilds on save. Smart hash-based output skipping. Point —output-dir at your extensions folder and iterate instantly.

Pick your path

Quick Start

Build your first theme from scratch in seven short pages. No experience required. Start here

Diving Deeper

Imports, design systems, multiple themes, advanced colour functions, linting, and debugging. Explore

Reference

Complete specifications for every feature, function, CLI command, and API class. Browse

Hacking

Architecture internals, compilation pipeline, extending Sassy with new functions and output formats. Dig in