VS Code custom/master pieces themes!

[drcika]

Here you can share your works.
it is preferable that you share the configuration as well as the image

[muhammadfaruq72]

[drcika]

vibrancy

Long ago, I completed Caleb Porzio's MakeVSCodeAwesome course and found the Customize UI and Monkey Patch tools to be incredibly useful in my daily workflow. However, I've been struggling to achieve the desired "full-bleed window" effect since the recent updates (mangling stuff with VSCode).

But guess what? I finally did it!

@drcika, your extension is absolutely breathtaking! Thank you for creating such an amazing tool. We appreciate your hard work ;)

Output (on Windows 10)

Settings.json

  "workbench.editor.showTabs": false,

  "apc.electron": {
    "titleBarStyle": "hidden"
  },
  "window.titleBarStyle": "native",

  "apc.stylesheet": {
      // Change cursor color
      ".monaco-editor .cursor": "background: linear-gradient(to bottom, #ee0979, #ff6a00) !important; box-shadow: 0 0 42px 5px #ee0979, #ff6a00 0px 0px 34px 1px; color: #161616 !important",
  },

[jsonkenyon]

I was in the same boat as @backermanbd used Caleb Porzio's "Make VSCode Awesome", thanks to this extension I was able to get back and then some of the style that I wanted!

MacOS

Settings.json that was updated to work with this extension:

    "window.titleBarStyle": "native",
    "apc.electron": {
        // hide trafficlights unless hovered
        "titleBarStyle": "customButtonsOnHover",
        "trafficLightPosition": {
            "x": 7,
            "y": 5
          }
    },
    "apc.stylesheet": {
        ".editor .title": "background: transparent !important;",
        ".editor .title-border-bottom": "visibility: hidden !important;",
    }
    // Hide scrollbar shadow.
    "workbench.colorCustomizations": {
        "scrollbar.shadow": "#22212C",
    },

@jsonkenyon Instead of this chunk

    // Hide scrollbar shadow.
    "workbench.colorCustomizations": {
        "scrollbar.shadow": "#22212C",
    },

You can use this code in apc.stylesheet.

     // Only show the scrollbar on hover
     ".editor .scrollbar .slider": "visibility: hidden",
     ".editor .scrollbar:hover .slider": "visibility: initial",

[jsonkenyon]

@jsonkenyon Instead of this chunk

    // Hide scrollbar shadow.
    "workbench.colorCustomizations": {
        "scrollbar.shadow": "#22212C",
    },

You can use this code in apc.stylesheet.

     // Only show the scrollbar on hover
     ".editor .scrollbar .slider": "visibility: hidden",
     ".editor .scrollbar:hover .slider": "visibility: initial",

@backermanbd Hey, thanks, indeed I have that also. Though on MacOS, it looks like there is a new shadow introduced on the title. Which is what that one is taking care of.

Without that chunk:

With the chunk:

Though, I'm sure there is a better way of getting it with just the css, I just haven't taken a look deeper yet.

EDIT
Found it and replaced with just this CSS which does the trick:

        ".editor .scroll-decoration": "visibility: hidden;",

@jsonkenyon Sheer brilliance!
Btw, how did you remove all the buttons from Explorer panel?

PS: here's my most used stylesheet code.

      // Hide editor top-right buttons, except for the dirty file indicator and settings goto icon
      ".editor .title .actions-container .action-item a:not(.codicon-close-dirty):not(.codicon-preferences-open-settings)": "display: none !important;",

[jsonkenyon]

@backermanbd - I didn't actually do anything in this case, it just hides automatically unless I hover over the explorer panel or select something, then the buttons appear. Though took a look and I'm thinking the following would do the trick for you.

".monaco-toolbar": "visibility: hidden !important;",

[aexvir]

found out just today about this extension as I finally opened vscode after a long while and I was cleaning out unused extensions, so I had to remove customize ui

@drcika thanks a ton for bringing this functionality back up! I just can't stand vscode's default ui stiffness

I've managed to pretty much replicate my setup from customize ui in just a couple lines of config, which is awesome, but I still had a bunch of custom css that I need to fix before being able to use it as it seems a bunch of stuff changed since the last time I used vscode

"window.titleBarStyle": "native",
  "apc.electron": {
    "titleBarStyle": "hiddenInset",
    "trafficLightPosition": {
      "x": 12,
      "y": 8
    }
  },
  "apc.font.family": "JetBrains Mono",
  "apc.stylesheet": {
    // remove overview ruler completely
    ".editor .decorationsOverviewRuler": "display: none !important",
    // make sticky widget fill the space left by the overview ruler
    ".editor .sticky-widget": "padding-right: 14px !important",
    // make sidebar titles and statusbar lowercase
    ".monaco-workbench .part.sidebar>.title>.title-label *": "text-transform: lowercase !important",
    ".monaco-pane-view .pane>.pane-header>.title": "text-transform: lowercase !important",
    ".statusbar *": "text-transform: lowercase !important"
  },

[HeyProtagonist]

In CustomizeUI I had emojis for the OS Window Actions Icons... Somehow it didn't work on APC..! But I'm okay with the tradeoff ❤️‍🔥

[xesrevinu]

Like Apple Vision Pro but VSCode, thank you @drcika Apc Customize UI++ and customize-ui

Config

{
  "workbench.colorCustomizations": {
    "scrollbar.shadow": "#ffffff00",
    "[One Monokai Dark]": {
      "scrollbar.shadow": "#ffffff00",
      "editorInlayHint.typeBackground": "#ffffff00",
      "editorInlayHint.foreground": "#adadadcc",
      "editorGroupHeader.tabsBackground": "#00000000",
      "sideBar.background": "#3635351d",
      "sideBarSectionHeader.background": "#00000000",
      "editor.background": "#3635351d",
      "peekViewEditor.background": "#00000000",
      "peekViewEditorGutter.background": "#00000000",
      "peekViewTitle.background": "#00000000",
      "peekViewResult.background": "#00000000",
      "editorSuggestWidget.background": "#5e5e5ec5",
      "editorSuggestWidget.border": "#e3e3e37d",
      "editorSuggestWidget.selectedBackground": "#b5b4b440",
      "editorSuggestWidget.highlightForeground": "#f1f1f1e2",
      "editorSuggestWidget.focusHighlightForeground": "#f1f1f1e2",
      "editorSuggestWidget.foreground": "#cccccce2",
      "editorSuggestWidget.selectedForeground": "#f1f1f1e2",
      "tab.activeBackground": "#00000000",
      "tab.inactiveBackground": "#00000000",
      "statusBar.background": "#00000000",
      "statusBar.debuggingBackground": "#00000000",
      "statusBar.noFolderBackground": "#00000000",
      "statusBarItem.activeBackground": "#00000000",
      "editor.selectionBackground": "#00000000",
      "panel.background": "#00000000",
      "activityBar.background": "#00000000",
      "editor.selectionHighlightBackground": "#565e616f",
      "editor.lineHighlightBackground": "#b5b5b530",
      "editor.lineHighlightBorder": "#ffffff00"
    }
  },
  "apc.activityBar": {
    "position": "bottom",
    "hideSettings": true,
    "size": 24
  },
  "apc.statusBar": {
    "position": "editor-bottom",
    "height": 20,
    "fontSize": 11
  },
  "apc.electron": {
    "titleBarStyle": "hiddenInset",
    "trafficLightPosition": {
      "x": 7,
      "y": 8
    },
    "frame": false,
    "transparent": true,
    "vibrancy": "ultra-dark",
    "backgroundColor": "#3635351d",
    "visualEffectState": "active"
  },
  "apc.header": {
    "height": 28,
    "fontSize": 13
  },
  "apc.font.family": "JetBrainsMono-Regular",
  "apc.monospace.font.family": "JetBrainsMono-Regular",
  "apc.stylesheet": {
    // remove overview ruler completely
    ".editor .decorationsOverviewRuler": "display: none !important",
    // make sticky widget fill the space left by the overview ruler
    ".editor .sticky-widget": "padding-right: 14px !important",
    // make sidebar titles and statusbar lowercase
    ".monaco-workbench .part.sidebar>.title>.title-label *": "text-transform: lowercase !important",
    ".monaco-pane-view .pane>.pane-header>.title": "text-transform: lowercase !important"
  }
}

[bushaev-denis]

---

Full

☀️ Light

🌑 Dark

---

Manual

Theme

VSCode / VSCodium

Font

https://github.com/supercomputra/SF-Mono-Font

Settings

{
  "workbench.layoutControl.enabled": false,
  "editor.minimap.enabled": false,
  "window.autoDetectColorScheme": true,
  "workbench.colorTheme": "MacOS Modern Dark - Ventura Xcode",
  "workbench.preferredLightColorTheme": "MacOS Modern Light - Ventura Xcode Default",
  "workbench.preferredDarkColorTheme": "MacOS Modern Dark - Ventura Xcode",
  "workbench.iconTheme": null,
  "window.titleBarStyle": "native",
  "workbench.editor.decorations.badges": false,
  "workbench.editor.showIcons": false,
  "workbench.editor.tabCloseButton": "off",
  "breadcrumbs.enabled": false,
  "editor.rulers": [120],
  "apc.electron": {
    "titleBarStyle": "hiddenInset",
    "frame": false,
    "apc.font.family": "SF Mono",
    "apc.monospace.font.family": "SF Mono",
    "vibrancy": "sidebar",
    "visualEffectState": "active",
    "transparent": true,
    "backgroundColor": "rgba(0,0,0,0)"
  },
  "apc.stylesheet": {
    "#workbench\\.parts\\.sidebar > .composite.title": "opacity: 0; pointer-events: none",
    ".title.tabs.title-border-bottom .tabs-container": "cursor: default; -webkit-app-region: no-drag;",
    ".editor-actions": "display: none;",
    ".monaco-list-rows": "background-color: transparent !important;",
    ".nosidebar .tabs": "padding-left: 80px;",
    ".scrollbar": " width: 10px !important",
    ".scrollbar .slider": "border-radius: 6px; width: calc(100% - 2px) !important;"
  },
  "workbench.colorCustomizations": {
    "focusBorder": "#ff000000",
    "[*Light*]": {
      "sideBar.background": "#F8F8F7aa",
      "sideBarSectionHeader.background": "#F8F8F7aa",
      "statusBar.background": "#F8F8F7aa",
      "list.hoverBackground": "#CEDEEF88"
    },
    "[*Dark*]": {
      "sideBar.background": "#363333aa",
      "sideBarSectionHeader.background": "#363333aa",
      "statusBar.background": "#363333aa",
      "list.hoverBackground": "#46464699"
    }
  },

  // font
  "editor.fontLigatures": true,
  "editor.fontFamily": "SF Mono, Menlo, Monaco, 'Courier New', monospace",
  "editor.glyphMargin": false,
}

[Yukaii]

Jebrains Mono everywhere with vibrancy!

  "apc.electron": {
    "frame": false,
    "backgroundColor": "rgba(0,0,0,0.95)",
    "vibrancy": "ultra-dark",
    "visualEffectState": "active",
  },
  "apc.font.family": "Jetbrains Mono",
  "apc.monospace.font.family": "Jetbrains Mono",
  "apc.menubar.compact": true,
  "window.titleBarStyle": "native",
  "workbench.colorTheme": "Expo Dark",
  "workbench.iconTheme": "file-icons",



  "workbench.colorCustomizations": {
    "editorGroupHeader.tabsBackground": "#00000000",
    "sideBar.background": "#00000000",
    "sideBarSectionHeader.background": "#00000000",
    "editor.background": "#00000000",
    "peekViewEditor.background": "#00000000",
    "peekViewEditorGutter.background": "#00000000",
    "peekViewTitle.background": "#00000000",
    "peekViewResult.background": "#00000000",
    "tab.inactiveBackground": "#00000000",
    "statusBar.background": "#00000000",
    "panel.background": "#00000000",
    "sash.hoverBorder": "#ffffff3e",
    "sideBar.border": "#ffffff23"
  },