Adapt Colors for VS Code
A dynamic dark theme that derives its entire color palette from a single accent color. Adapt Colors detects your system accent color and generates a cohesive theme using color theory — similar to adaptive theming in modern desktop environments.
Screenshots
Features
- System Accent Detection — Automatically reads your system accent color on Linux (KDE Plasma, GNOME/GTK), macOS, and Windows
- Color Theory Palette — Generates all syntax and UI colors from your accent using hue rotation, complementary/analogous/triadic relationships, and perceptual adjustments
- Live Updates — Watches for system accent changes and updates the theme without reloading
- Custom Accent Override — Set any hex color as your accent if you prefer not to use the system default
- Backdrop Blur Effects — Optional translucent UI with backdrop blur on menus, widgets, sidebars, and panels (requires VS Code reload)
- Wolfram Language Support — Scoping-aware highlighting for Module, Block, With variables and shadowed/unused identifiers
Getting Started
- Install the extension from the VS Code Marketplace
- Open the Command Palette (
Ctrl+Shift+P / Cmd+Shift+P)
- Select Preferences: Color Theme
- Choose Adapt Dark
The theme generates automatically based on your system accent color.
Commands
All commands are available from the Command Palette (Ctrl+Shift+P / Cmd+Shift+P):
| Command |
Description |
Adapt Colors: Refresh from System Accent |
Manually re-detect and apply the system accent |
Adapt Colors: Set Custom Accent Color |
Override with a custom hex color (or clear to use system) |
Adapt Colors: Enable Blur Effects |
Inject backdrop blur into VS Code's UI |
Adapt Colors: Disable Blur Effects |
Remove blur injection and restore default UI |
Adapt Colors: Toggle Blur Effects |
Toggle blur on/off |
Configuration
| Setting |
Type |
Default |
Description |
adaptTheme.accentColor |
string |
"" |
Custom hex color override (e.g., #3daee9). Leave empty for system accent. |
adaptTheme.watchSystemAccent |
boolean |
true |
Automatically update when the system accent changes |
adaptTheme.watchInterval |
number |
5000 |
Polling interval for system accent changes (ms) |
adaptTheme.blurEnabled |
boolean |
false |
Enable backdrop blur on transparent UI elements (requires reload) |
adaptTheme.blurAmount |
number |
20 |
Blur radius in pixels for floating UI elements (4–50) |
Blur Effects
When blur is enabled, menus, autocomplete, hover widgets, and other floating UI elements become translucent with a backdrop blur. This gives VS Code a modern, frosted-glass appearance.
How it works: The extension injects a CSS stylesheet and a small script into VS Code's workbench.html. This is the same approach used by other transparency/blur extensions. VS Code will display a "corrupt installation" warning — this is expected and harmless. Use the Disable Blur Effects command to fully revert the injection.
Transparency levels when blur is active:
- Floating elements (menus, widgets, dialogs): 40% opacity
- Panels and sidebars: 60% opacity
- Subtle elements: 75% opacity
How It Works
Accent Detection
The extension reads your system accent color from:
- KDE Plasma:
kdeglobals config file
- GNOME:
gsettings accent-color property
- GTK: CSS custom property definitions
- macOS: System preferences
- Windows: Registry accent color
Palette Generation
All syntax and UI colors are derived from the accent using HSL color space manipulation — hue rotation for semantic relationships, lightness/saturation adjustments for variants, and alpha blending for overlays.
Color Relationships
| Color |
Hue Offset |
Usage |
| Keyword |
0° |
Keywords, control flow, storage modifiers |
| Constant |
0° |
Language constants, booleans |
| Builtin Function |
0° |
Built-in / standard library functions |
| Defined Function |
-25° |
User-defined function names |
| Function |
-33° |
Function calls |
| Type |
+35° |
Types, classes, interfaces, properties |
| Operator |
-60° |
Operators, accessors, separators |
| Parameter |
+75° |
Function parameters, pattern variables |
| String |
-95° |
String literals |
| Number |
+280° |
Numeric literals |
| Brackets |
-75° to +125° |
Rainbow bracket pairs (6 levels) |
| Error |
Fixed #e88888 |
Error indicators |
| Warning |
Fixed #d9b878 |
Warning indicators |
| Success |
Fixed #88d888 |
Success / git added |
Theme Application
The generated theme includes:
- 200+ editor and UI color definitions
- TextMate token colors for syntax highlighting
- Semantic token colors for LSP-based highlighting
Requirements
- VS Code 1.85.0 or later
- For system accent detection: a supported desktop environment (KDE, GNOME, GTK, macOS, or Windows)
- Blur effects require write access to VS Code's installation directory
Known Issues
- When blur is enabled, VS Code shows a "corrupt installation" notification. This is cosmetic and does not affect functionality. Use Disable Blur Effects to revert.
- Dynamic updating is buggy. Some colors may require a window reload to update.
- On some Linux DEs without a system accent color, the extension falls back to a default blue accent.
License
MIT
