Zenburn Dark Matter Theme
Zenburn token colors in different intensities and on different dark backgrounds to reduce eye strain.
Table of contents
- Zenburn token colors based skins
- Zenburn Dark Matter Preview Gallery
- All my Themes
- Fonts for coding
- Lastest Changelog for Zenburn Dark Matter
- About Zenburn based Themes
- About my PHP Script "VSCode Themes Master"
- Gratitude
- License
Zenburn token colors based skins
All the skins shown below are part of a suite designed to try to reduce visual fatigue while using Visual Studio Code.
The ultimate goal of the suite is to offer a good chance to find a theme that reduces disturbing elements and eye strain as much as possible.
However, attempts were made to leave error signals and selections clearly visible with moderate color contrasts.
Tip 1: The skins are quite similar but you can find the right color intensity based on the sRGB representation of your monitor and the sensitivity of your eyes to certain frequencies.
Tip 2: If you like versioning your code, try Version Boss! Version Boss is a free extension that simplifies versioning of script files. Download it at Marketplace.
Zenburn Dark Matter Preview Gallery
Anthracite (1 skin): Anthracite Gray Background and Cold, Desatured Token Colors
Cold (10 skins): Cold Gray Background and Cold Token Colors
Deep Sea (3 skins): Deep blue flat UI and Desatured Token Colors
EclipseDS (5 skins): Eclipse DevStyle Gray Background and Desatured Token Colors
Flat (10 skins): Flat Gray Background and Default Token Colos
Insomnia (8 skins): Flat Grayed UI and Satured Token Colors
Low Blue (1 skin): Low Blue Light on UI and Token Colors
Midnight (2 skins): Midnight Blue Background and Cold, Desatured Token Colors (Telegram X Midnight Theme)
Nadir (10 skins): Flat Grayed UI and Desatured Token Colors
Nirvana (10 skins): Low Blue Light only on Token Colors
Warm (10 skins): Warm Gray Background and Warm Token Colors
All my Themes
All my Themes on Marketplace.
Fonts for coding
The settings for the following fonts are correctly tested on a 24" monitor FullHD and 32" Monitor QHD. The indicated sizes are the minimum to obtain a clear display of the fonts.
Tip 1: Some fonts Weight property start from 300/400/500: values below these values has no effect. Others, instead, start from 100 but can be thiny and unreadable below size 12.
Tip 2: Some fonts have some variations of the same file (e.g. version with different line-height or letter "k" with no loop): when you install, the previous font file will be overwritten.
Tip 3: Rating is based on my personal edperience and taste. The evaluation method is based on the readability of the font to the size of 10 points or to the size of 12 points if, the latter, correspond to the size of 10 points of other fonts present in the selection.
So the fonts with rating 5 have these characteristics, the other evaluations indicate that the font is readable at a size greater than 10 but that they occupy more space and, consequently I will have fewer rows and columns per screen.
Those of you with vision problems should simply ignore my assessment, because the fonts listed are all valid.
| Font |
Size |
Weight |
Line Height |
Letter Spacing |
Ligatures |
Rating |
Download |
| Envy Code R |
12 |
500 |
16 |
0 |
- |
5 |
Download |
| Fantasque Sans Mono |
12 |
500 |
16 |
0 |
1 |
4 |
Download |
| Fira Mono |
10 |
400 |
14 |
0 |
- |
4 |
Download |
| FiraFlott |
10 |
400 |
14 |
0 |
1 |
4 |
Download |
| Hack |
10 |
500 |
14 |
0 |
- |
5 |
Download |
| Inconsolata |
12 |
400 |
16 |
0 |
- |
4 |
Download |
| Input Mono |
11 |
300 |
15 |
0 |
- |
4 |
Download |
| Input Mono Condensed |
11 |
300 |
15 |
0 |
- |
4 |
Download |
| Iosevka |
13 |
300 |
16 |
0 |
1 |
4 |
Download |
| PT Mono |
11 |
500 |
16 |
0 |
- |
4 |
Download |
| Source Code Pro |
12 |
400 |
16 |
0 |
- |
3 |
Download |
| Victor Mono |
12 |
400 |
16 |
0.1 |
1 |
4 |
Download |
// Some fonts need to be right set to be clearly legible:
// please, adjust these settings in "settings.json".
// --
// Note 1: "editor.fontLigatures" can be ever "true";
// Note 2: "editor.fontWeight" value must be written
// in quotation marks (e.g. "400") even if it is a numeric value!
"editor.fontSize": 10,
"editor.lineHeight": 14,
"editor.letterSpacing": 0,
"editor.fontWeight": "400",
"editor.fontLigatures": true,
"editor.fontFamily": "Hack, Victor Mono, Fira Mono, monotype",
Lastest Changelog for Zenburn Dark Matter
See full Changelog for previous versions.
Note: [Development] and [UI Manager] sections in Changelog are addressed to the developer to remind him of any important changes that occurred during the writing of the code and do not always concern improvements made to the extension or to the theme.
Version 1.1.122
- [
Theme] In Low Blue sub-theme, skin Moai was replaced by skin Obsidian;
- [
Theme] Added Obsidian skin to some sub-themes;
- [
Readme] Added big picture preview of a random skin of set;
- [
UI Manager] Added Quick Refresh for refresh page without regenerate Fake UI previews;
- [
Development] Generic code bug fix and improvements;
Version 1.1.114
- [
Theme] Some keywords changed;
- [
Readme] Some README.md corrections;
- [
Development] Improved function to get the harmonic colors;
- [
Development] Generic code bug fix and improvements;
Version 1.1.109
- [
Readme] Fixed bug in gallery with direct link of images preview;
- [
Development] The gray-scale determination criteria have been modified to try to improve the readability of the text on some background colors in themes.
- [
Development] Improved function to get the grayscale (using HSL instead of the common RGB to gray) of a background color to better evaluate the color of the text to be used on it.
About Zenburn based Themes
Zenburn variants derives from the combination of Eclipse Zenburn Theme and Eclipse DevStyle Extension.
These variants has a dark gray cold/flat/warm backgrounds (based on the theme you installed), desaturated token colors (for code) and experimental Nirvana (Low Blue Light only on token colors) and Low Blue (applied to all main set of skins and token colors) with some exceptions:
- some icons cannot seems to be filtered;
- images in extensions README.md and in image viewer cannot be filtered.
About my PHP Script "VSCode Themes Master"
The Zenburn Cold Gray prototype was initially a manual editing of the VSCode settings and some tokens, based on the Zenburn theme porting from Eclipse IDE (see below the thanks, to the paragraph Gratitude) in conjunction with the background of the DevStyle extension for Eclipse IDE.
Realizing that, to optimize some aspects of the theme, I would have had to evaluate an infinite series of colors, I decided that I would have done first to build mathematical functions for optimizing and correcting saturation / brightness / color / transparency / contrast of configurations already consolidated.
Specifically, I created VSCode Themes Master in PHP (localhost script, not distributed) that allows you to set the basic colors of the skin, on which they are calculated, with a parametric and configurable reference system for each variant, all the others interface colors, applying, at the same time, tonal variations both on the interface and on the colors of the tokens.
My personal need to optimize the colors of the VScode interface to make it uniform to the Eclipse IDE interface (Zenburn + DevStyle), has led me to notice that, despite almost all my monitors are from the same manufacturer and despite having selected the temperature color on the sRGB standard (which therefore has brightness, contrast and range set to specific values), the visual impact, on the same theme variant, is different: more saturated and warm on some and more cold and desaturated on others .
VSCode Themes Master allows me to build all the files necessary for the publication of the theme and, for this reason, it was easy (but not so easy) for me to test and distribute single themes with many color variations of the UI and tonal variations of the tokens for the code, to try to standardize the display between monitors with "different" sRGB representations (for example: using a cold theme on monitors with a tendency to warm colors and vice versa, or a flat theme that, in some cases, seems to be the correct compromise between extremes).
Starting from VSCode Themes Master V. 1.2.40, I can generate themes, not only from TextMate files, but also using the export of token colors from Visual Studio Code in JSON format.
Gratitude
Zenburn based Themes: many thanks to Ryan Olson and Zenburn . You can download the original porting by Ryan Olson, on which the first version of this variant's Token Colors were based, at Marketplace: Zenburn Theme by Ryan Olson.
License
MIT
