Here's the new setup I'm experimenting with:
I've been using and loving Natty Theme for quite a while now.
However, I've tweaked all of the background colors to be more punchy (and match the new Livewire docs site pallette exactly):
If you want my setup, install Natty, then paste the following into your settings.json file:
"workbench.colorCustomizations": {
"editor.background": "#0e172a",
"editorWidget.background": "#1f2738bb",
"editorHoverWidget.background": "#2d3750",
"sideBar.background": "#0e172a",
"sideBarSectionHeader.background": "#2a354b55",
"terminal.background": "#0e172a",
"editorLineNumber.activeForeground": "#586374",
"editorLineNumber.dimmedForeground": "#586374",
"editorLineNumber.foreground": "#58637466",
"scrollbarSlider.activeBackground": "#000c20",
"scrollbarSlider.background": "#000c20",
"scrollbarSlider.hoverBackground": "#000c20",
"sideBar.border": "#63697355",
}
Here's what my editor looks like now:
To achieve this you need two things: a plugin, and some settings.
Here's the extension to install: https://marketplace.visualstudio.com/items?itemName=drcika.apc-extension
After installing you will need to restart VS Code likely.
Now you can paste the following into your settings.json file:
"window.titleBarStyle": "native",
"apc.electron": {
"titleBarStyle": "hiddenInset",
"trafficLightPosition": {
"x": 17,
"y": 12
},
// This gets rid of that horid white frame around the electron window...
"transparent": true,
// This removes the less-horid, but still yucky stacking window shadow...
"hasShadow": false
}
After saving, you will need to restart VS Code again and you should be good to go!
If you looked closely at the earlier screenshot, I somehow replaced the VS Code logo with a Livewire jellyfish sillouette:
It's pretty easy with "APC". Here are my settings for doing it: (make sure you reference an SVG on your local machine instead of my placeholder)
"apc.stylesheet": {
// This overrides the VS Code logo with your own SVG...
".monaco-workbench.vs-dark .part.editor>.content .editor-group-container .editor-group-watermark>.letterpress": {
"background-image": "url(/Users/[...]/vscode_bg_icon.svg)",
"opacity": "0.45",
}
},
Awesome! Thanks for sharing!