Frontend Themes logo

Frontend Themes

26 VS Code themes built from the brand colors of Angular, React, Vue and Svelte.
Classic, Pastel and native High Contrast variants — every palette checked for color-blind safety.

Work in Angular all day? Take the Angular red with you. Jump into a React codebase 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
Angular	`#DD0031`	Angular Dark · Angular Light	Angular Pastel Dark · Angular Pastel Light	Angular High Contrast Dark · Angular High Contrast Light
React	`#61DAFB`	React Dark · React Light	React Pastel Dark · React Pastel Light	React High Contrast Dark · React High Contrast Light
Vue	`#42B883`	Vue Dark · Vue Light	Vue Pastel Dark · Vue Pastel Light	Vue High Contrast Dark · Vue High Contrast Light
Svelte	`#FF3E00`	Svelte Dark · Svelte Light	Svelte Pastel Dark · Svelte Pastel Light	Svelte High Contrast Dark · Svelte High Contrast Light

Plus two bonus themes built on Angular's modern brand gradient (#F637E3 → #8514F5 → #E90464):

Angular Gradient Dark
Angular Gradient Light

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 (e.g. `#251D1F`, `#FDF9FA`)	Long sessions. Desaturated accents on a background subtly tinted toward the brand hue — quieter, warmer, 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.
Angular Gradient	`#0F0F11` / `#FFFFFF`	Angular's current magenta-to-violet identity, for people who want the new look rather than the classic red.

Install

From the Marketplace — search Frontend 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.frontend-themes

From the CLI:

code --install-extension StraightRight.frontend-themes

Pick a theme

Ctrl+K Ctrl+T (Cmd+K Cmd+T on macOS)
Type your framework — angular, react, vue, svelte
Arrow through the results to live-preview each one, then Enter

Or set it directly in your settings.json:

{
  "workbench.colorTheme": "Vue 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": {
    "[Svelte Dark]": {
      "editor.background": "#191919"
    }
  }
}

Development

The themes are plain JSON — no build step.

git clone https://github.com/StraightRight/frontend-themes frontend-themes
code frontend-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. ⭐