Mix & Match in VS Code?

[marvinruder]

I really like the examples shown in the Mix & Match section, using different font families for comments, Copilot suggestions etc.:

As I understand it from microsoft/vscode#36512, this is not yet reproducable in VS Code. Are there any plans to support that soon, perhaps via plug-in or by discussing support with the VS Code maintainers directly?

[taciturnaxolotl]

I was looking for this too. Great project!

[1eldiego]

I'm achieving exactly this with the Custom CSS and JS Loader plugin.

[Bosphoramus]

I was also looking for this!

[marvinruder]

I'm achieving exactly this with the Custom CSS and JS Loader plugin.

Yes, I also tried this and got some of it working, but found it difficult to distinguish between line and block comments. Overall this would require very hacky solutions. textMateRules is much better suited for this purpose.

[taciturnaxolotl]

Current settings with custom css and js loader plugin:

.mtk7 {
        font-family: "Monaspace Radon Var";
        font-weight: 500;
}

.mtk11 {
        font-family: "Monaspace Radon Var";
        font-weight: 500;
}

.mtk4 {
	font-family: "Monaspace Radon Var";
	font-weight: 500;
}

.ghost-text-decoration {
	font-family: 'Monaspace Krypton Var';
	font-weight: 200;
}

.ghost-text-decoration-preview {
	font-family: 'Monaspace Krypton Var';
	font-weight: 200;
}

[marvinruder]

Current settings with custom css and js loader plugin:

.mtk7 {
        font-family: "Monaspace Radon Var";
        font-weight: 500;
}

.mtk11 {
        font-family: "Monaspace Radon Var";
        font-weight: 500;
}

.mtk4 {
	font-family: "Monaspace Radon Var";
	font-weight: 500;
}

.ghost-text-decoration {
	font-family: 'Monaspace Krypton Var';
	font-weight: 200;
}

.ghost-text-decoration-preview {
	font-family: 'Monaspace Krypton Var';
	font-weight: 200;
}

Nice one! I figured out something similar in the meantime as well. In short:

If you define a custom and unique color for a textMate scope (e.g. comment.block.documentation, comment.line), it will be assigned a separate .mtk… class (the numbers will vary, even per theme, my light theme results in different ones than my dark theme). You can grab the class name using developer tools and then create your own CSS for the aforementioned plugin. @media (prefers-color-scheme: dark / light) { … } will also work if you use system-wide light / dark mode to switch between themes so you can easily maintain class definitions for one dark and one light theme.

This is still very hacky, so I hope that we will native support using the textMateRules setting soon. I played around a little in the VS Code codebase and found that the two main difficulties will be extending the external package vscode-textmate and moving away from bitwise-encoding all styles in a number (which is later stored in a Uint32Array, of which all 32 bits are already in use), as explained here:
https://github.com/microsoft/vscode/blob/6f2f46ec25c134595c7cb8399219d9b59794a526/src/vs/editor/common/encodedTokenAttributes.ts#L45-L66

[EliteMasterEric]

Current settings with custom css and js loader plugin:

.mtk7 {
        font-family: "Monaspace Radon Var";
        font-weight: 500;
}

.mtk11 {
        font-family: "Monaspace Radon Var";
        font-weight: 500;
}

.mtk4 {
	font-family: "Monaspace Radon Var";
	font-weight: 500;
}

.ghost-text-decoration {
	font-family: 'Monaspace Krypton Var';
	font-weight: 200;
}

.ghost-text-decoration-preview {
	font-family: 'Monaspace Krypton Var';
	font-weight: 200;
}

I tested this myself and found it assigned the wrong fonts to the wrong things.

Disabling for now until someone figures out a proper solution (I'd be fine with a dedicated VSCode plugin for Monaspace if that's necessary)

[taciturnaxolotl]

What VS Code version do you have? I'm using the latest version for mac, 1.84.2 (Universal)
commit: 1a5daa3a0231a0fbba4f14db7ec463cf99d7768e. The classes seem to change between versions, so that might be the issue.

Here is what it looks like on my end:

[EliteMasterEric]

I'm on 1.84.0.

If these classes change with every minor version, I'm going to hold off until it's properly fixed.

[taciturnaxolotl]

minor tweak; the styles for comments should only be mtk4:

/* Comment Class */
.mtk4 {
	font-family: "Monaspace Radon Var";
	font-weight: 500;
}

/* Copilot Classes */
.ghost-text-decoration {
	font-family: 'Monaspace Krypton Var';
	font-weight: 200;
}

.ghost-text-decoration-preview {
	font-family: 'Monaspace Krypton Var';
	font-weight: 200;
}

[mjakl]

I use a theme in VSCode with many italics (Dracula), using that, I used the .mtki class to set Monaspace Radon (using APC) which looks very nice to me.

The relevant parts of my settings.json:

{
  "editor.fontFamily": "'Monaspace Neon', 'Jetbrains Mono', Menlo, Monaco, 'Courier New', monospace",
  "editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss06', 'ss07', 'ss08', 'calt', 'dlig'",
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "comment",
        "settings": {
          "fontStyle": "italic"
        }
      }
    ]
  },
  "apc.stylesheet": {
    // Make all italic fonts use Monospace Radon
    ".mtki": {
      "font-family": "Monaspace Radon"
    },
    // Make GitHub suggestions use Monospace Krypton
    ".ghost-text-decoration,.ghost-text-decoration-preview": {
      "font-family": "Monaspace Krypton",
      "font-weight": "lighter"
    }
  }
}

HTH

[klippx]

@mjakl Thats cool, but do you know why it only applies to the first line of the GH suggestion? First line is Krypton, but the following line(s) use my normal default font 🤔 I can see it is not part of the div that has the class (highlighted in screenshot below):

[marvinruder]

@mjakl Thats cool, but do you know why it only applies to the first line of the GH suggestion? First line is Krypton, but the following line(s) use my normal default font 🤔 I can see it is not part of the div that has the class (highlighted in screenshot below):

@klippx Can you try the selector .ghost-text-decoration, .ghost-text?

[klippx]

That works, thanks @marvinruder 💪

Edit: Actually I think .ghost-text-decoration, .ghost-text-decoration-preview, .ghost-text works best.

[wiktoriavh]

I have tried the things that were suggested here, I installed APC and edited the apc.stylesheet section, but they are just not applied for me. Here is the relevant code from my settings.json file:

{
  "editor.fontSize": 14,
  "editor.fontFamily": "'Monaspace Argo', 'JetBrains Mono', monospace",
  "editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'ss07', 'ss08', 'calt', 'liga', 'dlig',",
  "editor.letterSpacing": 1.2,
  "editor.inlayHints.fontFamily": "Monaspace Krypton Var",
  "apc.stylesheet": {
    ".mtk3": "font-family: 'Monaspace Radon Var'; font-weight: 500;",
    ".mtk4": {
      "font-family": "Monaspace Radon"
    },
    ".ghost-text-decoration,.ghost-text-decoration-preview, .ghost-text": {
      "font-family": "Monaspace Krypton",
      "font-weight": "200"
    }
  }
}

[mjakl]

I have tried the things that were suggested here, I installed APC and edited the apc.stylesheet section, but they are just not applied for me.

@wiktoriavh You need to enable APC everytime you update VSCode, maybe that's the problem?

[wiktoriavh]

I tried enabling it, and I kept getting an error message, same thing with the Custom CSS and JS Loader extension. I will try it again on my private machine after work.

[MicroMelone]

I think your problem might be the argon typo in the "editor.fontFamily", if that's not the case, the readme mentions that for font ligatures you need to have the 'calt', 'liga', 'dlig' first, and then the others

[wiktoriavh]

Hey @mjakl @MicroMelone thanks for your Tips. I am now on my private machine and tried it again, and it worked again. The error I mentioned was some pathing error on my work macbook. On my private windows it works great.

[blakeNaccarato]

EDIT: See also #6 (comment) below for the new editor.inlineSuggest.fontFamily, as well.

---

With stock VSCode you can differentiate at least to the level of granularity of editor, error lens, chat, code lens, inlay hints, and SCM (commit message). Below I specify Neon as the primary font family for the editor (falling back to the default fonts listed in this option prior). Then I do the same for the other font families, but start off with Krypton for all other text areas. Heads up, it seems you can't specify 'editor' to propagate editor font to the other font families, as you can with the scm.inputFontFamily key.

settings.json

{
  "editor.fontFamily": "'Monaspace Neon Var', Consolas, 'Courier New', monospace",
  "errorLens.fontFamily": "'Monaspace Krypton Var', Consolas, 'Courier New', monospace",
  "chat.editor.fontFamily": "'Monaspace Krypton Var', Consolas, 'Courier New', monospace",
  "editor.codeLensFontFamily": "'Monaspace Krypton Var', Consolas, 'Courier New', monospace",
  "editor.inlayHints.fontFamily": "'Monaspace Krypton Var', Consolas, 'Courier New', monospace",
  //? Monospace font in Source Control fields
  "scm.inputFontFamily": "editor",
}

[TZECHIN6]

I think your problem might be the argon typo in the "editor.fontFamily", if that's not the case, the readme mentions that for font ligatures you need to have the 'calt', 'liga', 'dlig' first, and then the others

Sadly their webpage generator gives the wrong order.

[blakeNaccarato]

The "What if Copilot had its own voice?" part of the "Mix & Match" proposal is now implemented as of VSCode 1.86 (January '24) with editor.inlineSuggest.fontFamily. Technically, the other what-ifs (different docstring font and a "draft comment" font) are not yet implemented, but it's nice to have the inline suggest font configurable now!

[EliteMasterEric]

The "What if Copilot had its own voice?" part of the "Mix & Match" proposal is now implemented as of VSCode 1.86 (January '24) with editor.inlineSuggest.fontFamily. Technically, the other what-ifs (different docstrimg font and a "draft comment" font) are not yet implemented, but it's nice to have the inline suggest font configurable now!

I tested this out and it seems to work great, but is there a way to switch the inlineSuggest font color from light gray to syntax-highlighted once the font has been enforced?

[yashsongara101]

Is there any support available for webstorm?
Would really love to use this feature.

Some day's ago i was watching a webpack conference video on youtube and the guy's code editor was literally giving a diff font to the keywords, comments and normal syntax.
Will mix and match help me achieve that?

[Pascal-Lohscheidt]

For those who look for a fix to get mix and match to work in January 2025

It seems drcika/apc-extension#230 (comment) APC is broken.

Custom UI https://marketplace.cursorapi.com/items?itemName=subframe7536.custom-ui-style

Works great for me (at least in Cursor)

I found it here drcika/apc-extension#230 (comment)

---

Moving over is also quite simple if you defined your styles in a css file

{
 //APC Dead
  //"apc.imports": ["/Users/pascal/Documents/vscode_custom.css"],
  "custom-ui-style.external.imports": [
      "file:///Users/pascal/Documents/vscode_custom.css",
  ],
}

[heyajulia]

I was able to get syntax highlighting to work using the new-to-me editor.inlineSuggest.syntaxHighlightingEnabled setting.