[theming] Allow theming workbench fonts

be5invis commented 7 years ago

Including

Family
Weight
Style/Variant/Features
Include typeface files in theme pack
Per-language settings (to support fallbacks, cf. #5260)

pahen commented 7 years ago

I would love this! This is how the Ayu theme could look like if we had this feature.

screen shot 2017-05-25 at 23 12 24

guidobouman commented 7 years ago

Also see this similar issue about allowing the setting of a custom font on non-editor parts of the app: https://github.com/Microsoft/vscode/issues/519

leonbreedt commented 7 years ago

This is probably my biggest annoyance switching from Atom, that I have to live with the standard font.

EDIT: "Fixed" by hacking /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/workbench.main.css, and dismissing "corrupt" warning, but a feature would be preferable...

johnpapa commented 6 years ago

Adding these as per @aeschli and @chrisdias

These are not all about the fonts. some are letter spacing, font-style, color, too.

Font settings for the VS Code Shell

The font-family for the shell itself, so we can change the title bar, sidebar, status bar, file tabs, and more. This would be the default for the shell and help match the code.

.monaco-shell {
  font-family: 'Operator Mono', 'Fira code', 'Inconsolata', monospace;
  letter-spacing: 0.5px;
}

Panel headers

Expose the color, font settings and letter spacing for the panel header titles. Letter spacing is sometimes needed as the titles' letters are very close and more difficult to read in some fonts.

.vs-dark .monaco-panel-view .panel > .panel-header > .title {
  font-weight: normal;
  letter-spacing: 1px;
}

Window titles

Expose color, font settings, and letter spacing for window titles

.vs-dark .monaco-workbench > .part.titlebar > .window-title {
  color: #fafafa;
  letter-spacing: 1px;
  font-weight: 200;
}

File Tabs

Expose color, font settings, and letter spacing for tabs (file tabs)

.monaco-workbench .tabs-container .tab * {
  font-style: italic;
}

johnpapa commented 6 years ago

@aeschli Can you provide some feedback on which of these may be within your roadmap?

RomainLanz commented 6 years ago

Any news on this?

niranjannitesh commented 5 years ago

Starting to hate vscode on ubuntu because I dont like the ubuntu font in the UI.

ryaninvents commented 5 years ago

I'm in the camp of people who would like to use an alternate UI font on Ubuntu. Here's how I managed to do it.

I downloaded a copy of my font of choice -- Lato -- and used FontForge to rename it to "Ubuntu". (I'd wanted to name it "BlinkMacSystemFont" so it wouldn't collide, but VS Code applies OS-specific font settings, so that wasn't possible.) I updated Regular, Italic, Bold, and Bold Italic, then copied the new font files to ~/.fonts and ran fc-cache -f -v to reload the font cache.

It would be nice if there were an unused font name at the start of the font-family declaration, such as LinuxSystemUI, so we wouldn't have to "clobber" the Ubuntu font. However, I'm happy with my setup now.

wsdfhjxc commented 5 years ago

You don't have to mess with system fonts, since there is an extension called Custom CSS and JS Loader, which allows you to theme VSCode in a similar way to Firefox with userChrome.css.

The rule to change the UI font would be like:

body {
  font-family: "Roboto" !important;
  font-size: 9.5pt !important;
}

be5invis commented 5 years ago

@wsdfhjxc However we want an official way to do this, so theme authors can fully implement their design.

jonbp commented 5 years ago

Starting to hate vscode on ubuntu because I dont like the ubuntu font in the UI.

I thought i was the only one.. My whole system is Roboto except VS Code

mikelpr commented 5 years ago

another workaround is to add the following to ~/.config/fontconfig/fonts.xml

<?xml version='1.0'?>
<!DOCTYPE fontconfig SYSTEM 'fonts.dtd'>
<fontconfig>
 ... (snip or maybe nothing)
 <match>
  <test name="family" qual="any">
   <string>Ubuntu</string>
  </test>
  <edit binding="same" name="family" mode="assign">
   <string>Roboto</string>
  </edit>
 </match>
 ...
</fontconfig>

camilopedroso commented 5 years ago

Adding these as per @aeschli and @chrisdias

These are not all about the fonts. some are letter spacing, font-style, color, too.

Font settings for the VS Code Shell

The font-family for the shell itself, so we can change the title bar, sidebar, status bar, file tabs, and more. This would be the default for the shell and help match the code.
.monaco-shell {
  font-family: 'Operator Mono', 'Fira code', 'Inconsolata', monospace;
  letter-spacing: 0.5px;
}
Panel headers

Expose the color, font settings and letter spacing for the panel header titles. Letter spacing is sometimes needed as the titles' letters are very close and more difficult to read in some fonts.
.vs-dark .monaco-panel-view .panel > .panel-header > .title {
  font-weight: normal;
  letter-spacing: 1px;
}
Window titles

Expose color, font settings, and letter spacing for window titles
.vs-dark .monaco-workbench > .part.titlebar > .window-title {
  color: #fafafa;
  letter-spacing: 1px;
  font-weight: 200;
}
File Tabs

Expose color, font settings, and letter spacing for tabs (file tabs)
.monaco-workbench .tabs-container .tab * {
  font-style: italic;
}

Hi @johnpapa! Is there a solution for PC? I tried your recipe, but, It's not working! Thanks in advance!

lambdakris commented 1 year ago

This sounds related to this older issue https://github.com/microsoft/vscode/issues/519

AlexWayfer commented 1 year ago

This sounds related to this older issue #519

If not a duplicate.

mitsukuri commented 1 year ago

This sounds related to this older issue #519

If not a duplicate.

With about 2000 upvotes more and 8 years older...

m417z commented 1 year ago

I'd like to offer a solution for Windows which might be preferable for some users due to its simplicity of usage, and might seem like an overkill for others since it requires running a (lightweight) program in the background.

The solution boils down to injecting extra CSS code to VSCode, similarly to what Monkey Patch does, but this method is different and has pros and cons.

Pros:

No VSCode files are modified on disc, so there's no risk for a permanent damage.
Works seamlessly, no need to do anything after each VSCode update.

Cons:

Requires running a (lightweight) program in the background.

Steps:

Download and install Windhawk.
Install the VSCode Tweaker mod.
Configure the desired CSS in the settings.

See the example screenshot below.

Disclaimer: I'm the author of Windhawk.

heartacker commented 1 year ago

I'd like to offer a solution for Windows which might be preferable for some users due to its simplicity of usage, and might seem like an overkill for others since it requires running a (lightweight) program in the background.

The solution boils down to injecting extra CSS code to VSCode, similarly to what Monkey Patch does, but this method is different and has pros and cons.

Pros:

No VSCode files are modified on disc, so there's no risk for a permanent damage.

Works seamlessly, no need to do anything after each VSCode update.

Cons:

Requires running a (lightweight) program in the background.

Steps:

Download and install Windhawk.

Install the VSCode Tweaker mod.

Configure the desired CSS in the settings.

See the example screenshot below.

Disclaimer: I'm the author of Windhawk.

thank, It works, and could you please do not hide the command center ,Thanks

m417z commented 1 year ago

thank, It works, and could you please do not hide the command center ,Thanks

It's hidden because of the sample JavaScript code which shows a message on the titlebar. Just remove it in the mod's settings.

microsoft / vscode