calebporzio/my_vscode_setup.md Secret

## my_vscode_setup.md

      
    Raw
  

              my_vscode_setup.md
            
          
    Here's the new setup I'm experimenting with:
My editor theme

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",
}
New technique for the full-bleed window

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!
Custom VS Code icon

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",
    }
},
No results found