EKKL3S1A Themes
Version 0.0.2 · Changelog
A collection of four handcrafted dark themes for Visual Studio Code, optimised for Angular, TypeScript, RxJS, and HTML development.
Themes
🍷 Burgundy Night
A deep, moody dark theme built around rose and burgundy tones. Warm and elegant, ideal for long coding sessions.
Classes, decorators, RxJS, signals, async
Angular templates, bindings, pipes
Types, interfaces, enums
- Primary accent: Rose
#E04F7B
- Strings: Soft pink
#FFC2D7
- Types / Classes: Lavender
#D2A8FF
- RxJS / Async: Mint green
#7FD1AE
- Keywords: Rose
#E04F7B
- Numbers / Constants: Gold
#EBCB8B
💜 Purple Pink (Dark)
A vibrant dark theme combining deep purples with hot pink accents. High contrast and energetic.
Classes, decorators, RxJS, signals, async
Angular templates, bindings, pipes
Types, interfaces, enums
- Primary accent: Hot pink
#FF4DB8
- Strings: Soft pink
#FF7ACD
- Types / Classes: Light purple
#C4B5FD
- Functions: Soft purple
#A78BFA
- Keywords: Deep purple
#A855F7
- Numbers / Constants: Gold
#FFD166
🩵 Teal Turquoise
A cool, refreshing dark theme built around teal and turquoise tones with green and blue highlights.
Classes, decorators, RxJS, signals, async
Angular templates, bindings, pipes
Types, interfaces, enums
- Primary accent: Teal
#2DD4BF
- Strings: Light teal
#7AE7DA
- Types / Classes: Soft purple
#A78BFA
- Functions: Green
#34D399
- Keywords: Teal
#2DD4BF
- Numbers / Constants: Amber
#FBBF24
🖖 Star Trek: LCARS
A distinctive dark theme inspired by the iconic LCARS (Library Computer Access/Retrieval System) interface from Star Trek. Features warm golds and oranges with blue accents on a deep space background.
Classes, decorators, RxJS, signals, async
Angular templates, bindings, pipes
Types, interfaces, enums
- Primary accent: Orange gold
#AB7130
- Strings: Cream
#F1DABF
- Types / Classes: Light blue
#4A95B8
- Functions: Blue
#206383
- Keywords: Red
#FF7777
- Numbers / Constants: Gold
#DFAF79
Requirements
- Visual Studio Code
1.120.0 or higher
- Recommended: enable semantic highlighting in your settings (see Recommended Settings)
Tested Languages
| Language |
Support |
| TypeScript / JavaScript |
✅ Full semantic + token colours |
| Angular Templates (HTML) |
✅ Bindings, interpolation, directives, signals |
| HTML |
✅ Tags, attributes, values |
| SCSS / CSS |
✅ Properties, values, selectors |
| JSON / JSONC |
✅ Keys, strings, numbers |
| Markdown |
✅ Headings, code blocks, links |
Features
All four themes include full support for:
- Semantic highlighting — precise token colours for TypeScript, JavaScript, HTML, CSS/SCSS
- Angular templates — interpolation
{{ }}, property bindings [value], event bindings (click), structural directives *ngIf / *ngFor
- Angular Signals —
signal(), computed(), effect()
- RxJS operators —
map, switchMap, mergeMap, tap, filter, catchError, exhaustMap
- Bracket pair colourisation — 6-depth colour nesting with matching pair guides
- Terminal colours — consistent ANSI colour palette per theme
Installation
From a .vsix file
Requires vsce: npm install -g @vscode/vsce
Package the extension:
vsce package
Install the generated .vsix:
code --install-extension ekkl3s1a-themes-0.0.1.vsix
From the VS Code UI
- Open VS Code.
- Go to Extensions (
Ctrl+Shift+X).
- Click the
··· menu → Install from VSIX…
- Select the
.vsix file.
Activating a Theme
- Open the Command Palette (
Ctrl+Shift+P).
- Run Preferences: Color Theme.
- Select one of:
Burgundy NightPurple Pink (Dark)Teal TurquoiseStar Trek: LCARS
Recommended Settings
For the best experience, add the following to your settings.json:
{
"editor.semanticHighlighting.enabled": true,
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": "active"
}
Enjoy!
| |
