Color customization on Gemini Chat Page

Does anyone know the color customizations sections for the Gemini Chat tab? Specifically I am looking for customizing the code blocks output by Gemini.

@romannurik who may have some thoughts.

Hey there! This all comes from your current IDE color theme, so the only real way to customize it is to change your current theme. If you’re OK with the customizations affecting the rest of the IDE, you can look at these docs from VS Code on customizing existing themes.

1 Like

Ty @romannurik for the link. I am indeed aware of the fact that it is based on vscode’s custom colorization. The difficulty is that there are hundreds of different settings (thousands when considering textmate rules?) and so I usually use the “Developer: Inspect Editor Tokens And Scopes” command. But this only works inside the editor, not within the Gemini Chat Tab. I thought others here who have customized their environment may be more fluent on which particular config settings and/or textmate rules/scopes will affect the Gemini Chat Tab’s code block markdown. (EDIT: just to be explicit, the syntax highlighting theme shown is NOT the one I have inside the actual editor tabs)

As a workaround (and more context for someone else who maybe will go further and figure out how to theme those code blocks), I have gone through my existing customizations again and stumbled on the fact that the background for the Gemini Chat Tab’s code blocks is driven by workbench.colorCustomizations.panel.background. It is an open question on individual syntax highlighting inside those blocks, but for now my workaround is good enough for me personally.

Thanks for your time and happy coding everyone.

1 Like

One last bit to add — the syntax highlighting engine we’re using is shiki, which AFAIK uses the same textmate grammar and tokenization system as CodeOSS/VSCode (though without semantic highlighting), which is why we’re able to approximate the syntax highlighting of the core editor from within the Gemini in IDX chat panel.

1 Like

Well in my setup (far from perfect), I always end up building out my own theming because I can never find ones that I like. This turns out to be a combination of workbench.colorCustomizations and editor.tokenColorCustomizations. The textMateRules config only exists (unfortunately?) in the latter, and the Gemini Chat Tab seems to fall under the workbench realm. So even if the grammar is the same, perhaps the question is, how are the shiki textmate rules exposed to the vscode fork that you’re working on? And is there any equivalent to the “Developer: Inspect Editor Tokens And Scopes” command that works on that tab?

I would guess that the solution is probably not worth the effort. So unless you already have an expert that knows this inside and out, the default behavior is probably good enough. It is for me now that I’ve been able to change the panel.background!