Clarify shikiTheme and shikiThemes usage and theme preloading in latest version

[SikandarJODD]

I’m a bit confused about the current usage of shikiTheme and would appreciate clearer documentation around it.

Previously, I was using shikiTheme like this:

<Streamdown
	{content}
	shikiTheme={mode.current === 'dark' ? 'github-dark-default' : 'github-light-default'}
	components={{ code: Code }}
	baseTheme="shadcn"
	{...restProps}
/>

However, in the latest version, shikiTheme no longer seems to work as expected.

For example, switching themes dynamically like this:

shikiTheme={mode.current === 'dark'
	? 'github-dark-default'
	: 'github-light-default'}

doesn’t seem to work in the latest version. I’m not sure if this is expected behavior, a breaking change, or if there’s a new recommended way to handle dynamic Shiki theme switching.

Additionally, in v2 we had support for preloading themes, something like:

shikiPreloadThemes={["github-dark-default", "github-light-default"]}

It would be really helpful to have documentation covering:

• The correct way to use shikiTheme now
• How to use themes like vesper, github-light-default, and github-dark-default
• Whether theme preloading is still supported, and if so, how to configure it

clearer docs here would really help users migrating from earlier versions.

[SikandarJODD]

I found a way to load themes...

<script lang="ts">
	import { cn } from '$lib/utils';
	import { Streamdown, type StreamdownProps } from 'svelte-streamdown';
	import Code from 'svelte-streamdown/code'; // Shiki syntax highlighting
	import { mode } from 'mode-watcher';
	import type { HTMLAttributes } from 'svelte/elements';

	// Import Shiki themes
	import vesper from '@shikijs/themes/vesper';
	import githubLightDefault from '@shikijs/themes/github-light-default';

	type Props = {
		content: string;
		class?: string;
	} & Omit<StreamdownProps, 'content' | 'class'> &
		Omit<HTMLAttributes<HTMLDivElement>, 'content'>;

	let { content, class: className, ...restProps }: Props = $props();

	let currentTheme = $derived(mode.current === 'dark' ? 'vesper' : 'github-light-default');
</script>

<div class={cn('size-full', className)}>
	<Streamdown
		{content}
		components={{ code: Code }}
		baseTheme="shadcn"
		shikiTheme={currentTheme}
		shikiThemes={{ vesper, 'github-light-default': githubLightDefault }}
		{...restProps}
	/>
</div>

[SikandarJODD]

@beynar