Default Shiki themes seem to be broken

[grundmanise]

Bug Description

The default bundled dark Shiki theme seems to have a bug where it adds an inline color, which overwrites the theme color and makes code mostly unreadable. You can reproduce this in the streamdown.ai code block section. I was not able to reproduce the same with github dark theme with plain Shiki: https://textmate-grammars-themes.netlify.app/?theme=github-dark&grammar=javascript

Steps to Reproduce

1. Navigate to https://streamdown.ai/
2. Observe code section example

Expected Behavior

Inline styles are not overwriting theme colors

Actual Behavior

Inline color style overwrites theme colors

Code Sample

Streamdown Version

2.2.0

React Version

19.2.4

Node.js Version

24.12.0

Browser(s)

Chrome

Operating System

macOS

Additional Context

Verified in both Safari and Chrome

[kenmueller]

This happens when the theme on the page and the system theme mismatch. On a side note, can you not publish minified code? It is much easier to create patches when the code is not minified. I had Opus 4.6 write a summary below, and its fix did actually fix the issue:

Title: Dark mode code block text colors broken with Shiki dual-theme (inline style overrides CSS class)

Body:

Bug

When using Shiki's dual-theme mode (themes: { light, dark }), code block token text always shows light-theme colors in dark mode. The dark background applies correctly, but syntax highlighting colors are from the light theme — making text hard to read or invisible.

Root Cause

Shiki v3's codeToTokens with defaultColor: "light" (the default) returns tokens where htmlStyle contains the light theme color as a direct CSS property:

// Token htmlStyle from Shiki:
{
  "color": "#d73a49",          // light theme — direct CSS property
  "--shiki-dark": "#f97583"    // dark theme — CSS variable
}

The CodeBlock component spreads htmlStyle into the inline style:

// code-block-OCS4YCEC.js
style: {
  ...t.color ? {"--sdm-c": t.color} : {},
  ...t.bgColor ? {"--sdm-tbg": t.bgColor} : {},
  ...t.htmlStyle  // ← spreads { color: "#d73a49", "--shiki-dark": "#f97583" }
}

This produces:

<span style="color: #d73a49; --shiki-dark: #f97583">function</span>

The inline color: #d73a49 has higher specificity than the Tailwind class dark:text-[var(--shiki-dark,...)], so the dark variant can never override it. The --shiki-dark value is correctly present on every span but is unreachable.

Additional issue: bg and fg on TokensResult

With defaultColor: "light", Shiki also returns combined strings for bg and fg:

bg: "#ffffff;--shiki-dark-bg:#0d1117"
fg: "#24292e;--shiki-dark:#e1e4e8"
rootStyle: undefined

These are assigned to --sdm-bg and --sdm-fg CSS variables, but the semicolon-containing values are invalid for CSSStyleDeclaration.setProperty(), so the variables silently fail to set on client-side renders. The background appears correct only because the transparent fallback lets the page background show through.

Expected Behavior

In dark mode, code block tokens should use --shiki-dark colors. The code block background should use --shiki-dark-bg.

Suggested Fix

In the CodeBlock rendering, extract Shiki's direct CSS properties (color, background-color) from htmlStyle and map them to --sdm-c / --sdm-tbg instead of spreading them as inline styles:

// Before
style: {
  ...t.color ? {"--sdm-c": t.color} : {},
  ...t.bgColor ? {"--sdm-tbg": t.bgColor} : {},
  ...t.htmlStyle
}

// After — extract color/bg from htmlStyle to avoid inline override
const { color, "background-color": bgColor, ...cssVars } = t.htmlStyle ?? {};
style: {
  "--sdm-c": t.color ?? color,
  ...t.bgColor || bgColor ? { "--sdm-tbg": t.bgColor ?? bgColor } : {},
  ...cssVars
}

Similarly, for the TokensResult bg/fg values, they should be parsed to separate the base value from the CSS variable declarations (or Shiki should be configured with defaultColor: false if Streamdown manages its own variable mapping).

Workaround

Adding this CSS rule at the application level fixes the text color:

.dark [data-streamdown='code-block-body'] code span {
  color: var(--shiki-dark, inherit) !important;
  background-color: var(--shiki-dark-bg, transparent) !important;
}

Environment

• streamdown: 2.2.0
• @streamdown/code: 1.0.2
• shiki: 3.22.0
• Dark mode via next-themes with attribute="class" (.dark on <html>)