Dark Mode Support for Code Blocks Should Also Be Triggered by [data-theme="dark"]

[Evelyn0910]

Is your feature request related to a problem? Please describe

Currently, the dark mode styling for code blocks only takes effect when the html element has the .dark class. This creates an inconsistency in our theming system, as shiki correctly respond to both .dark class and [data-theme="dark"] attribute selector. Users who implement dark mode using the data-theme="dark" attribute find that code blocks remain in light mode, creating a disjointed user experience.

Describe the solution you'd like

I would like the dark mode styles for code blocks to be applied when either of these conditions is met:

html.dark is present (current behavior)

[data-theme="dark"] is present on the html element or any parent element

The CSS should be updated to include both selectors:

/* Current */
html.dark .code-block {
  /* dark mode styles */
}

/* Proposed */
html.dark .code-block,
[data-theme="dark"] .code-block {
  /* dark mode styles */
}

Describe alternatives you've considered

Additional context

This change would maintain backward compatibility while extending support to the increasingly common data-theme attribute pattern.

Many modern CSS frameworks and theme systems use the data-theme attribute approach.

The fix should be applied to all code-related elements (code blocks, inline code, syntax highlighting, etc.).

[github-actions[bot]]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 30 days.