Harmonized
Solarized light and dark themes for VS Code, refined to be more readable and consistent with each other.
Harmonized starts from the Solarized themes that ship with VS Code and keeps their palette, but fixes what makes them feel uneven: the light and dark themes treat the same things differently, and the editor text is low in contrast. Each theme also comes in a high-contrast version and an accented version.
What's different from VS Code's Solarized
- Light and dark match. Both themes override the same UI colors and add the same syntax rules, so switching between them changes the palette, not the behavior.
- More readable text. Editor text is darker in light (
#333333) and brighter in dark (#bbbbbb) than stock Solarized.
- Consistent accents. Focus borders, buttons, and badges use Solarized yellow in light and blue in dark. Both themes use a red cursor and a warm yellow selection.
- Consistent font styles. Comments, modifiers, and similar tokens are italic, and a few kinds of tokens are bold, the same way in both themes.
- More syntax colors where they help, such as regular expressions, escape sequences, CSS pseudo-selectors, inherited classes, arrow functions, and variable definitions.
- Kept current with VS Code. Colors that VS Code's own Solarized themes add for newer parts of the UI are pulled in with each update.
Themes
| Theme |
Description |
| Harmonized light / Harmonized dark |
The main themes. |
| Harmonized light (hc) / Harmonized dark (hc) |
Higher contrast, with lighter or darker backgrounds. Useful on dim displays or in bright rooms. |
| Harmonized light _ / Harmonized dark _ |
Accented: a colored status bar (blue in light, cyan in dark). |
| Harmonized light (hc) _ / Harmonized dark (hc) _ |
High contrast and accented. |
High-contrast and accented previews
Recommended settings
To switch between light and dark with your OS appearance:
"window.autoDetectColorScheme": true,
"workbench.preferredLightColorTheme": "Harmonized light",
"workbench.preferredDarkColorTheme": "Harmonized dark"
Building
The themes are generated from copies of VS Code's Solarized themes in src/solarized/, pinned to the VS Code commit in src/solarized/source.json.
npm install
npm run build # regenerate themes/ and check them
npm run update-solarized # pull the latest Solarized from VS Code, then rebuild and review the diff
Credits
License
MIT
