visual studio code import custom css and js extension

Question

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?

Answer 1

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

Answer 2

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.