A dark theme modeled on the built-in Dark+ theme, recolored with the Evinced brand palette and tuned so every piece of text meets WCAG 2.1 AA (≥ 4.5:1) contrast against its background.
Open the Extensions view (Cmd/Ctrl+Shift+X) and search Evinced Dark, or run Preferences: Color Theme → Browse Additional Color Themes… from the Command Palette and search for "Evinced".
Download the packaged extension directly from the repo:
- Direct download: evinced-dark-theme-1.0.0.vsix
Then install it from the command line:
code --install-extension evinced-dark-theme-1.0.0.vsix…or in the GUI: Extensions view → ⋯ menu → Install from VSIX… → select the file.
Activate it via Preferences: Color Theme → Evinced Dark.
Dark+ uses #1E1E1E. This theme darkens slightly into the Evinced navy family while keeping the same low-glare feel:
| Surface | Color |
|---|---|
| Editor | #0A1322 (darkened Primary navy #1B3050) |
| Side bar / panels | #070E1B |
| Activity bar | #050A14 |
| Status bar | #111D31 |
Saturated brand colors that fell just under 4.5:1 on the dark background were lightened along their own hue until they passed. Everything below is verified AA on the editor background.
| Role | Color | Source | Contrast |
|---|---|---|---|
| Default text | #D4DCE6 |
tint of Neutral #F1F2F5 |
13.4:1 |
| Comments | #74A98F |
desaturated Success #1CA958 |
6.9:1 |
| Strings | #F36725 |
Severity orange | 6.0:1 |
| Numbers / constants | #F3A825 |
Secondary amber | 9.2:1 |
| Keywords / storage | #5193E6 |
tint of Primary blue #2578E0 |
5.9:1 |
| Control flow (if/for/return) | #F5379F |
tint of Primary magenta #F20587 |
5.3:1 |
| Types / classes | #4CBEDC |
Secondary cyan | 8.6:1 |
| Functions / methods | #B968C7 |
Primary lavender | 5.2:1 |
| Variables / properties | #A9C7EE |
tint of Primary blue | 10.7:1 |
| Operators / punctuation | #B8C2CF |
Neutral | 10.3:1 |
| Errors / invalid | #E05E5E |
tint of Error #DC4C4C |
5.3:1 |
| Added / success (git) | #1CA958 |
Success green | 6.1:1 |
UI accents use the brand directly: focus/cursor in cyan #4CBEDC, badges in Evinced pink #A8146A (white text, 7:1), buttons in blue #1A5CC0 (white text, 6.3:1). The full severity ramp (#801A56 → #BF263B → #F36725 → #F3A825) drives the status-bar debugging state, merge/diff, and chart colors.
The syntax colors in context — TypeScript, HTML/JSX, and Markdown on the real editor background:
Each syntax token color as a swatch and text sample, with its measured contrast ratio:
Note
For the full interactive version — including all workbench/UI colors with live contrast badges — open preview.html in a browser.