2

I'd like to install custom styles in order to have different fonts for classes and attributes in visual studio code.

I installed the Custom CSS and JS Loader extension, and followed the guide but it doesn't seem to work.

Here's what I've tried. I created a file styles.css where I put this code:

.mtk1,
.mtk2,
.mtk8,
.mtk9,
.mtk10,
.mtk12,
.mtk11,
.mtk7,
.mtk3,
.mtk13,
.mtk16 {
  margin-left: 1px;
  font-family: "Indie Flower";
  font-size: 1em;

}

.mtk7,
.mtk4 {
  font-family: "Arial";
  font-size: 0.7em;
}

/*
For the tab titles.
*/
.monaco-icon-label-description-container .label-name {
  font-family: "Indie Flower";
  font-size: 1.3em;
}

.tabs-container .monaco-icon-label-description-container .label-name,
.sidebar .monaco-icon-label-description-container .label-name,
.quick-open-row .monaco-icon-label-description-container .label-name {
  font-family: -apple-system,BlinkMacSystemFont,Segoe WPC,Segoe UI,HelveticaNeue-Light,Ubuntu,Droid Sans,sans-serif;
  font-size: 1em;
}

Then in settings.json I added the following settings:

{
  "vscode_custom_css.imports": ["file:///home/mat/vscode_extensions/styles.css"],
  "vscode_custom_css.policy": true
}

I took the path by typing inside this directory pwd, so it should be correct path. However, it still doesn't want to apply styles, neither fontFamily nor fontSize.

Does anyone knows where the problem is?

KyleMit
  • 30,350
  • 66
  • 462
  • 664
Jacki
  • 632
  • 3
  • 14
  • 26

2 Answers2

7

Extension didn't work for me but For what it's worth....while i was messing with this...if you go to the help menu, toggle the Developer Tools.... It will Check the network tab > you will see there is one css file that vscode loads up.

file:///Applications/Visual%20Studio%20Code.app/Contents/Resources/app/out/vs/workbench/workbench.desktop.main.css

I went into this file and directly edited the css directly...

since i already had a css file that i intended to use with this extension...

@import url("file:///Users/adrian/.vscode/vs-code-styles.css");

Reload & Problem solved.

For example, i love my font but all i wanted was the tag to by with a different font-family then the attributes. After some trial and error, this did it. Mileage may very depending on whether or not vscode is changing these classes all the time.

span:not(.mtk1) + .mtki, span:not(.mtk1) + .mtk6{
    font-family: 'Courier New' !important;
}
adrian
  • 147
  • 1
  • 1
  • 5
  • 1
    **WARNING** - I wouldn't do this. When I modified the css file, on the next launch I got the warning ["Your Code installation appears to be corrupt. Please reinstall"](https://i.imgur.com/fAggsXi.png). They might have a checksum to prevent malicious tampering – KyleMit Oct 23 '20 at 17:28
  • 1
    @KyleMit That seems to be normal when you're loading your own CSS. If you use the Custom CSS and JS Loader extension you get the same warning. – nerrons Feb 17 '21 at 19:15
  • 1
    @nerrons, I've been using [Customize UI](https://marketplace.visualstudio.com/items?itemName=iocave.customize-ui) and [Monkey Patch](https://marketplace.visualstudio.com/items?itemName=iocave.monkey-patch) and haven't run into the same issue – KyleMit Feb 17 '21 at 20:08
  • @KyleMit Yes those two are fine, but the Custom CSS and JS Loader extension specifically states that it will trigger the "corrupt" message in their README. I'm not sure why though – nerrons Feb 18 '21 at 01:31
  • 1
    Much better than giving admin rights to a random extension. – tejasvi88 Apr 28 '21 at 06:22
1

You have to run VSCode as Administrator and then Enable CSS in JS.

Example path to VSCode located in Applications: sudo /Applications/Visual\ Studio\ Code.app/Contents/MacOS/Electron

And don't forget to install all those custom fonts to your Mac device.

Skjal
  • 118
  • 1
  • 7
  • And recently there was an update for VSCode which changed classes on elements. So your custom css will probably not match what you are expecting from it. – Skjal Dec 19 '19 at 13:27
  • it works! The problem was that I didn't run it as a administrator... Thank you so much:) – Jacki Dec 20 '19 at 07:53
  • Btw if in the future you modify your styles, to apply them you need to hit `ctrl+shift+p` (show all commands) -> `Enable Custom CSS and JS` and then restart vscode! – Gershom Maes Nov 30 '22 at 14:57