A VSCode UI.
CSS
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 32 commits ahead, 19621 commits behind flagello:master.
Latest commit 60aeea6 Feb 2, 2017
Permalink
Failed to load latest commit information.
accessory Add optional settings.json Dec 12, 2016
dist Add quick open widget bottom inset shadow and fix padding Dec 12, 2016
showcase screenshots Dec 14, 2016
README.md README Feb 2, 2017
essence.css Update for 1.9.x Feb 2, 2017

README.md

A pragmatic fork of flagello/Essence mixing my inline toolbar style

Showcase


Using

Traffic Lights

Set the user setting "window.titleBarStyle": "custom".

Now you need to edit the code the VS Code ships with.

Code 1.9.0

You need to change the traffic light positions to move down a bit, this is controlled by titleBarStyle on a new Window.

Set the user setting "window.titleBarStyle": "custom".

Then:

code /Applications/Visual\ Studio\ Code.app/Contents/Resources/app/out/vs/code/electron-main/main.js

Edit (h.titleBarStyle="hidden", to be (h.titleBarStyle="hidden-inset",.

code /Applications/Visual\ Studio\ Code.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js

Make it fit

Edit prototype.isFullscreen=function(){this._fullscreen to prototype.isFullscreen=function(){return true; this._fullscreen

Ensure wide activitybar

Edit this.activitybarWidth=r?0:this.partLayoutInfo to this.activitybarWidth=r?0:65,this.partLayoutInfo

Code 1.8.0 + 1.8.1

Edit (w.titleBarStyle="hidden", to be (w.titleBarStyle="hidden-inset",.

Colors

You need to use the extension "Custom CSS and JS Loader" - search and install it.

Then clone this repo.

git clone https://github.com/orta/Essence.git

Set a user preference for your custom CSS:

  "vscode_custom_css.imports": [
      "file:///Users/orta/dev/misc/Essence/essence.css"
  ],

Run the command "Enable Custom CSS and JS".

Restart VS Code.

Done

You will see "Your Code installation appears to be corrupt. Please reinstall." on every new window, press escape to make it go away. You have modded VS Code

I use the color theme "Ayu Light". If you find others that fit well, I'd love to make a list in here, send me a PR.


Want to make improvements?

The front-end is just a website, so you can use the chrome web inspector to make your changes. What I do is use the command "Developer: Toggle Developer Tools" then dig through the DOM to find the element to style.

You can make your changes at runtime to verify them, then add them to the CSS file. Then validate they work by doing "Reload Window".