Customizing VS Code for Two Fonts.

customizing-vs-code.md

Customizing VS Code

I followed the instructions in this blog post Multiple Fonts: Alternative to Operator Mono in VSCode, but did not see any changes made to VS Code. After digging a bit, I discovered that all the CSS class names had changed. They’re now e.g. .mtk13, .mtk16 { … }.

Gotchas

• Ensure it’s a file URL e.g. { "vscode_custom_css.imports": [ "file:///Users/Brian/Desktop/vscode-style.css" ] }
• If you move the location of your file and update your user settings with the new location, you will need to disable and enable custom CSS cmd+shift+p.
• Also, anytime you change the style in your custom CSS file, you need to disable, then re-enable the extension.

For reference

• vscode-styles for operator mono, fira code ligatures, and oceanic next italic · GitHub
• Not working in VS Code 1.9.0 · Issue #8 · be5invis/vscode-custom-css · GitHub
• Not compatible with VS code version 1.10.2 · Issue #9 · be5invis/vscode-custom-css · GitHub

settings.json

// Add these to your VS Code settings.json
  "editor.fontFamily": "'Fira Code', Consolas, monospace",
  "editor.fontLigatures": true,
  "editor.fontSize": 16,
  "vscode_custom_css.imports": [
    "file:///path/to/your/styles/styles.css" // styles.css in this gist.
  ],

styles.css

/*
 I decided on the Brush Script MT cursive font for now. Works better for me than FlottFlott.
*/
    .mtk3,
    .mtk13,
    .mtk16 {
      margin-left: 1px;
      font-family: "Brush Script MT";
      font-size: 1.6em;
    }

    .mtk4 {
      font-family: "Brush Script MT";
      font-size: 1.4em;
    }

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

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

Solved: For what it's worth, extension never worked for me....However, while i was in there...if you go to the help menu, toggle the Developer Tools....
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/myaccountfolder/someGoodLocationFolder/.vscode/vs-code-styles.css");

Reload & Problem solved.

For example, i love my font but all i wanted was the tag to be 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;
}

It's not working for me I am ubuntu 20.04 and my version of VScode is 1.47.3. How to make it work?

Solved: For what it's worth, extension never worked for me....However, while i was in there...if you go to the help menu, toggle the Developer Tools.... 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/myaccountfolder/someGoodLocationFolder/.vscode/vs-code-styles.css");

Reload & Problem solved.

For example, i love my font but all i wanted was the tag to be 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;
}

Could you please explain to me the relationship between styles.css and mtk? every time that I change my theme stlyes.css does not work properly and each .mtk in each theme refers to a specific part of the codes, I'm confused about how to write styles.css that works with each theme, and after all I just want wot change the font for keywords but in includes operators(+=><) that I do not want to