I’ve always preferred a clean, minimal IDE/text editor when I code — something that helps me stay focused without all the visual noise. For a long time, Apc Customize UI++ was my go-to extension for stripping down the VS Code interface just the way I liked it.
But with the release of VS Code 1.93, that extension stopped working. Some under-the-hood changes broke its functionality, and sadly, it’s not the first time this has happened, they already shut down Customize UI. (Which relies on another extension Monkey Patch) Maybe they do not want extensions of this type, maybe for security reasons?
But all is not lost.
Now there are a more extensions for this type, I like two of them “Custom CSS and JS Loader” and “Custom UI Style“, I prefer the latter as it supports Custom Electron BrowserWindow options.
Three basic ingredient we need are:
- Custom UI Style – The chosen one.
- JetBrains Icon Theme – (I am using the light icon pack)
- React Theme – (I am using React Dev Theme (light))
Just like you’d install any other extension, search for Custom UI Style in the VS Code Extensions panel and hit install. Once that’s done, you’ll need to update your settings.json with the following:
"window.titleBarStyle": "native",
"window.customTitleBarVisibility": "never",
"custom-ui-style.electron": {
"titleBarStyle": "hiddenInset"
},
"custom-ui-style.external.imports": [
"file:///Users/laranz/Developer/custom-vscode.css",
"file:///Users/laranz/Developer/custom-vscode.js"
],
Now, here’s where the fun begins.
Go ahead and create two files: one CSS and one JS file. Place them anywhere convenient — I keep mine in a local Developer folder — and reference them in the custom-ui-style.external.imports array like you see above. This is where you’ll be writing your custom styles and scripts to tweak the VS Code interface exactly how you want it.
Below is a basic CSS snippet you can start with. I built this setup for a light theme, but you can tweak it to your liking. If you’re using a dark theme, I recommend checking out Glenn Raya’s VS Code settings. He’s using a different plugin, but since the CSS syntax is the same, you can borrow and adapt his styles easily.
:root {
--main-font-family: "JetBrains Mono", monospace !important;
--activitybar-width: 77px;
--titlebar-height: 37px;
}
span:not(.codicon),
.monaco-editor-hover,
.monaco-hover {
font-family: var(--main-font-family);
}
/* Code comment style */
.mtk3 {
font-family: var(--main-font-family);
font-style: italic !important;
color: #008c7d !important;
}
/* Side bar */
.part.sidebar {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
}
/* File Explorer Selected Item */
.monaco-list.list_id_1 .monaco-list-row.selected {
background-color: #b9bdc6 !important;
opacity: 1 !important;
}
/* List item label name */
.monaco-list.list_id_1 .monaco-list-row.selected .label-name {
color: #000 !important;
opacity: 1 !important;
}
.monaco-list.list_id_1 .monaco-list-row.focused.selected {
outline: none !important;
}
/* File Explorer Item Label */
.monaco-tree .monaco-tree-row .label-name,
.monaco-list .monaco-list-row .monaco-icon-label .label-name {
font-size: 14px !important;
font-weight: 400 !important;
color: #000;
}
.explorer-item-edited {
font-family: var(--main-font-family);
font-size: 14px !important;
}
/* Sidebar title */
.composite.title {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-items: center !important;
}
.composite.title h2 {
font-weight: bold !important;
font-size: 14px !important;
color: #bc9abc !important;
font-family: var(--main-font-family);
}
.composite.title h2::before {
display: inline-block;
margin-right: 6px;
font-size: 1.1rem;
content: "🐈";
}
/* Scroll Bar */
.slider {
position: absolute !important;
right: 1px !important;
width: 1px !important;
background: #bc9abc !important;
left: auto !important;
}
.monaco-resizable-hover {
border: none !important;
}
/* Project title's style at the top. */
.monaco-workbench
.part.titlebar
> .titlebar-container
> .titlebar-center
> .window-title
> .command-center
.action-item.command-center-center {
border: none !important;
background: transparent !important;
}
/* Project Title */
.titlebar-left {
justify-content: flex-end !important;
flex-grow: 0 !important;
width: 75px !important;
}
/* Search Label */
.search-label {
font-family: var(--main-font-family);
font-size: 14px !important;
color: #000;
display: block;
}
/* Search icon */
.search-icon {
display: none !important;
}
.titlebar-right > * {
display: none !important;
}
.command-center-center {
width: auto !important;
}
/* Command Palette */
.quick-input-widget {
transform: translateY(-50%) !important;
top: 50% !important;
box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.35) !important;
backdrop-filter: blur(3px) !important;
}
.quick-input-list,
.quick-input-list .list_id_6 {
min-height: 400px !important;
}
/* Remove background for lists */
.monaco-list-rows {
background: transparent !important;
}
/* Command palette text input */
.quick-input-filter .monaco-inputbox {
border-radius: 6px !important;
padding: 6px !important;
border: none !important;
font-family: var(--main-font-family);
font-size: 16px !important;
margin-bottom: 6px !important;
}
#command-blur {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.15);
top: 0;
left: 0;
backdrop-filter: blur(8px);
}
/* Actions after command palette text input */
.quick-input-inline-action-bar .actions-container .action-item {
margin-bottom: 16px !important;
/* Same margin-bottom as .monaco-inputbox */
}
.quick-input-header {
align-items: center;
}
/* Command palette's input box placeholder. */
.monaco-inputbox input::placeholder {
color: rgba(255, 255, 255, 0.3) !important;
}
/* Container that holds the VS Code home icon. */
/* .editor-group-watermark {
max-width: none !important;
} */
.letterpress {
display: none !important;
}
.content.empty {
background-color: #b9bdc6 !important;
}
.watermark-box dt, .watermark-box dd {
color: white;
font-size: 16px;
font-family: var(--main-font-family);
}
.monaco-editor .cursor {
background: linear-gradient(to bottom, #7f00ff, #e100ff) !important;
color: #292d3e !important;
}
/* Title bar magic begins */
/* Allow dragging on the activity-bar, status-bar, tabs-container, side-bar title... */
.activitybar,
.statusbar,
.tabs-container,
.composite-bar-container,
.sidebar .composite.title,
.content.empty {
-webkit-app-region: drag;
}
/* ...but still allow to click actions and items without dragging. */
.content .monaco-action-bar,
.statusbar-item,
.tab,
.composite-bar,
.title .title-actions .action-label {
-webkit-app-region: no-drag;
}
/* Make room for traffic lights. */
.monaco-workbench:not(.fullscreen) .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 */
.monaco-workbench:not(.fullscreen):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);
}
.monaco-workbench:not(.fullscreen):has(.sidebar.right)
.auxiliarybar.left
.composite.title {
padding-left: var(--activitybar-width);
}
/* Title bar magic ends */
For now, I’ve left the .js file empty since I don’t need any JavaScript tweaks at the moment — but it’s there if I ever decide to add some behavior or scripting down the line.
Once you’ve completed all the steps above, it’s time to apply your changes.
Press Command + Shift + P (or Ctrl + Shift + P on Windows/Linux) to open the Command Palette, then search for “Reload“. You’ll see an option called “Custom UI Style: Reload” — click on that. It’ll prompt you to restart VS Code.
Note: Anytime you make changes to your .css or .js file, don’t forget to run “
Custom UI Style: Reload” again. This step is necessary to reinject your custom CSS and JS into VS Code’s source files — otherwise, your updates won’t take effect.
Due to system permission restrictions, maybe you will receive RangeError: Maximum call stack size exceeded prompt when you reload the configuration. You need to fully close VSCode first (press Command + Q on MacOS), then run:
# MacOS
sudo chown -R $(whoami) "/Applications/Visual Studio Code.app"
# Linux
sudo chown -R $(whoami) "/usr/local/code"
Go ahead and confirm the restart, and that’s it — you should now see your clean, minimal UI in action.
And if things don’t quite look like what you expected — or like the screenshot above — feel free to check out my settings.json for reference. Sometimes it’s just a setting tweak that makes all the difference.
{
"telemetry.telemetryLevel": "off",
// workbench settings.
"window.zoomLevel": 1.25,
"workbench.sideBar.location": "right",
"workbench.startupEditor": "none",
"workbench.statusBar.visible": false,
"workbench.iconTheme": "vscode-jetbrains-icon-theme-2023-light",
"workbench.activityBar.location": "top",
"workbench.editor.highlightModifiedTabs": true,
"workbench.tree.enableStickyScroll": false,
"workbench.colorTheme": "React Dev Theme (light)",
"workbench.tree.renderIndentGuides": "none",
"workbench.layoutControl.enabled": false,
"breadcrumbs.enabled": false,
"chat.commandCenter.enabled": false,
"window.commandCenter": false,
// editor settings.
"editor.fontSize": 14,
"editor.fontFamily": "JetBrains Mono",
"editor.fontLigatures": true,
"editor.letterSpacing": 0.3,
"editor.lineHeight": 1.7,
"editor.hover.delay": 500,
"editor.hover.enabled": true,
"editor.lightbulb.enabled": "off",
"editor.selectionHighlight": false,
"editor.overviewRulerBorder": false,
"editor.renderLineHighlight": "none",
"editor.showFoldingControls": "always",
"editor.guides.bracketPairsHorizontal": false,
"editor.minimap.enabled": false,
"editor.stickyScroll.enabled": false,
// terminal.
"terminal.integrated.cursorStyle": "underline",
"terminal.integrated.cursorStyleInactive": "underline",
"terminal.integrated.fontSize": 16,
"terminal.external.osxExec": "iTerm.app",
"search.useIgnoreFiles": false,
"search.exclude": {
// Hide everything in /vendor, except the "laravel" and "livewire" folder.
"**/vendor/{[^l],?[^ai]}*": true,
// Hide everything in /public, except "index.php"
"**/public/{[^i],?[^n]}*": true,
"**/node_modules": true,
"**/dist": true,
"**/_ide_helper.php": true,
"**/composer.lock": true,
"**/package-lock.json": true,
"storage": true,
".phpunit.result.cache": true
},
// The magic happens here.
"window.titleBarStyle": "native",
"window.customTitleBarVisibility": "never",
"custom-ui-style.electron": {
"titleBarStyle": "hiddenInset"
},
"custom-ui-style.external.imports": [
"file:///Users/laranz/Developer/custom-vscode.css",
"file:///Users/laranz/Developer/custom-vscode.js"
],
}
