Please do not rely only on the preview images of this theme (they are of average quality), but try it. Especially if you work at night and for many hours, almost certainly, among all my skins, you will find the colors suitable to avoid eye strain.
Tip: the display name of theme is as follow: the first part (e.g.: Zenburn) is token colors name, the second (e.g.: Dark Matter) is the main related colors structure, the third (e.g.: Nadir) part of name is the background suite and UI main colors, last part (e.g.: Viserion) is simply the representation name for main foreground/highlights color.
Table of contents
- Zenburn token colors based skins
- Zenburn Dark Matter Preview Gallery
- Free Fonts for coding
- All my Themes
- Latest Changelog for Zenburn Dark Matter Theme
- About Token Colors
- 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 code version control and want to add PHPDoc / JSDoc (Documentor) data to your functions, try Version Boss! Version Boss is a free extension that simplifies versioning of scripting files. Download it at Marketplace.
Zenburn Dark Matter Preview Gallery
Anthracite (1 skin): Anthracite Gray Background and Cold, Desatured Token Colors
Cold (13 skins): Cold Gray Background and Cold Token Colors
Deep Sea (5 skins): Deep blue flat UI and Desatured Token Colors
EclipseDS (6 skins): Eclipse DevStyle Gray Background and Desatured Token Colors
Equinox (10 skins): Dark Night UI and Desatured Token Colors
Flat (13 skins): Flat Gray Background and Default Token Colos
Insomnia (9 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 (14 skins): Flat Grayed UI and Desatured Token Colors
Nirvana (11 skins): Low Blue Light only on Token Colors
Warm (13 skins): Warm Gray Background and Warm Token Colors
Free 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: Readability rating is based on the readability of the font to the size of 10px: the fonts with rating 5.0 have these characteristics, the other evaluations indicate that the font is readable at a size greater than 10px but that they occupy more space and, consequently you have fewer rows and columns per screen page. Some fonts at the size of 12px can have rating 4.5 / 5.0 because they occupy same visual space to the size of 10px of other fonts present in the selection with rating 5.0: anyway, at the right size (12px-14px), all fonts readability rating is 5.0/5.0.
Tip 2: 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 12pt. Note: the Weight value is the minimum value for readability, at the indicated size, on my monitor: you can find other setting more comfortable for your eyes.
Tip 3: When you go to download page you can find different variants of the same font but with same font name (e.g. version with different line-height or letter "k" with no loop): you cannot install all font variants because they have same font name in font manager: when you install a font variant, the previous font variant will be overwritten.
Tip 4: if available, install the fonts in OTF format.
Fonts Comparative Table and Downloads
Click on the name of font to download, and the script icon to go to optimal settings to copy/paste in your Settings.ini.
Optimal Settings
You can download the fonts and copy / paste settings below in your Settings.ini.
01 - Anonymous Pro⯆ [ Ø Ｔ ]
// Font: Anonymous Pro
"editor.fontFamily": "Anonymous Pro",
"editor.fontSize": 11,
"editor.lineHeight": 15,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "500",
"editor.fontLigatures": false,
|
02 - AverageMono⯆ [ Ｔ ]
// Font: AverageMono
"editor.fontFamily": "AverageMono",
"editor.fontSize": 12,
"editor.lineHeight": 18,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "500",
"editor.fontLigatures": false,
|
03 - B612 Mono⯆ [ Ｔ ]
// Font: B612 Mono
"editor.fontFamily": "B612 Mono",
"editor.fontSize": 11,
"editor.lineHeight": 15,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "500",
"editor.fontLigatures": false,
|
04 - CamingoCode⯆ [ Ø Ｔ ]
// Font: CamingoCode
"editor.fontFamily": "CamingoCode",
"editor.fontSize": 12,
"editor.lineHeight": 16,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "500",
"editor.fontLigatures": false,
|
05 - Cascadia Code⯆ [ ⇏ Ø Ｔ ]
// Font: Cascadia Code
"editor.fontFamily": "Cascadia Code",
"editor.fontSize": 11,
"editor.lineHeight": 15,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "500",
"editor.fontLigatures": true,
|
06 - Cascadia Mono⯆ [ Ø Ｔ ]
// Font: Cascadia Mono
"editor.fontFamily": "Cascadia Mono",
"editor.fontSize": 11,
"editor.lineHeight": 15,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "500",
"editor.fontLigatures": false,
|
07 - Code New Roman⯆ [ Ø Ｔ ]
// Font: Code New Roman
"editor.fontFamily": "Code New Roman",
"editor.fontSize": 12,
"editor.lineHeight": 16,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "500",
"editor.fontLigatures": false,
|
08 - Courier Prime Code⯆ [ Ø Ｔ ]
// Font: Courier Prime Code
"editor.fontFamily": "Courier Prime Code",
"editor.fontSize": 12,
"editor.lineHeight": 15,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "500",
"editor.fontLigatures": false,
|
09 - Cousine⯆ [ Ø Ｔ ]
// Font: Cousine
"editor.fontFamily": "Cousine",
"editor.fontSize": 12,
"editor.lineHeight": 16,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "400",
"editor.fontLigatures": false,
|
10 - DaddyTimeMono⯆ [ Ø ]
// Font: DaddyTimeMono
"editor.fontFamily": "DaddyTimeMono",
"editor.fontSize": 12,
"editor.lineHeight": 16,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "500",
"editor.fontLigatures": false,
|
11 - DejaVu Sans Code⯆ [ ⇏ Ø Ｔ ]
// Font: DejaVu Sans Code
"editor.fontFamily": "DejaVu Sans Code",
"editor.fontSize": 11,
"editor.lineHeight": 15,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "500",
"editor.fontLigatures": true,
|
12 - DejaVu Sans Mono⯆ [ Ø Ｔ ]
// Font: DejaVu Sans Mono
"editor.fontFamily": "DejaVu Sans Mono",
"editor.fontSize": 11,
"editor.lineHeight": 15,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "500",
"editor.fontLigatures": false,
|
13 - DejaVu Sans Mono - Bront⯆ [ ⇏ Ø ]
// Font: DejaVu Sans Mono - Bront
"editor.fontFamily": "DejaVu Sans Mono - Bront",
"editor.fontSize": 11,
"editor.lineHeight": 15,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "300",
"editor.fontLigatures": true,
|
14 - Envy Code R⯆ [ Ø Ｔ ]
// Font: Envy Code R
"editor.fontFamily": "Envy Code R",
"editor.fontSize": 11,
"editor.lineHeight": 14,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "500",
"editor.fontLigatures": false,
|
15 - Fantasque Sans Mono⯆ [ ⇏ Ø Ｔ ]
// Font: Fantasque Sans Mono
"editor.fontFamily": "Fantasque Sans Mono",
"editor.fontSize": 12,
"editor.lineHeight": 16,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "500",
"editor.fontLigatures": true,
|
16 - Fira Code⯆ [ ⇏ Ø Ｔ ]
// Font: Fira Code
"editor.fontFamily": "Fira Code",
"editor.fontSize": 11,
"editor.lineHeight": 15,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "300",
"editor.fontLigatures": true,
|
17 - Fira Code iScript⯆ [ ⇏ Ø Ｔ 𝒾 ]
// Font: Fira Code iScript
"editor.fontFamily": "Fira Code iScript",
"editor.fontSize": 10,
"editor.lineHeight": 14,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "400",
"editor.fontLigatures": true,
|
18 - Fira Mono⯆ [ Ø Ｔ ]
// Font: Fira Mono
"editor.fontFamily": "Fira Mono",
"editor.fontSize": 11,
"editor.lineHeight": 15,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "400",
"editor.fontLigatures": false,
|
19 - FiraFlott⯆ [ ⇏ Ø Ｔ 𝒾 ]
// Font: FiraFlott
"editor.fontFamily": "FiraFlott",
"editor.fontSize": 10,
"editor.lineHeight": 14,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "400",
"editor.fontLigatures": true,
|
20 - Hack⯆ [ Ø Ｔ ]
// Font: Hack
"editor.fontFamily": "Hack",
"editor.fontSize": 10,
"editor.lineHeight": 14,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "500",
"editor.fontLigatures": false,
|
21 - Hasklig⯆ [ ⇏ Ø Ｔ ]
// Font: Hasklig
"editor.fontFamily": "Hasklig",
"editor.fontSize": 11,
"editor.lineHeight": 16,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "400",
"editor.fontLigatures": true,
|
22 - Hermit⯆ [ Ø Ｔ ]
// Font: Hermit
"editor.fontFamily": "Hermit",
"editor.fontSize": 10,
"editor.lineHeight": 14,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "500",
"editor.fontLigatures": false,
|
23 - Inconsolata⯆ [ Ø Ｔ ]
// Font: Inconsolata
"editor.fontFamily": "Inconsolata",
"editor.fontSize": 12,
"editor.lineHeight": 16,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "400",
"editor.fontLigatures": false,
|
24 - Input Mono⯆ [ Ø Ｔ ]
// Font: Input Mono
"editor.fontFamily": "Input Mono",
"editor.fontSize": 11,
"editor.lineHeight": 15,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "300",
"editor.fontLigatures": false,
|
25 - Input Mono Condensed⯆ [ Ø Ｔ ]
// Font: Input Mono Condensed
"editor.fontFamily": "Input Mono Condensed",
"editor.fontSize": 11,
"editor.lineHeight": 15,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "300",
"editor.fontLigatures": false,
|
26 - Iosevka⯆ [ ⇏ Ø Ｔ ]
// Font: Iosevka
"editor.fontFamily": "Iosevka",
"editor.fontSize": 13,
"editor.lineHeight": 18,
"editor.letterSpacing": 0.2,
"editor.fontWeight": "300",
"editor.fontLigatures": true,
|
27 - JetBrains Mono⯆ [ Ø Ｔ ]
// Font: JetBrains Mono
"editor.fontFamily": "JetBrains Mono",
"editor.fontSize": 10,
"editor.lineHeight": 14,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "500",
"editor.fontLigatures": false,
|
28 - Lekton⯆ [ Ø Ｔ ]
// Font: Lekton
"editor.fontFamily": "Lekton",
"editor.fontSize": 14,
"editor.lineHeight": 18,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "500",
"editor.fontLigatures": false,
|
29 - Liberation Mono⯆ [ Ø Ｔ ]
// Font: Liberation Mono
"editor.fontFamily": "Liberation Mono",
"editor.fontSize": 11,
"editor.lineHeight": 15,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "500",
"editor.fontLigatures": false,
|
30 - Menlo⯆ [ Ø Ｔ ]
// Font: Menlo
"editor.fontFamily": "Menlo",
"editor.fontSize": 11,
"editor.lineHeight": 15,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "500",
"editor.fontLigatures": false,
|
31 - Mensch⯆ [ Ø Ｔ ]
// Font: Mensch
"editor.fontFamily": "Mensch",
"editor.fontSize": 11,
"editor.lineHeight": 15,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "500",
"editor.fontLigatures": false,
|
32 - Meslo LG M⯆ [ Ø Ｔ ]
// Font: Meslo LG M
"editor.fontFamily": "Meslo LG M",
"editor.fontSize": 10,
"editor.lineHeight": 14,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "500",
"editor.fontLigatures": false,
|
33 - Meslo LG S⯆ [ Ø Ｔ ]
// Font: Meslo LG S
"editor.fontFamily": "Meslo LG S",
"editor.fontSize": 10,
"editor.lineHeight": 14,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "500",
"editor.fontLigatures": false,
|
34 - Monofur NF⯆ [ ⇏ Ø ]
// Font: Monofur NF
"editor.fontFamily": "Monofur NF",
"editor.fontSize": 14,
"editor.lineHeight": 16,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "500",
"editor.fontLigatures": true,
|
35 - Monoid⯆ [ ⇏ Ø ]
// Font: Monoid
"editor.fontFamily": "Monoid",
"editor.fontSize": 10,
"editor.lineHeight": 16,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "400",
"editor.fontLigatures": true,
|
36 - Monoisome⯆ [ ⇏ Ø ]
// Font: Monoisome
"editor.fontFamily": "Monoisome",
"editor.fontSize": 10,
"editor.lineHeight": 16,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "400",
"editor.fontLigatures": true,
|
37 - Mononoki⯆ [ Ø Ｔ ]
// Font: Mononoki
"editor.fontFamily": "Mononoki",
"editor.fontSize": 11,
"editor.lineHeight": 15,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "400",
"editor.fontLigatures": false,
|
38 - NK57 Monospace⯆ [ Ø Ｔ ]
// Font: NK57 Monospace
"editor.fontFamily": "NK57 Monospace",
"editor.fontSize": 10,
"editor.lineHeight": 16,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "400",
"editor.fontLigatures": false,
|
39 - Noto Mono⯆ [ Ø Ｔ ]
// Font: Noto Mono
"editor.fontFamily": "Noto Mono",
"editor.fontSize": 11,
"editor.lineHeight": 16,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "400",
"editor.fontLigatures": false,
|
40 - Office Code Pro⯆ [ Ø Ｔ ]
// Font: Office Code Pro
"editor.fontFamily": "Office Code Pro",
"editor.fontSize": 11,
"editor.lineHeight": 14,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "400",
"editor.fontLigatures": false,
|
41 - Overpass Mono⯆ [ Ø Ｔ ]
// Font: Overpass Mono
"editor.fontFamily": "Overpass Mono",
"editor.fontSize": 11,
"editor.lineHeight": 15,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "300",
"editor.fontLigatures": false,
|
42 - Oxygen Mono⯆ [ Ø Ｔ ]
// Font: Oxygen Mono
"editor.fontFamily": "Oxygen Mono",
"editor.fontSize": 11,
"editor.lineHeight": 15,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "400",
"editor.fontLigatures": false,
|
43 - PT Mono⯆ [ Ø Ｔ ]
// Font: PT Mono
"editor.fontFamily": "PT Mono",
"editor.fontSize": 11,
"editor.lineHeight": 15,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "500",
"editor.fontLigatures": false,
|
44 - ProggyVector⯆ [ Ｔ ]
// Font: ProggyVector
"editor.fontFamily": "ProggyVector",
"editor.fontSize": 11,
"editor.lineHeight": 15,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "500",
"editor.fontLigatures": false,
|
45 - Roboto Mono⯆ [ Ø Ｔ ]
// Font: Roboto Mono
"editor.fontFamily": "Roboto Mono",
"editor.fontSize": 10,
"editor.lineHeight": 14,
"editor.letterSpacing": 0.2,
"editor.fontWeight": "400",
"editor.fontLigatures": false,
|
46 - Sometype Mono⯆ [ Ø Ｔ ]
// Font: Sometype Mono
"editor.fontFamily": "Sometype Mono",
"editor.fontSize": 11,
"editor.lineHeight": 15,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "300",
"editor.fontLigatures": false,
|
47 - Source Code Pro⯆ [ Ø Ｔ ]
// Font: Source Code Pro
"editor.fontFamily": "Source Code Pro",
"editor.fontSize": 12,
"editor.lineHeight": 16,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "400",
"editor.fontLigatures": false,
|
48 - Space Mono⯆ [ Ø Ｔ ]
// Font: Space Mono
"editor.fontFamily": "Space Mono",
"editor.fontSize": 11,
"editor.lineHeight": 15,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "400",
"editor.fontLigatures": false,
|
49 - Ubuntu Mono - Bront⯆ [ Ø Ｔ ]
// Font: Ubuntu Mono - Bront
"editor.fontFamily": "Ubuntu Mono - Bront",
"editor.fontSize": 12,
"editor.lineHeight": 15,
"editor.letterSpacing": 0.0,
"editor.fontWeight": "300",
"editor.fontLigatures": false,
|
50 - Victor Mono⯆ [ ⇏ Ø Ｔ 𝒾 ]
// Font: Victor Mono
"editor.fontFamily": "Victor Mono",
"editor.fontSize": 12,
"editor.lineHeight": 16,
"editor.letterSpacing": 0.4,
"editor.fontWeight": "400",
"editor.fontLigatures": true,
|
All my Themes
All my Themes on Marketplace.
Latest Changelog for Zenburn Dark Matter Theme
See full Changelog for previous versions.
Note 1: This Changelog is for the whole Dark Matter Suite, not just for this specific Theme.
Note 2: [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.147
- [
Theme] Added new theme colors for VS Code 1.45.00;
- [
Development] Fixed some visual bugs in Fake UI (Minimap and Indent Guides);
- [
Development] Optimized Stats columns generation;
- [
Development] Added last n (default = 30) surveys downloads trend and column color for Last Interval Survey;
Version 1.1.146
- [
Readme] Fixed some issues in README.md and CHANGELOG.md generation.
Version 1.1.144
- [
Readme] A little improvement to table of Suggested fonts, repeating headers every 10 items for more readability;
- [
Readme] Waiting for GitHub and VS Code Market to agree on how to generate the ids for the internal hyperlinks of the table of contents, I tried to optimize (as it was some version ago) the title text so that the hyperlinks are working both on the Marketplace ceh on Github (and not only on Github)
- [
Theme] I know, the need was not felt, but I created a new theme for my favorite tokencolors. Apophis Monolith and Zenburn Monolith are based on a single color in various intensities for each skin;
- [
Theme] Renamed skins Golem to Morion, Monolith to Aquamarine and Salamander to Sulfur;
- [
Development] Improved function alphamatte and alphaifbright for better color results;
About Token Colors
Apophis based
Apophis variants is based on philosophy of Zenburn token colors.
Zenburn based
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
| |
