Not working with the latest VS Code

[Lady-kimi]

[1blckhrt]

Also having this issue as well, I am on Linux Mint 22 with the same VS Code version as seen above.

[Erik262]

Same here on macOS:

[coderguy-21]

same here on Ubuntu 24.04

[Lady-kimi]

It only works to revert to the previous version of VSCode. 1.93

[drcika]

unfortunately, it most likely won't work,
they made changes that required the extension to be completely rewritten from scratch,
I don't have time to devote to expansion right now,
maybe there will be something in the future...

[Lady-kimi]

unfortunately, it most likely won't work, they made changes that required the extension to be completely rewritten from scratch, I don't have time to devote to expansion right now, maybe there will be something in the future...

Does this happen with every update or only rarely?

[drcika]

you could say rare
they already shut down https://github.com/iocave/customize-ui with the changes
one gets the impression that they do not want extensions of this type

the options I have require a lot of work
to implement the functionality in vscode itself
and submit a PR in the hope that they will accept
or to build all the files and swap with extension on every version change
the principle on which it worked until now is no longer easily feasible

I will come to a solution for sure, we will see if it will be appropriate in the form of an extension

[Lady-kimi]

you could say rare they already shut down https://github.com/iocave/customize-ui with the changes one gets the impression that they do not want extensions of this type

the options I have require a lot of work to implement the functionality in vscode itself and submit a PR in the hope that they will accept or to build all the files and swap with extension on every version change the principle on which it worked until now is no longer easily feasible

I will come to a solution for sure, we will see if it will be appropriate in the form of an extension

I hope you can return to it when you have time, I think it is a very good extension and I would be happy to make a donation for it.

[mattegray]

I have been using this extension to adjust the icon sizes of the Activity Bar... Now I guess I am stuck with these big ass icons... 😢
@drcika Is this the main reason that requires the rewrite?

[pirlo17]

I had to downgrade the vscode to the version: August 2024 (version 1.93)
Update 1.93.1 Link
I´m using the APC v0.4.1 and it is working properly, I hope it can be fix it soon

[jnbooth]

Wow. I forgot how bad VSCode looks without this extension. Agree with @Lady-kimi about donations, but if this is really going to require a full rewrite from scratch, I totally understand wanting to be done with it. Regardless, thank you so much for the work you put into maintaining it for so long.

[yannxaver]

@drcika You could set up funding for a rewrite with Polar (https://docs.polar.sh/issue-funding) or something similar

[james-elicx]

I just discovered that VS Code has a setting to put the activity bar to the bottom. It doesn't inline it properly at the bottom like I could do with this extension, but at least it means I don't need massive buttons down the side...

It's a shame they seem to be working to prevent these kinds of extensions from working when they add so many nice little quality of life tweaks.

[xiao-kousaka]

I didn't update VScode but still got this problem after I switch the "Restore windows" from default all to none. Can anybody explain this ?

[Ender-Wang]

You can rollback https://code.visualstudio.com/updates/v1_93. Some extensions require the latest 1.94 to work such as Python extension from MS, but you can install older one in extension installation page.

[raldisk]

I'm currently on version 1.92.2 & APC v 0.4.1, and it works fine.

[skeswa]

Your extension is incredibly valuable to me, and many other people posting in this issue thread. Many of us are happy to help with our time and money. I encourage use of something like polar.sh so that more of us can help.

[williamjhughes]

I really don't understand what Microsoft's objection to these types of extensions is. They killed Customize UI and now have seemingly killed this. The functionality to do this natively has been requested time after time and they're so against allowing users to do so, I just don't get it. Thank you for your work on this extension, it has been valuable and made VS Code much more bearable to use.

[ahmedsomaa]

I am facing the same issue as well. I have been using this extension for almost a year now and it's awesome. I can't really see myself using VS Code without it. Thank you for so much for the extensions and the efforts you put into this. Such a shame from Microsoft to do so.

[jnbooth]

@williamjhughes If they're like a company I worked at, it's probably because they don't want to deal with exposing and maintaining the code for that. It makes it a lot harder to do big refactors like whatever this update did.

[peterldowns]

Just want to say thank you for the great extension and for all the effort you've put in maintaining it. Definitely made VSCode much nicer to work in. I completely understand not wanting to keep fighting to keep it working, sounds like a frustrating situation for you just as much as for all of us who use the extension.

[HiperDoo]

I appreciate the time you've put into this wonderful extension, I use it to remove all the buttons and text from the interface that I don't use, so I have a great setup and I don't want to give it up.

For now the only solution is to downgrade vscode, on Arch Linux I did it this way:

git clone https://aur.archlinux.org/visual-studio-code-bin.git
cd visual-studio-code-bin

# We look for the ID of the last commit with:
# git log --oneline
# 2a6ac3d [visual-studio-code-bin] Update to 1.93.1

git checkout 2a6ac3d
makepkg -si

With this, no configuration or files are lost and there is no need to delete anything (but perhaps downgrading from a later version can obviously cause problems).

[ShayBox]

Always sucks to see this kind of stuff happening, but I'd rather never update VSC again or use another editor than lose this functionality ❤️

[ahmedsomaa]

@ShayBox That's what I did. I downgraded to 1.93.1 and turned off automatic updates.

{
  "update.mode": "manual",
}

[SudarshanVK]

I have just been using this for the last 3 months. I had a Zen setup.. Microsoft had to spoil it.. Time to move to Zed...

[darianmorat]

I'll stay in 1.91.1... I'm happy with it

[Erik262]

@darianmorat What is the extension name you are using to display the CPU and RAM in your vscode?

[ShayBox]

It looks like that's a desktop bar outside of the window

[peterldowns]

@drcika is it possible to simply explain what changed / how the latest VSCode broke the extension? Is the issue with the monkey-patching script, or with what can be done after the monkey-patch works? Or both, or neither? Asking because I'd be willing to take a look at fixing it if you have any ideas for what to try.

[ventsislav-georgiev]

@jnbooth The above sed just finds the part in the code for creating new Electron BrowserWindows. You can add whatever settings you like there.

For example with without frame + transparency and vibrancy on macOS:

sudo sed -i '' 's/webPreferences/frame:!1,transparent:!0,vibrancy:"under-window",opacity:0.9,webPreferences/' '/Applications/Visual Studio Code.app/Contents/Resources/app/out/main.js'

[GregRos]

Workaround: apc.listRows height setting
About: Height of list rows in the explorer, the command pallette and other widgets

You can't easily modify it using CSS because the list rows are all absolutely positioned with top and height style attributes. Using JavaScript.

I found a workaround. Using the custom CSS extension, set the font-size to make sure there is space inside the row, and then use the new CSS zoom property to scale the component.

.explorer-folders-view .label-name {
  font-family: Consolas !important;
  font-size: 13px !important;
}
.monaco-list-rows {
  zoom: 1.3;
}

transform: scale doesn't work because it causes components to crop.

Here's my command pallete:

[coderguy-21]

Workaround: apc.listRows height setting About: Height of list rows in the explorer, the command pallette and other widgets

You can't easily modify it using CSS because the list rows are all absolutely positioned with top and height style attributes. Using JavaScript.

I found a workaround. Using the custom CSS extension, set the font-size to make sure there is space inside the row, and then use the new CSS zoom property to scale the component.

.explorer-folders-view .label-name {
  font-family: Consolas !important;
  font-size: 13px !important;
}
.monaco-list-rows {
  zoom: 1.3;
}

transform: scale doesn't work because it causes components to crop.

Here's my command pallete:

Doesn't work for the explorer view unfortunately

[noidilin]

Following idea from @GregRos, I was able to successfully reproduce some of APC's customization of the list row only using CSS. The drawbacks are that in some cases, some list rows may still be cropped due to the absolute position, and some icons might align with text properly.

/*
* strategy:
* 1. deliberately choose a small font-size to create additional padding 
* 2. scale whole list item back to readable size while still maintaining the padding
*
* panes in explorer view:
* - open editors: 'open-editors'
* - explorer: 'explorer-folders-view'
* - outline: 'outline-tree'
* - timeline: 'customview-tree'
*
* other panes:
* - search results: 'results'
* - search results in extensions view: 'extensions-list'
* - breakpoints in debug view: 'debug-breakpoints'
*
* other widgets:
* - command: 'quick-input-widget' or 'quick-input-list'
* - suggest: 'suggest-widget' or 'tree'
* - breadcrumbs: 'monaco-breadcrumbs-picker'
* - settings: 'settings-toc-wrapper'
* : 'scm-view'
* : 'debug-view-content'
* */

.open-editors,
.explorer-folders-view,
.outline-tree,
.customview-tree,
.results,
.extensions-list,
.debug-breakpoints,
.quick-input-widget,
.suggest-widget,
.monaco-breadcrumbs-picker,
.settings-toc-wrapper,
.scm-view,
.debug-view-content {
  & .monaco-list-row {
    font-size: 10px !important;
  }
  & .monaco-list-rows {
    zoom: 1.2 !important;
  }
}

/* fix zoom related styles
* - key-binding in command palette
* - install button in extension list
* - counts badge of search result
* - all kind of codicon
* - title of editor group in open editor
* - icons in explorer
*/

.monaco-list-row {
  & .quick-input-list-entry-keybinding,
  & .monaco-action-bar,
  & .monaco-count-badge,
  & .codicon[class*=codicon-],
  & .editor-group,
  & .monaco-icon-label:before {
    zoom: 0.8 !important;
  }
}

Here is the comparison:

before / after

[davidfregoli]

For some reason my titlebar started showing again, despite still being on 1.92.2??

  "window.titleBarStyle": "native",
  "apc.listRow": {
    "lists": ["explorer-folders-view"],
    "fontSize": 15,
    "fontWeight": 800,
    "height": 24 // line spacing between folder tree
  },
  "apc.menubar.compact": true,
  "apc.electron": {
    "frame": true,
    "titleBarStyle": "hidden"
  },
  "apc.header": {
    "height": 37
  },
  "apc.sidebar.titlebar": {
    "height": 37
  },
  "apc.activityBar": {
    "size": 40,
    "itemSize": 40,
    "itemMargin": 0
  },
  "apc.stylesheet": {
    ".title-label": "display: none !important",
    ".composite.title": "display: block !important",
    ".monaco-workbench .part.sidebar .title-actions .actions-container": "justify-content: space-evenly !important"
  },

[BrunoKrugel]

For some reason my titlebar started showing again, despite still being on 1.92.2??

  "window.titleBarStyle": "native",
  "apc.listRow": {
    "lists": ["explorer-folders-view"],
    "fontSize": 15,
    "fontWeight": 800,
    "height": 24 // line spacing between folder tree
  },
  "apc.menubar.compact": true,
  "apc.electron": {
    "frame": true,
    "titleBarStyle": "hidden"
  },
  "apc.header": {
    "height": 37
  },
  "apc.sidebar.titlebar": {
    "height": 37
  },
  "apc.activityBar": {
    "size": 40,
    "itemSize": 40,
    "itemMargin": 0
  },
  "apc.stylesheet": {
    ".title-label": "display: none !important",
    ".composite.title": "display: block !important",
    ".monaco-workbench .part.sidebar .title-actions .actions-container": "justify-content: space-evenly !important"
  },

Mine too, I uninstalled and installed 1.93.1 and it's gone again.

[GregRos]

Workaround: apc.listRows height setting About: Height of list rows in the explorer, the command pallette and other widgets
You can't easily modify it using CSS because the list rows are all absolutely positioned with top and height style attributes. Using JavaScript.
I found a workaround. Using the custom CSS extension, set the font-size to make sure there is space inside the row, and then use the new CSS zoom property to scale the component.

.explorer-folders-view .label-name {
  font-family: Consolas !important;
  font-size: 13px !important;
}
.monaco-list-rows {
  zoom: 1.3;
}

transform: scale doesn't work because it causes components to crop.
Here's my command pallete:

Doesn't work for the explorer view unfortunately

yeah, I got a bit excited because it worked for everything else... but no it doesn't work for the explorer view

Like @noidilin said, the whole pane is absolutely positioned, and it's recalculated whenever the pane is scrolled. It uses a custom scrolling implementation instead of relying on standard DOM-based scrolling.

Resizing the elements or changing anything via CSS causes a mismatch between the actual size of the elements and their expected size, causing the calculation to go wrong. Like cropping of the list or the contents of each row.

I took a look at this extension's code, but I couldn't manage to figure out how it managed to scale things up. Hopefully someone else has better luck.

[FreeIdom]

It’s really disappointing that VSCode doesn’t try to create a more user-friendly interface and instead limits the possibility of customization.

I just wanted to customize the line height of the UI, a very simple request has gone unanswered for years.

After several nights of trial and error, I got it to work by dynamically replacing the style content.

The code is simple
https://github.com/FreeIdom/vscode-friendly-ui

And here’s my custom modification:
https://github.com/FreeIdom/vscode-style/blob/main/default/custom.js

[igorbabko]

@FreeIdom Hi there,

Thanks for sharing! I've used your custom.js but it doesn't seem to load. I'm getting the following result. Do you know what could be wrong?

[jdanbrown]

+1 Another sad apc-extension user here.

Since this is a long thread, I'll attempt to summarize the issue at a high level, in case it helps others follow:

1. The vscode 1.94 release switched its javascript modules from AMD to ESM
   • https://code.visualstudio.com/updates/v1_94#_engineering
   • (What are AMD/ESM? https://dev.to/iggredible/what-the-heck-are-cjs-amd-umd-and-esm-ikm)
2. This broke apc-extension because its current approach relies on dynamic AMD behaviors like define() to intercept and mutate js modules at load time
   • e.g. apc-extension/vs/modules/patch.main.js uses define() to find and mutate vscode's CodeWindow class (definition) — at runtime — to inject parameters like the user's "apc.electron": {...} config into vscode's defaultBrowserWindowOptions (usage, definition)
3. And unlike AMD modules, ESM modules don't expose dynamic load-time behaviors like define(), so it's not clear how to adapt the current approach to work with ESM

I don't know enough about ESM/AMD to think through potential solutions, so I posed the question to gpt-o1 and it didn't come up with any slam-dunk ideas either. Sharing here in case it spark ideas for others:

• https://chatgpt.com/share/675bc699-c6c8-8009-9c80-b17faf870915
• https://gist.github.com/jdanbrown/0c11edb59b72e3880e9af2c863f9e234 (export)

[jdanbrown]

Thank you @subframe7536! Your new extension is working great for me! 🎉

• https://github.com/subframe7536/vscode-custom-ui-style

Here's my config so far, in case helpful:

• Frameless window
• No rounded corners on window
• Monospace fonts in the vscode workspace
• (No css yet, but it should be an easy copy/paste from my previous apc-extension css)

  // Custom css/styling
  //  - https://github.com/subframe7536/vscode-custom-ui-style
  //  - Workaround error: "Installation appears to be corrupt [Unsupported]"
  //    - https://github.com/RimuruChan/vscode-fix-checksums
  //    - https://stackoverflow.com/a/78996147/397334
  //    - https://code.visualstudio.com/docs/supporting/faq#_installation-appears-to-be-corrupt-unsupported
  //  - Commands to reload:
  //    - "Custom UI Style: Reload"
  //    - "Fix Checksums: Apply"
  //    - Quit + restart
  //
  // Monospace everywhere
  "custom-ui-style.font.monospace": "Consolas",
  "custom-ui-style.font.sansSerif": "Consolas",
  //
  // 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 traffic light buttons)
    //  - 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
    //  - "Setting this property to false will prevent the window from being fullscreenable"
    "roundedCorners": false,
    // Nope, this re-shows the traffic light buttons
    // "titleBarStyle": "hidden",
  },
  "custom-ui-style.stylesheet": {
    // TODO Copy from "apc.stylesheet"
  },
  "custom-ui-style.webview.stylesheet": {
    // TODO Copy from "apc.iframe.style"
  },

[jdanbrown]

And iiuc, these special configs from apc-extension won't be easy to incorporate into vscode-custom-ui-style's approach (@subframe7536 please prove me wrong!):

• "apc.menubar.compact"
• "apc.header"
• "apc.activityBar"
• "apc.sidebar.titlebar"
• "apc.statusBar"
• "apc.listRow" 😢

Again iiuc, this is because apc-extension used AMD define() to hook into pre-minified code structure (e.g. class/function definitions), whereas vscode-custom-ui-style has to resort to mutating the minified .js files in place via regexes (e.g. s/experimentalDarkMode:!0/.../to inject "custom-ui-style.electron"):

• https://github.com/subframe7536/vscode-custom-ui-style/blob/v0.3.3/src/manager/main.ts

[subframe7536]

@jdanbrown You are right but right now the extension is quite suitable for my usage, so maybe you need to write extra some stylesheet rules for them, e.g. for status bar: subframe7536/vscode-custom-ui-style#10 (comment)

[jdanbrown]

Workaround: apc.listRows height setting
About: Height of list rows in the explorer, the command pallette and other widgets

...

@GregRos @coderguy-21 @noidilin I'm also sad to lose "apc.listRows" sizing (lineHeight c'mon!), but here's an alternative solution that gets most of the way there:

• Instead of using css zoom to tweak .monaco-list-rows, use vscode "window.zoomLevel" to make everything across the entire vscode workspace smaller/bigger, and then manually adjust your editor and terminal fonts bigger/smaller back to where you want them
• It doesn't give you as precise control as "apc.listRow", "apc.statusBar", "apc.sidebar.titlebar", etc., but it does avoid the cropping / absolute positioning issues from applying css zoom more surgically to individual elements

Below is my config as an example, with a screenshot (same as above):

• fontSize is the same across Explorer, Settings, and an editor (and terminals, not shown here)
• There's no cropping because lineHeight and absolute positioning are scaled together, which you can see in Explorer (and other .monaco-list-rows like Command Palette, Quick Open, Open File, etc.)

  // Monospace everywhere
  "custom-ui-style.font.monospace": "Consolas",
  "custom-ui-style.font.sansSerif": "Consolas",

  // Fonts
  "editor.fontFamily": "Consolas",
  //
  // Classic 11px/13px sizing
  //  - I used this before apc-extension broke (which provided knobs you can't do in css: "apc.listRow", "apc.statusBar", "apc.header")
  //  - But to size everything across the workbench to 11px/13px, I had to do a _lot_ of gnarly css tweaking (fontSize, lineHeight, height, padding, etc.)
  // "editor.fontSize": 11,
  // "editor.lineHeight": 13,
  // "terminal.integrated.fontSize": 11,
  //
  // New approach: Zoom the entire workspace smaller, manually tune fontSize/lineHeight bigger to approximate 11px/13px -- and do less css tweaking! 🎉
  //  - Constraints:
  //    - editor fontSize can be fractional, but lineHeight can't
  //    - terminal fontSize and lineHeight behave in weird ways that I don't understand
  //  - To manually tune:
  //    - Set vscode to classic 11px/13px ("editor.fontSize": 11, "editor.lineHeight": 13, "terminal.integrated.fontSize": 11)
  //    - Hide tab bar and breadcrumbs ("workbench.editor.showTabs": "none", "breadcrumbs.enabled": false)
  //    - Screenshot the whole screen (Screenshot.app -> "Capture Entire Screen")
  //    - Open the screenshot (zoom to "actual size", for 1-1 overlay)
  //    - Set vscode back to the target sizes (~13px/15px)
  //    - Switch tabs back and forth for visual overlay
  //
  // Set lineHeight:15, then tune zoomLevel + fontSize to match classic (11px/13px)
  //  - e.g. Explorer:
  //    - fontSize: 84.3% * 13px = 10.959px 🟢 vs. 11px
  //    - lineHeight: 84.3% * 20px = 16.86px 🟡 vs. 13px
  "window.zoomLevel": -0.785, // 84.3% = 1-(0.785*.20) (window size = zoomLevel * 20% larger/smaller)
  "editor.lineHeight": 15,
  "editor.fontSize": 12.7,
  "terminal.integrated.fontSize": 13, // 🟢 Weird, 13 is visually right and 12.7 is too small (test: llt ~/hack/birdgram/model/data/recordings/)
  "terminal.integrated.lineHeight": 1, // 🟢 Not sure why this works, but empirically it does (terminal lines visually match editor lines)
  //
  // Set lineHeight:16, then tune zoomLevel + fontSize to match classic (11px/13px)
  //  - e.g. Explorer:
  //    - fontSize: 77.2% * 13px = 10.036px ❌ vs. 11px
  //    - lineHeight: 77.2% * 20px = 15.44px 🟡 vs. 13px
  // "window.zoomLevel": -1.139, // 77.2% = 1-(1.139*.20) (window size = zoomLevel * 20% larger/smaller)
  // "editor.lineHeight": 16,
  // "editor.fontSize": 13.55,
  // "terminal.integrated.fontSize": 14, // ❌ Nope: 13 too small, 15 too big, and 15 leaves a big blank space at the top (tall monitor)
  // "terminal.integrated.lineHeight": 1, // 🟢 Not sure why this works, but empirically it does (terminal lines visually match editor lines)

[jdanbrown]

@jdanbrown You are right but right now the extension is quite suitable for my usage, so maybe you need to write extra some stylesheet rules for them, e.g. for status bar: subframe7536/vscode-custom-ui-style#10 (comment)

Ah right, "apc.statusBar" (and some others) should be doable with css because it's just one element at one position (unless the heights of the editor/terminal panes need to adjust too, which would get trickier).

But "apc.listRow" in particular is fundamentally tricky to do in css because vscode uses absolute positioning (top) for each list item. That's the main one I'm banging my head against now (partial solution above).

[OmkarK45]

@FreeIdom Thank you so much for creating it
Can confirm it works perfectly!! Works alongside custom css & js loader too

[muuvmuuv]

@OmkarK45 can you share the style for you command pallette? This looks nice

[OmkarK45]

muuvmuuv

Here you go : https://github.com/OmkarK45/dotfiles/tree/main/2024/12/JetBrains%20Inspired%20Setup
These files are meant for Custom CSS & JS loader extension
@muuvmuuv

[phendan]

And here’s my custom modification:
https://github.com/FreeIdom/vscode-style/blob/main/default/custom.js

Unfortunately, these don't seem to work for me @FreeIdom. I'm getting an error in the dev tools: "Uncaught (in promise) TypeError: Cannot redefine property: vscodeWindowId". Your extension works great for importing CSS which is already very helpful. Hope you can figure out a way to avoid the JS conflict as well since I really miss the bigger list items in the explorer, and thanks for all your hard work so far!

[nrisbeck]

And here’s my custom modification:
https://github.com/FreeIdom/vscode-style/blob/main/default/custom.js

Unfortunately, these don't seem to work for me @FreeIdom. I'm getting an error in the dev tools: "Uncaught (in promise) TypeError: Cannot redefine property: vscodeWindowId". Your extension works great for importing CSS which is already very helpful. Hope you can figure out a way to avoid the JS conflict as well since I really miss the bigger list items in the explorer, and thanks for all your hard work so far!

You probably need to enable this setting: "friendly-ui.disableWorkbenchJs": true

[phendan]

And here’s my custom modification:
https://github.com/FreeIdom/vscode-style/blob/main/default/custom.js

Unfortunately, these don't seem to work for me @FreeIdom. I'm getting an error in the dev tools: "Uncaught (in promise) TypeError: Cannot redefine property: vscodeWindowId". Your extension works great for importing CSS which is already very helpful. Hope you can figure out a way to avoid the JS conflict as well since I really miss the bigger list items in the explorer, and thanks for all your hard work so far!

You probably need to enable this setting: "friendly-ui.disableWorkbenchJs": true

Ah thanks! I'd tried that before but apparently it needed a couple of restarts to take effect. Pretty nice! Together with subframe7536's extension I'm now back to where I was with APC. I still get a warning that the installation's corrupt but everything seems to work fine otherwise.