fix: dual-theme shiki via CSS custom properties (user-decidable dark/light)

- rehype-shiki: set --shiki-light-bg/--shiki-dark-bg on <pre>
- rehype-shiki: tokens get --shiki-light/--shiki-dark CSS vars
- Token color redirected from inline to CSS vars (not hardcoded)
- styles.css: light mode uses --shiki-light*, dark via prefers-color-scheme
- styles.css: .dark class fallback for manual dark mode toggle
- Users override via .svelte-streamdown pre in their own CSS
- Matches upstream vercel/streamdown dual-theme approach

Author: undivisible

packages/svelte-streamdown/src/lib/rehype-shiki.ts

@@ -20,10 +20,31 @@ const ensureHighlighter = (): Promise<any> => {
   return highlighterReady;
 };
 
-const htmlStyleToCSS = (htmlStyle: Record<string, string>): string =>
-  Object.entries(htmlStyle)
-    .map(([k, v]) => `${k}:${v}`)
-    .join(";");
+/**
+ * Build an inline style string from token.htmlStyle.
+ * Redirects shiki's direct CSS properties to CSS custom properties
+ * so our stylesheet can switch themes via media queries / .dark class.
+ *
+ * Light color → --shiki-light (used by CSS default)
+ * Dark color  → --shiki-dark  (used by CSS dark mode)
+ */
+const tokenToStyle = (token: any): string | undefined => {
+  if (!token.htmlStyle) return undefined;
+
+  const parts: string[] = [];
+  for (const [key, value] of Object.entries(token.htmlStyle)) {
+    if (key === "color") {
+      // Redirect direct color to CSS var — our CSS sets `color: var(--shiki-light)`
+      parts.push(`--shiki-light:${value}`);
+    } else if (key === "background-color") {
+      parts.push(`--shiki-light-bg:${value}`);
+    } else {
+      // Pass through CSS custom properties like --shiki-dark
+      parts.push(`${key}:${value}`);
+    }
+  }
+  return parts.length > 0 ? parts.join(";") : undefined;
+};
 
 export const rehypeShiki = (options: RehypeShikiOptions = {}) => {
   const themes = options.themes ?? ["github-light", "github-dark"];
@@ -36,7 +57,6 @@ export const rehypeShiki = (options: RehypeShikiOptions = {}) => {
       return;
     }
 
-    // Collect pre > code pairs
     const codeNodes: Array<{ pre: any; code: any; lang: string }> = [];
     visit(tree, "element", (node: any) => {
       if (node.tagName !== "pre") return;
@@ -49,7 +69,6 @@ export const rehypeShiki = (options: RehypeShikiOptions = {}) => {
       codeNodes.push({ pre: node, code, lang });
     });
 
-    // Load languages on demand, skip invalid ones
     for (const { lang } of codeNodes) {
       if (!lang || lang === "text") continue;
       const loaded = h.getLoadedLanguages();
@@ -76,14 +95,29 @@ export const rehypeShiki = (options: RehypeShikiOptions = {}) => {
           themes: { light: themes[0], dark: themes[1] },
         });
 
-        // Set background color on <pre> so code blocks get shiki's bg
-        // even when the page has a dark background
-        if (result.bg) {
+        // Set CSS custom properties on <pre> for theme switching.
+        // Users override via .svelte-streamdown pre or @media queries.
+        const preStyleParts: string[] = [];
+        if (result.bg) preStyleParts.push(`--shiki-light-bg:${result.bg}`);
+        if (result.fg) preStyleParts.push(`--shiki-light-fg:${result.fg}`);
+        // result.rootStyle contains --shiki-dark-bg from the dark theme
+        if (result.rootStyle) {
+          for (const decl of result.rootStyle.split(";")) {
+            const idx = decl.indexOf(":");
+            if (idx > 0) {
+              const prop = decl.slice(0, idx).trim();
+              const val = decl.slice(idx + 1).trim();
+              if (prop && val) preStyleParts.push(`${prop}:${val}`);
+            }
+          }
+        }
+
+        if (preStyleParts.length > 0) {
           if (!pre.properties) pre.properties = {};
-          pre.properties.style = `background-color:${result.bg}`;
+          pre.properties.style = preStyleParts.join(";");
         }
 
-        // Highlight tokens with dual-theme CSS vars
+        // Highlight tokens
         code.children = result.tokens.map((line: any) => ({
           type: "element",
           tagName: "span",
@@ -92,9 +126,7 @@ export const rehypeShiki = (options: RehypeShikiOptions = {}) => {
             type: "element",
             tagName: "span",
             properties: {
-              style: token.htmlStyle
-                ? htmlStyleToCSS(token.htmlStyle)
-                : undefined,
+              style: tokenToStyle(token),
             },
             children: [{ type: "text", value: token.content }],
           })),

packages/svelte-streamdown/styles.css

@@ -44,15 +44,6 @@
   white-space: pre;
 }
 
-.svelte-streamdown .shiki .line {
-  display: block;
-}
-
-/* shiki sets background-color on <pre> for light theme */
-.svelte-streamdown :where(pre.shiki, pre:has(code.shiki)) {
-  color: var(--shiki-dark, #24292e);
-}
-
 .svelte-streamdown :where(table) {
   border-collapse: collapse;
   width: 100%;
@@ -72,3 +63,53 @@
   margin-inline-start: 0.125rem;
   opacity: 0.7;
 }
+
+/* ── Shiki dual-theme support ──
+ *
+ * rehype-shiki sets these CSS custom properties on <pre>:
+ *   --shiki-light-bg, --shiki-light-fg  (from light theme)
+ *   --shiki-dark-bg, --shiki-dark       (from dark theme)
+ *
+ * Token spans get:
+ *   --shiki-light   (light theme color)
+ *   --shiki-dark    (dark theme color)
+ *
+ * Theme switching is automatic via prefers-color-scheme.
+ * Override by targeting .svelte-streamdown pre in your own CSS.
+ */
+
+/* Light mode (default) */
+.svelte-streamdown :where(pre:has(code.shiki)) {
+  background-color: var(--shiki-light-bg, transparent);
+  color: var(--shiki-light-fg, inherit);
+}
+
+.svelte-streamdown .shiki .line {
+  display: block;
+}
+
+.svelte-streamdown .shiki .line span {
+  color: var(--shiki-light, inherit);
+}
+
+/* Dark mode — system preference */
+@media (prefers-color-scheme: dark) {
+  .svelte-streamdown :where(pre:has(code.shiki)) {
+    background-color: var(--shiki-dark-bg, var(--shiki-light-bg, transparent));
+    color: var(--shiki-dark-fg, var(--shiki-light-fg, inherit));
+  }
+
+  .svelte-streamdown .shiki .line span {
+    color: var(--shiki-dark, var(--shiki-light, inherit));
+  }
+}
+
+/* Dark mode — manual .dark class on ancestor */
+.dark .svelte-streamdown :where(pre:has(code.shiki)) {
+  background-color: var(--shiki-dark-bg, var(--shiki-light-bg, transparent));
+  color: var(--shiki-dark-fg, var(--shiki-light-fg, inherit));
+}
+
+.dark .svelte-streamdown .shiki .line span {
+  color: var(--shiki-dark, var(--shiki-light, inherit));
+}