Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow to change the font size and font of the workbench #519

Open
hsdk123 opened this issue Nov 24, 2015 · 292 comments
Open

Allow to change the font size and font of the workbench #519

hsdk123 opened this issue Nov 24, 2015 · 292 comments

Comments

@hsdk123
Copy link

@hsdk123 hsdk123 commented Nov 24, 2015

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
Copy link

@skube skube commented Dec 3, 2015

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
Copy link
Member

@egamma egamma commented Dec 3, 2015

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

@egamma egamma modified the milestone: Backlog Dec 10, 2015
@bpasero bpasero changed the title Change font size of outside editor Allow to change the font size of the workbench Apr 7, 2016
@bpasero bpasero self-assigned this Apr 7, 2016
@conceptualspace
Copy link

@conceptualspace conceptualspace commented Aug 5, 2016

+1

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

@bpasero bpasero removed their assignment Aug 17, 2016
@bpasero bpasero changed the title Allow to change the font size of the workbench Allow to change the font size and font of the workbench Feb 10, 2017
@bobrocke
Copy link

@bobrocke bobrocke commented Mar 6, 2017

+1

@nishantgeorge
Copy link

@nishantgeorge nishantgeorge commented Apr 14, 2017

+1

2 similar comments
@dodalovic
Copy link

@dodalovic dodalovic commented May 5, 2017

👍

@cgiacomi
Copy link

@cgiacomi cgiacomi commented May 5, 2017

👍

@bobrocke
Copy link

@bobrocke bobrocke commented May 5, 2017

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

@kentor
Copy link

@kentor kentor commented May 17, 2017

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
Copy link

@xster xster commented May 18, 2017

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

@timc13
Copy link

@timc13 timc13 commented Jun 12, 2017

just to add another reason:

  • changing the Explorer to a monospaced font is easier to read when scanning for files
@mzabuawala
Copy link

@mzabuawala mzabuawala commented Jun 21, 2017

+1

Please add support for changing font size of EXPLORER window.

@dragonDScript
Copy link

@dragonDScript dragonDScript commented Dec 22, 2020

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
Copy link

@SidWorks SidWorks commented Dec 27, 2020

image

Using MonoLisa Font.

@dragonDScript
Copy link

@dragonDScript dragonDScript commented Dec 27, 2020

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

@levacic
Copy link

@levacic levacic commented Dec 27, 2020

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:

Screenshot from 2020-12-27 14-32-05

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
Copy link

@dragonDScript dragonDScript commented Dec 27, 2020

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.
image
image

@SidWorks
Copy link

@SidWorks SidWorks commented Dec 28, 2020

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
Copy link

@bsbodden bsbodden commented Dec 28, 2020

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

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

Screen Shot 2020-12-07 at 10 23 28 AM

@natanshalva
Copy link

@natanshalva natanshalva commented Jan 9, 2021

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

Did you find a way to do that?

@KingOfSpades
Copy link

@KingOfSpades KingOfSpades commented Jan 10, 2021

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

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
Copy link

@danielo515 danielo515 commented Feb 4, 2021

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

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;",
  },

image

@AradAral
Copy link

@AradAral AradAral commented Feb 15, 2021

No updates on this?

@tainzhi
Copy link

@tainzhi tainzhi commented Feb 20, 2021

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
Copy link

@jbox5 jbox5 commented Feb 22, 2021

@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;"
  }

image

@danielo515
Copy link

@danielo515 danielo515 commented Feb 22, 2021

@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;"
  }

image

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

@netik
Copy link

@netik netik commented Mar 1, 2021

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
Copy link

@korishan korishan commented May 3, 2021

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:
image

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
Copy link

@korishan korishan commented May 3, 2021

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:
image

Scale at 1.5:
image

Scale at 0.8:
image

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

@korishan
Copy link

@korishan korishan commented May 3, 2021

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

Resized to a larger window:
image

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
Copy link

@dragonDScript dragonDScript commented May 3, 2021

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

Resized to a larger window:
image

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
Copy link

@danielo515 danielo515 commented May 4, 2021

@korishan
Copy link

@korishan korishan commented May 6, 2021

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

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
Copy link

@danielo515 danielo515 commented May 7, 2021

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet