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.
*/
.mtk7,
.mtk3,
.mtk13,
.mtk16 {
  margin-left: 1px;
  font-family: "Brush Script MT";
  font-size: 1.7em;
}

.mtk7,
.mtk4 {
  font-family: "Brush Script MT";
  font-size: 1.7em;
}

/*
  For the tab titles.
*/
.monaco-icon-label-description-container .label-name {
  font-family: "Brush Script MT";
  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;
}

It is even possible to access the stylesheet stored as a gist by using the service provided by RawGit

I've followed these steps but for some reason vscode doesn't seem to recognize my style.css file? I confirmed the filepath is correct and I disabled/re-enabled the custom css loader but no styles I add to the css file get picked up. Thoughts?

Path is incorret: file:///Users/Brian/Desktop/vscode-style.css

The correct path IS file:///C:/Users/Brian/Desktop/vscode-style.css

Dont miss C:/ before User

I havent tried it yet, but I did spend several hours digging through the Dev Console to get the glow to work (a la synthwave84 - an amazing theme. I have a very heavily modified theme that will be appearing on the extension store shortly. I took his theme and then cranked it wayyy up, redoing every definition for color, etc. Any, not the point.

BUT- you notice in the css - that the themes upon inspection-
F1 - Open Dev Console - then [[Ctrl]]+[[c]] to turn on the selector, and then hover over the token-
you are modifying the token values- (which btw I am suspicious that they may vary dynamically as theyre assigned based on need, though I heavily use one language so I cant tell yet. But- to the point-- you are modifying .mtkNN { } to modify a value, but the parent class is perhaps easier.


You can see the style is

span.mtk14.mtki.mtkb.mtku

So it would be easier to extend mtkb , mtki and mtku

like this

.mtki{
font :
}
.mtkib
font :
}
etc.

blob:file:///d3ff5411-221b-48b8-8d60-49a15ca5ba54

Yes, I found it here-
in workbench.main.js line 30422

            t.ThemeTrieElement = g,
            t.generateTokensCSSForColorMap = function(e) {
                let t = [];
                for (let i = 1, n = e.length; i < n; i++) {
                    let n = e[i];
                    t[i] = `.mtk${i} { color: ${n}; }`
                }
                return t.push(".mtki { font-style: italic; }"),
                t.push(".mtkb { font-weight: bold; }"),
                t.push(".mtku { text-decoration: underline; text-underline-position: under; }"),
                t.join("\n")
            }

mtki, mtkb, and mtku are assigned statically as they are modifiers. mtk# is assigned sequentially as it iterates through all the colors in the editor at the moment. More-over- not just the text, but the editor as a whole, as it is a single ,,css that applies to the entire program, with the theme, So, theme x will have a consistent number of tokens, then if perhaps another color is added via an extension then it changes.