uRadical Themes

Made by uRadical · Report an issue

A set of VS Code color themes built from the uRadical brand palette — vibrant and pastel variants, in both light and dark. Every theme draws from the same five brand colors so switching between them feels like one identity at different brightness, not four unrelated themes.

Brand palette

Role	Color	Hex
Primary	Navy Blue	`#0C1A50`
Secondary	Sky Blue	`#5DB1FF`
Accent	Purple	`#9F72E1`
Accent	Pink	`#F659A8`
Accent	Gold	`#E1C631`

The brand uses a vibrant gradient flowing blue → purple → pink → gold. That gradient is the source for every accent in these themes.

The four themes

uRadical Dark

Deep navy canvas with the full vibrant gradient for syntax.

uRadical Dark

uRadical Light

Crisp near-white canvas; accents are darkened so text stays readable on white.

uRadical Light

uRadical Pastel Dark

A softer, lifted navy with desaturated pastel accents — low contrast, comfortable for long sessions.

uRadical Pastel Dark

uRadical Pastel Light

Warm lavender-tinted off-white with muted, gentle tints of the brand colors.

uRadical Pastel Light

Syntax mapping

The role → color mapping is identical across all four themes; only the exact shade shifts to suit each background.

Token role	Brand color	Dark	Light	Pastel Dark	Pastel Light
Functions, properties, links	Sky Blue	`#5DB1FF`	`#1E7FD6`	`#8FCBFF`	`#5B8FCF`
Keywords, storage	Purple	`#9F72E1`	`#7A45C9`	`#C2A6EE`	`#9277C4`
Types, classes	Purple (lt)	`#C2A6EE`	`#9460D6`	`#D4BFF3`	`#A78DD2`
Constants, numbers, tags, this	Pink	`#F659A8`	`#D2348A`	`#FB97C7`	`#C76B9E`
Strings, attributes, code spans	Gold	`#E1C631`	`#8A6A0C`	`#ECD877`	`#7E6A1E`
Plain identifiers	Navy / fg	`#D6DCF2`	`#0C1A50`	`#CBD2E8`	`#3D4468`

On gold: the literal brand gold (#E1C631) is essentially illegible as text on white, so the light themes use a darker gold-derived shade for strings. The true gold still appears on the light themes in find-match highlights and gutter markers, where it sits on tinted backgrounds.

Each theme also styles the full workbench — editor, sidebar, tabs, status bar, terminal ANSI palette, git decorations, and bracket-pair colorization.

Try it without installing

Open this folder in VS Code: code vscode-uradical-themes
Press F5 to launch an Extension Development Host.
In the new window: Cmd/Ctrl+K Cmd/Ctrl+T and pick a uRadical theme.

Install locally

Copy the folder into your VS Code extensions directory, then reload the window:

cp -r uradical-themes ~/.vscode/extensions/uradical-themes-1.0.0

Package as a .vsix

npm install -g @vscode/vsce
cd vscode-uradical-themes
vsce package

This produces uradical-themes-1.0.0.vsix, installable via Extensions → ⋯ → Install from VSIX… or:

code --install-extension uradical-themes-1.0.0.vsix

Project layout

vscode-uradical-themes/
├── package.json                 # extension manifest (registers the 4 themes)
├── README.md
├── assets/
│   ├── icon.svg / icon.png      # marketplace icon (brand gradient "u")
│   ├── banner.svg / banner.png  # gallery banner
│   └── preview-*.svg / .png     # per-theme code previews (generated)
├── scripts/
│   └── generate-previews.mjs    # regenerates previews from the theme files
└── themes/
    ├── uradical-dark-color-theme.json
    ├── uradical-light-color-theme.json
    ├── uradical-pastel-dark-color-theme.json
    └── uradical-pastel-light-color-theme.json

The previews are generated directly from the theme JSON, so they can never drift from the actual colors. To regenerate after editing a theme:

node scripts/generate-previews.mjs
# then convert to PNG, e.g.
cd assets && for p in preview-*.svg; do rsvg-convert -z 2 "$p" -o "${p%.svg}.png"; done