https://github.com/orta/Essence

A VSCode UI.
https://github.com/orta/Essence

Last synced: 3 months ago
JSON representation

A VSCode UI.

• Host: GitHub
• URL: https://github.com/orta/Essence
• Owner: orta
• Created: 2016-12-12T15:56:45.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2017-02-02T22:09:04.000Z (almost 8 years ago)
• Last Synced: 2024-10-23T12:17:20.656Z (3 months ago)
• Language: CSS
• Size: 10.7 MB
• Stars: 76
• Watchers: 4
• Forks: 7
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-vscode-cn - Pragmatic Essence
• -awesome-vscode - Pragmatic Essence
• awesome-vscode - Pragmatic Essence
• awesome-vscode - Pragmatic Essence
• awesome-vscode-zh - Pragmatic Essence

README

        
A pragmatic [fork of flagello/Essence](https://github.com/flagello/Essence) mixing my [inline toolbar style](https://github.com/Microsoft/vscode/pull/12628)

![Showcase](showcase/i/E1.png)

---

## 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](https://github.com/be5invis/vscode-custom-css)" - 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".