How to load a custom theme for Shiki highlighting?

[pelevesque]

I was able to load custom grammars with preloaded themes this way:

import grammar1 from './shiki/myGrammar1.tmLanguage.json' with { type: 'json'}
import grammar2 from './shiki/myGrammar2.tmLanguage.json' with { type: 'json'}

export default defineConfig({
  markdown: {
    shikiSetup: async shiki => {
      await shiki.loadLanguage(grammar1)
      await shiki.loadLanguage(grammar2)
    },
    theme: {
      dark: 'github-dark',
      light: 'github-light',
    },
  },
}

I'd like to load my own themes for both dark and light. I've been trying various things, but nothing seems to work. My latest try is with loadtheme, but when I do this, I get an argument of type error asking for a BundledTheme or a ThemeInput instead of the Markdown theme file in JSON that I am providing.

shikiSetup: async shiki => {
  await shiki.loadLanguage(grammar1)
  await shiki.loadLanguage(grammar2)
  await shiki.loadTheme(theme1)
  await shiki.loadTheme(theme2)
},
theme: {
  dark: theme1,
  light: theme2,
},

[brc-dd]

What kind of theme file do you have? It needs textmate theme in json. If by "type error" you meant errors shown by TypeScript, you can safely ts-ignore it or cast it as any. Inferring deep types from JSON doesn't work properly.

You don't need to call loadTheme though. You don't need to call loadLanguage either, you can just pass languages: [grammar1, grammar2].

https://stackblitz.com/edit/vite-cz6amcgi?file=docs/.vitepress/config.ts

[pelevesque]

Hmm.. Thanks, your example works very nicely.

I was testing with https://github.com/shikijs/textmate-grammars-themes/blob/main/packages/tm-themes/themes/github-dark.json

It was not working, but your JSON file works. I'll start with that.

Thanks a bunch.

[brc-dd]

Hmm, that files works fine too - I just copy pasted it to Amy.tmTheme.json and it works fine:

https://stackblitz.com/edit/vite-lejydatu?file=docs/Amy.tmTheme.json

[pelevesque]

Weird, I get this error with it:

Type '{ colors: { "activityBar.activeBorder": string; "activityBar.background": string; "activityBar.border": string; "activityBar.foreground": string; "activityBar.inactiveForeground": string; "activityBarBadge.background": string; ... 176 more ...; "welcomePage.buttonHoverBackground": string; }; ... 4 more ...; type: st...' is not assignable to type 'ThemeRegistrationAny | BundledTheme'.
  Type '{ colors: { "activityBar.activeBorder": string; "activityBar.background": string; "activityBar.border": string; "activityBar.foreground": string; "activityBar.inactiveForeground": string; "activityBarBadge.background": string; ... 176 more ...; "welcomePage.buttonHoverBackground": string; }; ... 4 more ...; type: st...' is not assignable to type 'ThemeRegistrationRaw | ThemeRegistration | ThemeRegistrationResolved'.
    Type '{ colors: { "activityBar.activeBorder": string; "activityBar.background": string; "activityBar.border": string; "activityBar.foreground": string; "activityBar.inactiveForeground": string; "activityBarBadge.background": string; ... 176 more ...; "welcomePage.buttonHoverBackground": string; }; ... 4 more ...; type: st...' is missing the following properties from type 'ThemeRegistrationResolved': settings, fg, bgts(2322)

[brc-dd]

Those are ts errors not runtime errors. Like I said earlier those can be ignored:

theme: {
  // @ts-ignore
  dark: theme1,
  light: theme2 as any, // alternatively cast it
},

[pelevesque]

Thank you so much! And, thanks for vitepress. Amazing software.