Backend Themes logo

Backend Themes

48 VS Code themes built from the brand colors of Django, FastAPI, Rails, Laravel, Symfony, Spring, NestJS and ASP.NET Core.
Classic, Pastel and native High Contrast variants — every palette checked for color-blind safety.

Write Django all day? Take the Django green with you. Drop into a Spring service on Friday? Switch the editor with it. Every theme is derived from a single framework accent color, applied consistently across the editor chrome, the terminal ANSI palette and the syntax tokens — so the whole window reads as one deliberate palette instead of a logo color bolted onto a default theme.

Themes

Framework	Accent	Classic	Pastel	High Contrast
Django	`#44B68A`	Django Dark · Django Light	Django Pastel Dark · Django Pastel Light	Django High Contrast Dark · Django High Contrast Light
FastAPI	`#00998B`	FastAPI Dark · FastAPI Light	FastAPI Pastel Dark · FastAPI Pastel Light	FastAPI High Contrast Dark · FastAPI High Contrast Light
Rails	`#FF2E2E`	Rails Dark · Rails Light	Rails Pastel Dark · Rails Pastel Light	Rails High Contrast Dark · Rails High Contrast Light
Laravel	`#FF3024`	Laravel Dark · Laravel Light	Laravel Pastel Dark · Laravel Pastel Light	Laravel High Contrast Dark · Laravel High Contrast Light
Symfony	`#79879B`	Symfony Dark · Symfony Light	Symfony Pastel Dark · Symfony Pastel Light	Symfony High Contrast Dark · Symfony High Contrast Light
Spring	`#6CB13E`	Spring Dark · Spring Light	Spring Pastel Dark · Spring Pastel Light	Spring High Contrast Dark · Spring High Contrast Light
NestJS	`#E65173`	NestJS Dark · NestJS Light	NestJS Pastel Dark · NestJS Pastel Light	NestJS High Contrast Dark · NestJS High Contrast Light
ASP.NET Core	`#8C73E3`	ASP.NET Core Dark · ASP.NET Core Light	ASP.NET Core Pastel Dark · ASP.NET Core Pastel Light	ASP.NET Core High Contrast Dark · ASP.NET Core High Contrast Light

Light and Pastel Light variants darken the accent (Django #308263, Spring #4E802D, FastAPI #008578) so it still holds its contrast on a light background — same identity, correct weight.

Which variant is for you?

Variant	Background	Best for
Classic	`#1E1E1E` / `#FFFFFF`	The familiar VS Code base, re-accented in your framework's color. Full saturation, maximum brand recognition.
Pastel	Tinted neutrals (`#1D2325` / `#F9FCFD`)	Long sessions. Desaturated token colors on a softly tinted background — quieter, easier on tired eyes.
High Contrast	`#000000` / `#FFFFFF`	Bright rooms, projectors, and anyone who needs the contrast. Registers as a real `hc-black` / `hc-light` theme, with borders on every control.

Install

From the Marketplace — search Backend Framework Themes in the Extensions view (Ctrl+Shift+X / Cmd+Shift+X) and hit Install.

From Quick Open — press Ctrl+P / Cmd+P and run:

ext install StraightRight.backend-themes

From the CLI:

code --install-extension StraightRight.backend-themes

Pick a theme

Ctrl+K Ctrl+T (Cmd+K Cmd+T on macOS)
Type your framework — django, fastapi, rails, laravel, symfony, spring, nestjs, asp
Arrow through the results to live-preview each one, then Enter

Or set it directly in your settings.json:

{
  "workbench.colorTheme": "Django Pastel Dark"
}

Because the High Contrast variants register natively as hc-black and hc-light, VS Code will also offer them automatically when you turn on the system-level high contrast setting.

Accessibility

Accessibility drove the palette design, not a pass at the end:

Color-blind safe. Every pair of syntax token colors stays distinguishable under normal, protanopic and deuteranopic vision — so keywords never collapse into strings for a red-green color-blind reader.
Lightness floors. Light themes hold a perceptual lightness floor of L* ≥ 28 (≥ 18 for High Contrast), so no token color sinks toward an indistinct near-black.
WCAG AAA. The High Contrast variants meet a 7:1 contrast ratio, and style every border, focus ring and control outline that the hc-* base themes expect.

Settings

Comments render in italic by design. To turn that off, override it in your own settings:

{
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      { "scope": "comment", "settings": { "fontStyle": "" } }
    ]
  }
}

Want to nudge a single color without forking the theme? Scope a customization to the theme by name:

{
  "workbench.colorCustomizations": {
    "[Laravel Dark]": {
      "editor.background": "#191919"
    }
  }
}

Development

The themes are plain JSON — no build step.

git clone https://github.com/StraightRight/backend-themes backend-themes
code backend-themes

Press F5 to launch the Extension Development Host, then Ctrl+K Ctrl+T in the new window to try your changes. Edits to any file in themes/ apply live.

To package a .vsix locally:

npx @vscode/vsce package

Contributing

Issues and pull requests are welcome — especially:

Contrast or color-blindness regressions you spot in practice
Workbench colors that a theme hasn't styled yet
New frameworks worth adding

When changing a color, please keep the accessibility guarantees above intact and note in the PR which variants you checked.

Changelog

See CHANGELOG.md.

License

Released under the MIT License.

If a theme makes your editor feel like home, a review on the Marketplace helps other people find it. ⭐