Allow to change the font size and font of the workbench

[hsdk123]

At the moment, we can only change the font size / font of the editor. If we want to change the font size, we need to use a roundabout method of "zooming in / out". It would be nice if this could be adjusted through the preferences.

[skube]

Further to this, it seems weird that if I want larger fonts outside of the editor I have to zoom in each time I restart.

[egamma]

pls see #291 for the zooming issue (in general pls do not create combo issues 😄 )

[conceptualspace]

+1

v1.4.0 seemed to make the file explorer fonts larger/bolder, making it harder to traverse a large directory

[bobrocke]

+1

[nishantgeorge]

+1

[dodalovic]

👍

[cgiacomi]

👍

[bobrocke]

Does the new UI theming interface give access to the font size?

[kentor]

In addition, I would like to increase the line spacing in the explorer. File names are way too close to each other and is fatiguing to look at.

[xster]

Ha, I was gonna suggest exposing line height so I could decrease it and pack more files into each screen.

[timc13]

just to add another reason:

• changing the Explorer to a monospaced font is easier to read when scanning for files

[mzabuawala]

+1

Please add support for changing font size of EXPLORER window.

[dragonDScript]

Would the VSCode team merge a PR that does this? (I want to do it myself) Seems like a lot of people are proposing and voting this feature, but no one is actually doing this.

[SidWorks]

Using MonoLisa Font.

[dragonDScript]

Wow! Your setup looks amazing! Can you share your settings via a Gist or something like that? @SidWorks

[levacic]

I've been looking for a way to have bold folder labels in the explorer tree view, similar to what Sublime Text has by default, and as mentioned in (at least) the issues #10748 and #75838.

Ended up using the iocave.customize-ui extension with the following settings:

    "customizeUI.stylesheet": {
        "[id='workbench.view.explorer'] .pane-body ": "font-family: 'Inconsolata'; font-size: 14px;",
        "[id='workbench.view.explorer'] .monaco-icon-label.folder-icon > .monaco-icon-label-container > .monaco-icon-name-container > .label-name": "font-weight: 900; filter: brightness(1.5);"
    },
    "customizeUI.fontSizeMap": {
        "13px": "13px",
        "monospace": "14px"
    },

These work well for me using Material Theme Darker High Contrast, probably might require tweaking for other themes.

Also, obviously the font family and sizes depend on the individual setup. The filter: brightness(1.5) is there to preserve the original folder label colors (e.g. if your setup changes their colors based on the Git status or code linting/analysis extensions detecting problems etc.) but make them stand out even more.

I also use "workbench.tree.indent": 20 for an easier to read tree view.

Here's what that might look like:

Obviously the CSS selectors for targeting folders are prone to breakage with VS Code updates, but this works for me in version 1.52.1 just fine.

[dragonDScript]

I found a solution to change the entire workflow (native dialogs, native window, the explorer,etc).
If you are using Ubuntu with GNOME, install the GNOME Tweaks application, enter in the typography menu, and change the typography to whetever you want. VSCode is still uglier than Atom, but it has a better look, and the style is kept in all VSCode versions.

[SidWorks]

Wow! Your setup looks amazing! Can you share your settings via a Gist or something like that? @SidWorks

Thank You.
I use City light theme and City light icons with MonoLisa font,
You can try Consolas or Fira Code ligature version.
After installing Customize UI( https://marketplace.visualstudio.com/items?itemName=iocave.customize-ui )
I have set
"window.zoomLevel": -2,
"editor.lineHeight": 37,
"customizeUI.font.regular": "MonoLisa",
"customizeUI.font.monospace": "MonoLisa",
"customizeUI.listRowHeight": 28,

for better readability.

That's all 🙂.

[bsbodden]

Here what my setup looks like just with the CustomizeUI extension with:

  "editor.fontFamily": "Operator Mono, Menlo, Monaco, 'Courier New', monospace",

[natanshalva]

Cool! The plug-in works for met to. Does anyone know the code or CSS class to enlarge the bottom status bar?

Did you find a way to do that?

[KingOfSpades]

Cool! The plug-in works for met to. Does anyone know the code or CSS class to enlarge the bottom status bar?

Did you find a way to do that?

Unfortunately not. I'm not great when it comes to adjusting/overwriting CSS. If someone could share a snippet of how to adjust this I would be most thankful.

[danielo515]

Cool! The plug-in works for met to. Does anyone know the code or CSS class to enlarge the bottom status bar?

Did you find a way to do that?

Unfortunately not. I'm not great when it comes to adjusting/overwriting CSS. If someone could share a snippet of how to adjust this I would be most thankful.

@KingOfSpades @natanshalva the height is fixed on the element, so you can not target it using CSS.
However, you can target the font size (at least). This is what I have:

 "customizeUI.stylesheet": {
    ".monaco-workbench .part.statusbar>.items-container": font-size: 20px;",
  },

[AradAral]

No updates on this?

[tainzhi]

looking forward to the update to change workbench fontsize, especially statusbar.

when i use vim, the command line string is not clearly in statusbar.

[jbox5]

@danielo515

the height is fixed on the element, so you can not target it using CSS. However, you can target the font size (at least).

This works for me:

  "customizeUI.stylesheet": {
    "div.split-view-container > div:nth-child(3)": "top: calc(100vh - 38px) !important; height: 38px !important;",
    ".monaco-workbench .part.statusbar": "min-height: 38px; height: 38px !important;"
  }

[danielo515]

@danielo515

the height is fixed on the element, so you can not target it using CSS. However, you can target the font size (at least).

This works for me:

  "customizeUI.stylesheet": {
    "div.split-view-container > div:nth-child(3)": "top: calc(100vh - 38px) !important; height: 38px !important;",
    ".monaco-workbench .part.statusbar": "min-height: 38px; height: 38px !important;"
  }

I think I tried using !important but I obviously did it wrong. Thank you very much

[netik]

In the latest VSCode I had to do this:

    "customizeUI.stylesheet": {
        "[id='workbench.view.explorer'] .pane-body ": "font-family: 'Inconsolata' !important; font-size: 14px;",
        "[id='workbench.view.explorer'] .monaco-icon-label": "font-family: 'Inconsolata' !important; font-size: 14px;",
        "[id='workbench.view.explorer'] .monaco-icon-label.folder-icon > .monaco-icon-label-container > .monaco-icon-name-container > .label-name": "font-family: 'Inconsolata'; font-weight: 850; filter: brightness(1.5);"
    },

[korishan]

In the latest VSCode I had to do this:

    "customizeUI.stylesheet": {
        "[id='workbench.view.explorer'] .pane-body ": "font-family: 'Inconsolata' !important; font-size: 14px;",
        "[id='workbench.view.explorer'] .monaco-icon-label": "font-family: 'Inconsolata' !important; font-size: 14px;",
        "[id='workbench.view.explorer'] .monaco-icon-label.folder-icon > .monaco-icon-label-container > .monaco-icon-name-container > .label-name": "font-family: 'Inconsolata'; font-weight: 850; filter: brightness(1.5);"
    },

I did this and the Status bar did not change in size. The font changed slightly, but the icons haven't changed in size.
I also added this line:

".monaco-workbench .part.statusbar>.items-container": "font-size: 14px;",

I'm running Windows 10 at 3840x2160 with scaling at 125%. I have a larger screen for more real-estate, so I don't see the point in scaling higher than 125%, even 150% makes standard fonts/windows too big.
I would like to have the buttons on the Status Bar larger, not just the fonts. Is there any way to change this? If there currently isn't a way, can we please have the option added so we can? Open the CSS up to public changes, please.

Update: adding image to show difference:

In the top image I using the added code with font size of 20px. In the second one the font size is 14px. As you can see, the fonts changed, but the images did not.

[korishan]

Well, found out something interesting
I used this line:
".monaco-workbench .part.statusbar>.items-container": "transform: scale(1.2);",
and I can change the scaling of the StatusBar. Unfortunately, it shifts everything to the left and half, or more, can't be seen, even in full screen mode.

Scale at 1.2:

Scale at 1.5:

Scale at 0.8:

So now need to figure out how to keep the left board within the bounds of the window.

[korishan]

Continued update:

Ok, so I figured out that you can use 'padding-left'
".monaco-workbench .part.statusbar>.items-container": "transform: scale(1.5); padding-left: 175px",

However, there's another issue with this. If I change the size of the window, it moves the text accordingly

Resized to a larger window:

And it also moves the text on the right side as well.
So it looks like this is the area that needs to be worked on for the CSS codes. Just have to figure out the correct ones to call to make the changes.

[dragonDScript]

Continued update:

Ok, so I figured out that you can use 'padding-left'
".monaco-workbench .part.statusbar>.items-container": "transform: scale(1.5); padding-left: 175px",

However, there's another issue with this. If I change the size of the window, it moves the text accordingly

Resized to a larger window:

And it also moves the text on the right side as well.
So it looks like this is the area that needs to be worked on for the CSS codes. Just have to figure out the correct ones to call to make the changes.

maybe use a relative measure instead of pixels, such as %, vw, etc.?

[danielo515]

Try `display: flex; justify-content: center; align-items: center`

…

On Mon, May 3, 2021 at 7:16 PM dragonDScript ***@***.***> wrote: Continued update: Ok, so I figured out that you can use 'padding-left' ".monaco-workbench .part.statusbar>.items-container": "transform: scale(1.5); padding-left: 175px", However, there's another issue with this. If I change the size of the window, it moves the text accordingly [image: image] <https://user-images.githubusercontent.com/25021176/116835533-f17be100-ab90-11eb-837a-0ad8ec01f926.png> Resized to a larger window: [image: image] <https://user-images.githubusercontent.com/25021176/116835545-fe003980-ab90-11eb-8244-76376ea24a9f.png> And it also moves the text on the right side as well. So it looks like this is the area that needs to be worked on for the CSS codes. Just have to figure out the correct ones to call to make the changes. maybe use a relative measure instead of pixels, such as %, vw, etc.? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#519 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AARKJWPCMWZOJYAKBH6Y3WTTL3K6DANCNFSM4BVABFYA> .

-- --- https://danielorodriguez.com

[korishan]

maybe use a relative measure instead of pixels, such as %, vw, etc.?

Nope, % doesn't work. It still does the same thing as with pixel count

Try display: flex; justify-content: center; align-items: center

This works fairly well. But now there's a huge gap on the left side that changes with window width 😝

I can sorta live with that setting, even tho the icons will move a little. But at least they are a lot easier to see/click now.

I did try variations of the alignment (except right align) and it's either partially visible on the left, or centered like in these images.
Here's the code so far:
"customizeUI.stylesheet": {
".monaco-workbench .part.statusbar>.items-container": "transform: scale(1.5); display: flex; justify-content: center; align-items:center",
},


I can't quite tell how many cells there are in the table for the status bar. Not sure if it's 2 or 3. It's strange how the left boarder changes to (what appears to be) negative values of what the main window is.
Does anyone know what the value would be to change the table left side boarder? Could it be a different .monaco-workbench.part.xx name?

[danielo515]

Ok, if you want to take as much available space as possible while keeping it dynamic, try this: `display: flex; justify-content: space-between; align-items: center` or maybe `display: flex; justify-content: space-evenly; align-items: center` That will spread the components to take all the available space

…

On Thu, May 6, 2021 at 10:15 PM korishan ***@***.***> wrote: maybe use a relative measure instead of pixels, such as %, vw, etc.? Nope, % doesn't work. It still does the same thing as with pixel count Try display: flex; justify-content: center; align-items: center This works fairly well. But now there's a huge gap on the left side that changes with window width 😝 [image: image] <https://user-images.githubusercontent.com/25021176/117359500-7e6eb500-ae85-11eb-80f0-1c8795300c00.png> [image: image] <https://user-images.githubusercontent.com/25021176/117359542-8d556780-ae85-11eb-82a3-e17f13dc6dcc.png> I can sorta live with that setting, even tho the icons will move a little. But at least they are a lot easier to see/click now. I did try variations of the alignment (except right align) and it's either partially visible on the left, or centered like in these images. Here's the code so far: "customizeUI.stylesheet": { ".monaco-workbench .part.statusbar>.items-container": "transform: scale(1.5); display: flex; justify-content: center; align-items:center", }, I can't quite tell how many cells there are in the table for the status bar. Not sure if it's 2 or 3. It's strange how the left boarder changes to (what appears to be) negative values of what the main window is. Does anyone know what the value would be to change the table left side boarder? Could it be a different .monaco-workbench.part.xx name? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#519 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AARKJWO2BEI3L35JJOLDSNLTML2HHANCNFSM4BVABFYA> .

-- --- https://danielorodriguez.com