TypeError: color.charCodeAt is not a function when using github-dark-default with @shikijs/monaco

[MathiasWP]

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Describe the bug

I have this shiki setup:

import { shikiToMonaco } from '@shikijs/monaco';
import { bundledLanguagesInfo, createHighlighter } from 'shiki';

export async function registerShiki(monaco: typeof Monaco) {
	const highlighter = await createHighlighter({
		themes: ['github-dark-default'],
		langs: bundledLanguagesInfo.map(lang => lang.id) // This isn't very performant, but shouldn't all of these work?
	});

	const languagesAlreadyInMonaco = monaco.languages.getLanguages();
	for (const language of bundledLanguagesInfo.filter((language) => !languagesAlreadyInMonaco.some((l) => l.id === language.id))) {
		monaco.languages.register({ id: language.id });
	}

	shikiToMonaco(highlighter, monaco);
}

If i github-dark-default as a theme i get the following error in my console:

It works fine if i set github-dark as my theme. What am i doing wrong here?

Reproduction

look at code example

Contributes

• I am willing to submit a PR to fix this issue
• I am willing to submit a PR with failing tests

[DavidSeptimus]

Same here. Running into the same issue with github-dark-high-contrast as well. I haven't noticed it with any other bundled themes.

[DavidSeptimus]

This section right here is the culprit in both themes:

https://github.com/shikijs/textmate-grammars-themes/blob/ceea7602cbec54f979adedea2383af34c3ee665d/packages/tm-themes/themes/github-dark-default.json#L171-L182

symbolIcon.constantForeground Should be a string. I can't imagine why it's an array here.

https://github.com/wraith13/vscode-schemas/blob/6ca800de79fd8290e118deee170a447705f19bff/en/latest/schemas/workbench-colors.json#L2245-L2254

[MathiasWP]

This section right here is the culprit in both themes:

shikijs/textmate-grammars-themes@ceea760/packages/tm-themes/themes/github-dark-default.json#L171-L182

symbolIcon.constantForeground Should be a string. I can't imagine why it's an array here.

wraith13/vscode-schemas@6ca800d/en/latest/schemas/workbench-colors.json#L2245-L2254

Then it's clearly a bug, no? If it's the wrong data-type. Do we know which of these values are the correct symbolIcon.constantForeground? Doesn't seem like a difficult fix if we just have to change this value in the JSON file.

[DavidSeptimus]

Definitely a bug. The published version of this theme has the same issue, so I'm guessing VS Code is ignoring it gracefully. The colors are steps in a green color scale.

[DavidSeptimus]

Took a bit of time to track it down in the outline pane since most "constants" aren't categorized that way. Python screaming-snake-case style constants seem to be the only thing I can find that gets categorized as "constant."

Current state: (no color loaded)

Going by luminosity, #3fb950 is probably the right shade:

[MathiasWP]

Took a bit of time to track it down in the outline pane since most "constants" aren't categorized that way. Python screaming-snake-case style constants seem to be the only thing I can find that gets categorized as "constant."

Current state: (no color loaded)

Going by luminosity, #3fb950 is probably the right shade:

So replacing the array with this hardcoded value seems like the correct solution? 😺

[MathiasWP]

I've created a PR that hopefully resolves this shikijs/textmate-grammars-themes#117 @DavidSeptimus

[taiyuuki]

Same issue here #668

[MathiasWP]

Same issue here #668

Weird that this has been an issue for so long 👀

[MathiasWP]

A possible workaround until this has been fixed properly is to do the following:

const highlighter = await createHighlighter({
	themes: ['github-dark-default'],
	langs: languages
});

const githubDarkDefaultTheme = highlighter.getTheme('github-dark-default');
githubDarkDefaultTheme.colors!['symbolIcon.constantForeground'] = '#3fb950';

This will overwrite the invalid array with the correct string color, and then it works as expected.

[antfu]

I don't know if it's intended in the source theme, but I add a workaround to fix this for now