Reputation: 672
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?
Upvotes: 3
Views: 14530
Reputation: 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;
}
Upvotes: 0
Reputation: 317
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;
}
Upvotes: 8
Reputation: 128
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.
Upvotes: 2