Skip to content

A set of beautiful color themes for VSCode, inspired by Sublime DA UI.

License

Notifications You must be signed in to change notification settings

swashata/vscode-beautiful-ui

Repository files navigation

VSCode Beautiful UI - Color Themes

codecov Build Status VSCode Version VSCode Install VSCode Rating


A collection of 32 VSCode themes inspired from the awesome Sublime DA CS.

I am not at all the original author of the color scheme. This project was born out of a necessity. I was a user of Sublime Text and Sublime DA UI for a long time.

Due to many reasons (mainly VSCode's intellisense and JS friendliness) I had to switch to VSCode and the only thing I felt missing was the awesome UI engine made by Ihor Oleksandrov and compatible themes.

So this is my attempt to fill the gap. Personally I've been using Tomorrow Night theme for a long time and I have put effort to port as many themes as possible.

  • I am not original author of any of the color schemes.
  • Syntax highlighting differs from the DA UI and DA CS, but I have managed to keep as much as possible. Also in some cases I have increased the darkness of colors for light themes.
  • If you like any color theme, go and ❀️ the original authors.

Installation

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

Marketplace Installation

From command palette, run

ext install swashata.beautiful-ui

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

Git Installation

  • Go to ~/.vscode/extensions/
  • Clone the repository.
git clone [email protected]:swashata/vscode-beautiful-ui.git

Activation

After installation, open/restart vscode and from command palette search for Ξ²ui -. 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.

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
}

Color Themes

The following color themes have been ported.

Color Pack from Chris Kempson

Eighties Dark

Eighties Dark

Ocean Dark

Ocean Dark

Ocean Light

Ocean Light

Tomorrow Dark

Tomorrow Dark

Tomorrow Subliminal

Tomorrow Subliminal

Tomorrow Light

Tomorrow Dark

Color Pack from Ethan Schoonover

Solarized Dark

Solarized Dark

Solarized Light

Solarized Light

Color Pack from Dmitri Voronianski

Oceanic Next

OceanicNext

Color Pack from Wimer Hazenberg

  • Original sources.
  • Monokai Β© 2017.
  • You can show your appreciation to Wimer via buying Monokai Pro.

Monokai Classic

Monokai Classic

Monokai Machine

Monokai Machine

Monokai Octagon

Monokai Octagon

Monokai Pro

Monokai Pro

Monokai Ristretto

Monokai Ristretto

Monokai Spectrum

Monokai Spectrum

Color Pack from Mattia Astorino

Material

Material

Material Darker

Material Darker

Material Palenight

Material Palenight

Color Pack from GitHub Inc.

One Dark

One Dark

One Light

One Light

Color Pack from Jani Nurminen, Colin T.A. Gray, William D. Neumann

Zenburn

Zenburn

Color Pack from Adam Christiansen, Merrick Christensen, Trevor D. Miller

Nova

Nova

Color Pack from Arctic Ice Studio

Nord

Nord

Color Pack from Chris Thomas

Espresso Libre

Espresso Libre

Color Pack from Ian Hill

Espresso Soda

Espresso Soda

Color Pack from Ike Ku

Ayu Dark

Ayu Dark

Ayu Light

Ayu Light

Ayu Mirage

Ayu Mirage

Minimal Color Pack

Inspired from Dan Abramov's Subliminal.

Minimal Blue

Minimal Blue

Minimal Yellow

Minimal Yellow

Minimal Purple

Minimal Purple

Minimal Green

Minimal Green

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.

πŸ‘¨β€πŸŽ¨