Find on Visual Studio Marketplace:
https://marketplace.visualstudio.com/items?itemName=OhaiHFO.synthwave-x-fluoromachine-avant-noir
This is a fork of @webrenders's Synthwave x Fluoromachine VS Code theme, which in turn is a fork of @robbowen's Synthwave '84 VS Code theme, merged with @fullerenedream's Fluoromachine theme for VSCode.
This Avant Noir variation darkens the UI, and boosts the general color tone - making the important things pop more.
This theme is available in 2 editions:
Base Edition
The base edition is the easiest to install, but lacks some of the features of the extended edition.
This theme has been designed with progressive enhancement in mind, and as such the base theme should be perfectly functional without the additions of the extended version.
Extended Edition ☀️😎
The extended edition utilises a custom stylesheet in order to expand on the capabilities of the vscode theming engine.
There's a couple of steps involved in getting it installed, but nothing too crazy, it shouldn't take much more than a few minutes.
🚥 Base Edition | 🌈 Extended Edition |
---|---|
Install this theme
Install the Custom CSS and JS Loader extension for vscode
Link the CSS file from this extension in your vscode settings.json
:
On Macs, the path to your vscode extensions might look something like the snippet below:
"vscode_custom_css.imports": [
"file:///Users/{your username}/.vscode/extensions/ohaihfo.synthwave-x-fluoromachine-avant-noir-0.1.2/synthwave-x-fluoromachine-avant-noir.css"
]
On Windows, the path may resemble:
"vscode_custom_css.imports": [
"file:///C:/Users/{your username}/.vscode/extensions/ohaihfo.synthwave-x-fluoromachine-avant-noir-0.1.2/synthwave-x-fluoromachine-avant-noir.css"
]
Reload Custom CSS and JS
.
Note: You'll need to run the Reload Custom CSS and JS
command again, every time vscode updates.
The font being used in the screenshot above is Victor Mono which includes Ligatures and optional semi-connected cursive italics.
To enable ligatures within your editor pane, add the following snippet to your vscode settings.json
:
"editor.fontLigatures": true,
To enable italics within your editor pane, add the following snippet to your vscode settings.json
:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
//following will be in italic (=FlottFlott)
"comment",
"entity.name.type.class", //class names
"keyword", //import, export, return…
"constant", //String, Number, Boolean…, this, super
"storage.modifier", //static keyword
"storage.type.class.js", //class keyword
],
"settings": {
"fontStyle": "italic"
}
},
{
"scope": [
//following will be excluded from italics (VSCode has some defaults for italics)
"invalid",
"keyword.operator",
"constant.numeric.css",
"keyword.other.unit.px.css",
"constant.numeric.decimal.js",
"constant.numeric.json"
],
"settings": {
"fontStyle": ""
}
}
]
},
The terminal theme being used in the screenshot is powerlevel10k for ohmyzsh, and is using the Meslo Nerd Font patched for Powerlevel10k