VSCode Delirium UI - Color Themes

Everforest Dark

Everforest Darken

Dark

Installation

You can install manually from git or use the vscode extensions marketplace.

Marketplace Installation

From command palette, run

ext install mr4torr.delirium-ui

Or search for Delirium UI in the marketplace and install from there.

Git Installation

• Go to ~/.vscode/extensions/
• Clone the repository.

git clone git@github.com:mr4torr/vscode-delirium-ui.git

Activation

After installation, open/restart vscode and from command palette search for Delirium. You can choose and apply the color theme of your choice.

Customization

Workspace colors can be customized by editing workbench.colorCustomizations user settings. More information can be found here.

Recommended Settings

Following extensions/tools are recommended for the color schemes.

• vscode-icons - For file icons.
• WhiteViz - Sublime like whitespace highlight.
• FiraCoda - For an awesome font with ligatures.
• Operator Mono Lig - For creating ligatures for operator mono.

Also note the recommended user settings.

{
	"workbench.iconTheme": "vscode-icons",
	"editor.fontFamily": "Operator Mono SSM Lig",
	"editor.lineHeight": 25,
	"editor.fontLigatures": true,
	"explorer.decorations.badges": false,
	"editor.fontSize": 14,
	"editor.letterSpacing": 0.5,
	"editor.fontWeight": "400",
	"editor.renderWhitespace": "none",
	"workbench.statusBar.feedback.visible": false,
	"editor.rulers": [
		80,
		100,
		120
	],
	"whiteviz.maximumLimit": 500,
	"whiteviz.expandedTabIndicator": false,
	"editor.occurrencesHighlight": true,
	"workbench.tree.horizontalScrolling": true,
	"editor.cursorStyle": "line-thin",
	"editor.showFoldingControls": "always",
	"editor.matchBrackets": true
}

Development

Help porting popular tmThemes to vscode.

The development is made easy with some custom scripts. First fork and clone the repo and run

yarn install

This will install all dependencies. Then run

yarn start

To build the themes and watch for file changes. You can press F5 to launch VSCode development window where you can preview the themes.

Once satisfied run

yarn build

to finalize the themes and make changes to package.json manually.

Then submit a PR.

Adding a new theme

• Copy ./src/schemes/Template.noop.js to ./src/schemes/MyTheme.js.
• Mark the theme dark or light and make changes accordingly.
• Add colors to the config.
• Import and add the theme in src/colors.js.
• Build and test.

👨‍🎨