macOS: Recommended settings for wide activity-bar with integrated traffic lights

[lehni]

First of all, thank you for making this great extension! I'm the author of the original vscode-titlebar-less-macos, which I discontinued when the great Customize UI by @iocave came long, which eventually was broken by VSCode changes and replaced by the equally great Apc Customize UI++ by @drcika. Now it seems that Custom UI Style continues to carry the torch, and thus I tried to achieve the wide activity-bar look that the previous extensions supported through some JS trickery.

I managed to actually make it work by solely using CSS settings, and so I decided to share them here. Perhaps they could be abstracted behind a more convenient setting switch in the extension?

My current settings are:

{
  "window.titleBarStyle": "native",
  "window.customTitleBarVisibility": "never",
  "custom-ui-style.electron": {
    "titleBarStyle": "hiddenInset"
  },
  "custom-ui-style.stylesheet": {
    ".monaco-workbench": {
      "--activitybar-width": "77px",
      "--titlebar-height": "37px",

      // Titlebar
      ".part.sidebar.left .composite.title": {
        "&, .title-actions, .global-actions, .monaco-toolbar": {
          "height": "var(--titlebar-height)"
        },

        ".title-label": {
          "line-height": "var(--titlebar-height)"
        }
      },
  
      // Tabs
      ".title.tabs": {
        "--editor-group-tab-height": "var(--titlebar-height) !important",
      },

      // Wide activity bar
      ".split-view-view:has(> .part.activitybar.left)": {
        "&, .part.activitybar.left, .content": {          
          "min-width": "var(--activitybar-width)",
        },

        // Make the split-view after the wide activity bar smaller.
        // Also handle the situation where the sidebar is hidden,
        // in which case the editor itself needs to shrink / auto-size.
        "& + .split-view-view.visible, & + .split-view-view:not(.visible) + .split-view-view.visible": {
          "--offset": "calc(var(--activitybar-width) - 48px)",
          "margin-left": "var(--offset)",

          "> *:first-child": {
            "width": "auto",
            "margin-right": "var(--offset)",

            // Auto-size the editor when the sidebar is hidden.
            ".content": {
              "&, .split-view-view": {
                "&, .monaco-editor": {
                  "&, .overflow-guard, .overlayWidgets" : {
                    "&, .monaco-scrollable-element, .sticky-widget": {
                      "width": "unset !important",
                      "left": "0",
                      "right": "0"
                    },

                    ".sticky-widget": {
                      "right": "14px !important"
                    }
                  }
                }
              }
            }
          },
        }
      },

      // Search-Widget
      ".search-view .search-widget": {
        ".replace-container": {
          "width": "calc(100% - 18px)",

          ".replace-input": {
            "&, .monaco-findInput": {
              "width": "100% !important"
            }
          }
        }			
      },

      ".monaco-sash.vertical.minimum": {
        // TODO: Improve collapsing of the sidebar.
        "left": "calc(var(--activitybar-width) - var(--vscode-sash-size) / 2) !important"
      },

      ".part.activitybar.left": {
        ".monaco-action-bar": {
          ".action-label": {
            "width": "var(--activitybar-width)"
          }
        }
      },

      "&:not(.fullscreen)": {
        // Make room for traffic lights.
        ".part.activitybar.left > .content": {
          "padding-top": "var(--titlebar-height)"
        },

        // Move editor title when side-bar is hidden, when side-bar is on the
        // right or when activity-bar is hidden and side-bar is not on the right
        "&:has(.sidebar.right)": {
          ".monaco-split-view2.horizontal .split-view-view:not(.visible) + .split-view-view.visible .editor .title .tabs-and-actions-container": {
            "padding-left": "var(--activitybar-width)"
          },

          ".auxiliarybar.left .composite.title": {
            "padding-left": "var(--activitybar-width)"
          }
        },

         // Allow dragging on the activity-bar, status-bar, tabs-container, side-bar title...
        ".activitybar, .statusbar, .tabs-container, .sidebar .composite.title": {
          "-webkit-app-region": "drag",

          // ...but still allow to click actions and items without dragging.
          ".content .monaco-action-bar, .statusbar-item, .tab, .title .title-actions .action-label": {
            "-webkit-app-region": "no-drag"
          }
        }
      },

      ".statusbar": {
        // Don't indent the statusbar items.
        "> .items-container > .statusbar-item.left.first-visible-item": {
          "padding-left": "0"
        },

        // Show the host button again, and make it as wide as the .activitybar.
        "#status\\.host": {
          "&": {
            "display": "block !important",
            "width": "calc(var(--activitybar-width) - 1px)"
          },
          ".codicon": {
            "margin": "0 auto"
          }
        }
      }
    },

    // Make line numbers a bit smaller.
    ".editor .margin-view-overlays .line-numbers": {
      "font-size": "85%"
    },

    // Show search inputs and results in monospaced font.
    ".search-widget textarea, .find-widget textarea, .search-view .results .match": {
      "font-family": "var(--cus-monospace-font) !important"
    }
  }
}

[subframe7536]

Wow, great work!

On the roadmap, in next version, this extension will support to load CSS or JS from local files or URLs. So maybe the easiest way is extracting them into a separate file.

And there also could become a built-in preset, like:

{
  "custom-ui-style.stylePreset": { // or preset for whole extension
    "mac-wide-activity-bar": true // true to enable, object to setup preset options
  }
}

[subframe7536]

Well, after a second thought, I think the preset should be separated from core extension, so the replacement could be external json file:

{
  "custom-ui-style.preset": [
    "file://path/to/json/file",
    "https://example.com/preset.json" // maybe download from remote?
  ]
}

The json content:

{
  "version": "0.1.0",
  "sha256": "xxxx",
  "config": {
    "electron": {
      // options
    },
    "stylesheet": {
      // CSS
    },
    // other options
  }
}

[subframe7536]

v0.4.2 is released, loading external CSS file is supported.

[afridho]

v0.4.2 is released, loading external CSS file is supported.

how can i convert my stylesheet to external css? it precompile? with scss?

btw, thank you for the awesome extension 👍🏻

[subframe7536]

v0.4.2 is released, loading external CSS file is supported.

how can i convert my stylesheet to external css? it precompile? with scss?

btw, thank you for the awesome extension 👍🏻

Just extract all the content in custom-ui-style.stylesheet to an css file and remove all the ", then add

{
  "custom-ui-style.external.imports": [
    "file:///path/to/file.css"
  ]
}

[afridho]

it works. Thanks a lot 👍🏻

[lehni]

Great, thanks @subframe7536 !

[reslear]

best for cursor:

    "workbench.navigationControl.enabled": false,
    "window.titleBarStyle": "native",
    "window.customTitleBarVisibility": "never",
    "custom-ui-style.electron": {
        "titleBarStyle": "hiddenInset",
    },
    "custom-ui-style.stylesheet": {
        "#workbench\\.parts\\.sidebar > div > div > div:nth-child(1) > div > div": {
            "padding-left": "40px !important"
        }
    },
    "workbench.layoutControl.enabled": false,

[lmyslinski]

Thanks a lot! Is there an option to hide the traffic lights completely?

[agalitsyn]

See https://github.com/subframe7536/vscode-custom-ui-style#example

// Electron BrowserWindow options
//  - https://www.electronjs.org/docs/latest/api/base-window
//  - https://www.electronjs.org/docs/latest/api/browser-window
"custom-ui-style.electron": {
  // Frameless window (no title bar, no MacOS traffic light buttons)
  //  - "A frameless window removes all chrome applied by the OS, including window controls"
  //  - https://www.electronjs.org/docs/latest/api/base-window#new-basewindowoptions
  //  - https://www.electronjs.org/docs/latest/tutorial/custom-window-styles#frameless-windows
  //  - https://www.electronjs.org/docs/latest/tutorial/custom-title-bar
  "frame": false,
  // Disable rounded corners (MacOS)
  //  - https://www.electronjs.org/docs/latest/api/base-window#new-basewindowoptions
  //  - "Whether frameless window should have rounded corners on MacOS"
  //  - "Setting this property to false will prevent the window from being fullscreenable"
  "roundedCorners": false,
}

[Eurico77]

Good morning everyone, I would like to know how I can remove this black bar on the side as shown in the first image:

Another thing that also doesn't work is the action of clicking on these icons that I use the features for, but as it is now impossible.

also when collapsing the left part of vscode the traffic light does not respect the area of ​​the currently open file:

I'm using the following config:

 // custom-ui-style
  "window.titleBarStyle": "native",
  "custom-ui-style.electron": {
    "titleBarStyle": "hiddenInset",
    "frame": false
  },
  "custom-ui-style.stylesheet": {
    ".monaco-workbench": {
      "--activitybar-width": "77px",
      "--titlebar-height": "37px",
      // Activity bar
      ".label-name": {
        "font-size": "14px !important;",
        "color": "rgba(255, 255, 255, 0.3) !important;"
      },
      // Titlebar
      ".part.sidebar.left .composite.title": {
        "&, .title-actions, .global-actions, .monaco-toolbar": {
          "height": "var(--titlebar-height)"
        },
        ".title-label": {
          "line-height": "var(--titlebar-height)"
        }
      },
      // Tabs
      ".title.tabs": {
        "--editor-group-tab-height": "var(--titlebar-height) !important",
      },
      // Wide activity bar
      ".split-view-view:has(> .part.activitybar.left)": {
        "&, .part.activitybar.left, .content": {
          "min-width": "var(--activitybar-width)",
        },
        // Make the split-view after the wide activity bar smaller.
        // Also handle the situation where the sidebar is hidden,
        // in which case the editor itself needs to shrink / auto-size.
        "& + .split-view-view.visible, & + .split-view-view:not(.visible) + .split-view-view.visible": {
          "--offset": "calc(var(--activitybar-width) - 48px)",
          "margin-left": "var(--offset)",
          "> *:first-child": {
            "width": "auto",
            "margin-right": "var(--offset)",
            // Auto-size the editor when the sidebar is hidden.
            ".content": {
              "&, .split-view-view": {
                "&, .monaco-editor": {
                  "&, .overflow-guard, .overlayWidgets": {
                    "&, .monaco-scrollable-element, .sticky-widget": {
                      "width": "unset !important",
                      "left": "0",
                      "right": "0"
                    },
                    ".sticky-widget": {
                      "right": "14px !important"
                    }
                  }
                }
              }
            }
          },
        }
      },
      // Search-Widget
      ".search-view .search-widget": {
        ".replace-container": {
          "width": "calc(100% - 18px)",
          ".replace-input": {
            "&, .monaco-findInput": {
              "width": "100% !important"
            }
          }
        }
      },
      ".monaco-sash.vertical.minimum": {
        // TODO: Improve collapsing of the sidebar.
        "left": "calc(var(--activitybar-width) - var(--vscode-sash-size) / 2) !important"
      },
      ".part.activitybar.left": {
        ".monaco-action-bar": {
          ".action-label": {
            "width": "var(--activitybar-width)"
          }
        }
      },
      "&:not(.fullscreen)": {
        // Make room for traffic lights.
        ".part.activitybar.left > .content": {
          "padding-top": "var(--titlebar-height)"
        },
        // Move editor title when side-bar is hidden, when side-bar is on the
        // right or when activity-bar is hidden and side-bar is not on the right
        "&:has(.sidebar.right)": {
          ".monaco-split-view2.horizontal .split-view-view:not(.visible) + .split-view-view.visible .editor .title .tabs-and-actions-container": {
            "padding-left": "var(--activitybar-width)"
          },
          ".auxiliarybar.left .composite.title": {
            "padding-left": "var(--activitybar-width)"
          }
        },
        // Allow dragging on the activity-bar, status-bar, tabs-container, side-bar title...
        ".activitybar, .statusbar, .tabs-container, .sidebar .composite.title": {
          "-webkit-app-region": "drag",
          // ...but still allow to click actions and items without dragging.
          ".content .monaco-action-bar, .statusbar-item, .tab, .title .title-actions .action-label": {
            "-webkit-app-region": "no-drag"
          }
        }
      },
      ".statusbar": {
        // Don't indent the statusbar items.
        "> .items-container > .statusbar-item.left.first-visible-item": {
          "padding-left": "0"
        },
        // Show the host button again, and make it as wide as the .activitybar.
        "#status\\.host": {
          "&": {
            "display": "block !important",
            "width": "calc(var(--activitybar-width) - 1px)"
          },
          ".codicon": {
            "margin": "0 auto"
          }
        }
      }
    },
    // Make line numbers a bit smaller.
    ".editor .margin-view-overlays .line-numbers": {
      "font-size": "85%"
    },
    // Show search inputs and results in monospaced font.
    ".search-widget textarea, .find-widget textarea, .search-view .results .match": {
      "font-family": "var(--cus-monospace-font) !important"
    }
  },

help me, please!

[finkrer]

@lehni hey, it seems like one of the custom styles you provided is now causing performance issues. I have noticed that my editor has started to lag when scrolling, but not when custom styles are disabled. I pinpointed it to the "wide activity bar" styles . They seem to have pretty complex selectors, not sure if that matters. I don't use the activity bar, so I don't know what exactly removing them affects. I'm using Cursor and haven't tested it in base VS Code.

Also, I can't help but notice that some changes in your config are unrelated, like the line number size or font in search widgets.

Anyway, you might want to change that code for the benefit of people who are copying it from you. Cheers.