Watch Mode
Tweaking colours one build at a time gets old fast. Watch mode rebuilds your theme automatically whenever you save.
Start Watching
TERMINALnpx @gesslar/sassy build ocean.yaml --watch
Sassy monitors your theme file (and any imported files) for changes. Save ocean.yaml and the output regenerates instantly.
Smart Output
Sassy computes a SHA-256 hash of the output before writing. If nothing actually changed — say you saved without editing — it skips the write entirely. This avoids triggering unnecessary VS Code reloads when you're working with auto-reload extensions.
Useful Flags
--output-dir — Write the compiled theme to a specific directory instead of alongside the source file. Handy for writing directly into your VS Code extensions folder:
npx @gesslar/sassy build ocean.yaml --watch --output-dir ~/.vscode/extensions/ocean-theme/
--dry-run — Process the theme and report results without writing any files. Useful for validating your theme before committing changes.
npx @gesslar/sassy build ocean.yaml --dry-run
What You've Learned
Over these seven pages, you've built a complete VS Code dark theme using Sassy. Here's what you covered:
- Theme structure —
config,vars, andthemesections - Variables — named values with dot-path nesting
- Colour palette — raw colours and semantic aliases
- Colour functions —
lighten(),darken(),fade(),mix()for derived colours - Token colours — syntax highlighting with TextMate scopes
- UI styling — status colours, panels, inputs, and activity bar
- Watch mode — live rebuilds for rapid iteration
Next Steps
The Quick Start covered the fundamentals. There's more to explore:
- Imports — split large themes across multiple files
- Multiple themes — share a palette between light and dark variants
- Advanced colour functions — the full set of Culori-powered transformations
- Linting — catch duplicate scopes, undefined variables, and precedence issues
Head to the Diving Deeper section to keep going.