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",
    }
},

thanks Caleb!

Thanks!!!

Mine:

"apc.stylesheet": {
        ".search-view .search-widgets-container": "padding-top: 0px !important",
        ".suggest-input-container": "padding: 3px 4px 3px !important;",
        ".mtki": "font-size: 1.12em !important; font-stretch: ultra-condensed !important;",
        ".actions-container": "display: none !important;",
        ".mtk11": "color: #91bbff; text-shadow: 0 0 10px #2f36ff, 0 0 22px #9d91ff, 0 0 2px black;",
        ".mtk12": "color: #67d2ff; text-shadow: 0 0 15px #12baff, 0 0 2px black;",
        ".monaco-editor .cursors-layer .cursor": "background: #12c2e9; background: -webkit-linear-gradient(to top,#f64f59,#c471ed,#be12e9);background: linear-gradient(to top,#f64f59,#c471ed,#be12e9);",
    },

font -> Fira Code iScript
theme -> moonlight II

Thanks!!

I immediately added following:

"apc.stylesheet": {
    ".actions-container.highlight-toggled": "display: none !important;", // hides the action buttons on right
    ".Monaco-breadcrumb-item": "display: none !important;", // Hides the breadcrumb that shows file path, method names you are on, etc
},

@calebporzio Thanks for sharing, love that look! Do you use some kind of background image generator for those gradient backgrounds?

Welcome! Nah, i bought them in a pack from here: https://www.oliur.com/category/wallpapers

@calebporzio Nice! Thanks a lot!

Thank you :)

Thanks a Zillion, Caleb 💥

Hi @calebporzio

Please can you share the Livewire SVG icon to use it in my vs code welcome page.

I think this is not working with cursor. Thank you Caleb anyway. It looks fantastic!