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

This is a very good css configuration for the above mentioned extension.

PS: Make sure to update the font names in the below mentioned code.

/* --------------------------------------------------------------------------- */
/* activitybar-icon-extension */
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-label:not(.codicon) {
 font-size: var(--font-size-m);
 opacity: 0.50;
}

/* activitybar-icon-inbuilt */
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-label.codicon {
 font-size: var(--font-size-m);
 opacity: 0.50;
}

/* --------------------------------------------------------------------------- */
/* widget-find */
.monaco-findInput .monaco-inputbox {
 font-family: var(--font-type-m);
 font-size: var(--font-size-m);
}

.search-view .query-details.more h4 {
 font-family: var(--font-type-m);
 font-size: var(--font-size-m);
}

.monaco-editor .find-widget .monaco-findInput .input {
 font-family: var(--font-type-m);
 font-size: var(--font-size-m);
}

.monaco-editor .find-widget > .find-part {
 font-family: var(--font-type-m);
 font-size: var(--font-size-m);
}

/* --------------------------------------------------------------------------- */
/* list-text */
.monaco-highlighted-label {
 font-family: var(--font-type-m);
 font-size: var(--font-size-m);
}

/* list-line-height-compensate */
.monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row {
 transform: scale(1, 1);
}

/* --------------------------------------------------------------------------- */
/* explorer */
.explorer-folders-view > .monaco-list > .monaco-scrollable-element > .monaco-list-rows span {
 font-size: var(--font-size-m);
}

.explorer-folders-view > .monaco-list > .monaco-scrollable-element > .monaco-list-rows {
 margin-left: -12px;
}

.monaco-list-row[aria-expanded] {
 opacity: 0.5;
}

.monaco-list-row[aria-expanded=true] {
 font-weight: bold;
}

.monaco-list-row.selected {
 font-weight: bold;
}

/* --------------------------------------------------------------------------- */
/* sidebar-1-header */
.monaco-workbench .part.sidebar > .title > .title-label h2 {
 font-family: var(--font-type-l);
 font-size: var(--font-size-m);
 text-transform: lowercase;
}

/* --------------------------------------------------------------------------- */
/* sidebar-2-header */
.monaco-action-bar .action-label {
 font-family: var(--font-type-l);
 font-size: var(--font-size-m);
 text-transform: lowercase;
}

/* --------------------------------------------------------------------------- */
/* sidebar-3-header */
.monaco-pane-view .pane > .pane-header h3.title {
 font-family: var(--font-type-l);
 font-size: var(--font-size-m);
 text-transform: lowercase;
}

/* --------------------------------------------------------------------------- */
/* tab */
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label a,
.monaco-workbench .part.editor > .content .editor-group-container > .title .title-label a {
 font-family: var(--font-type-l);
 font-size: var(--font-size-m);
}

/* --------------------------------------------------------------------------- */
/* statusbar-text */
.monaco-workbench .part.statusbar {
 font-family: var(--font-type-n);
 font-size: var(--font-size-n);
}

/* statusbar-icon */
.monaco-workbench .part.statusbar > .items-container > .statusbar-item span.codicon {
 font-size: var(--font-size-n);
}

/* --------------------------------------------------------------------------- */
/* z */
.mac {
 --monaco-monospace-font: var(--font-type-n);
 font-family: var(--font-type-n);
 font-size: var(--font-size-n);
}

/* --------------------------------------------------------------------------- */
:root {
 --font-size-l: 27.50px;
 --font-size-m: 22.00px;
 --font-size-n: 16.50px;
 --font-type-l: 'HarayKrsna-Extrabold-Ultra-Condensed', monospace;
 --font-type-m: 'HarayKrsna-Ultra-Condensed', monospace;
 --font-type-n: 'HarayKrsna-Extralight-Ultra-Condensed', monospace;
}

/* --------------------------------------------------------------------------- */
/* fixes border */
.monaco-workbench .part > .composite.title {
 border-bottom: 1px solid #808080FF;
}

Answer 2

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 3

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.