Hi everyone,

we’re using Expressive Code with Astro and Starlight, and we’ve encountered an issue where code block theming works in development, but breaks after building the project.

We have a working ec.config.mjs in the root of our Astro project, and in dev mode, everything works as expected, both styleOverrides and custom themes are correctly applied.

However, after running astro build, we noticed the following behavior:

Markdown code blocks (e.g., ```js):

• Reference a valid CSS file, such as ec.l7s1q.css.
• Apply both styleOverrides and custom themes correctly.

<Code /> component:

• References a different, non-existent CSS file, e.g., ec.4551.css.
• This causes a 404 error in the browser.
• As a result, no theme styles are applied, although the base styleOverrides still take effect.

Additional notes

• Our ec.config.mjs is clearly being picked up — the styleOverrides apply consistently to both markdown code blocks and <Code />.
• The issue appears to be isolated to theme configuration not applying to <Code /> after build.
• Setting emitExternalStylesheet: false does not resolve the issue — the <Code /> component still attempts to load the missing CSS file.

DevTools inspection confirms:

• Markdown blocks use the correct ec.l7s1q.css.
• <Code /> tries to load ec.4551.css, which isn’t present in the output.

Setup
Astro: v5.11.0
Starlight: v0.34.4
Node: v22.15.0
Integration through Starlight
Custom ec.config.mjs in project root

Anyone facing similar problems?

ec.config.mjs (snippet):

export default {
  themes: ['github-light', 'github-dark', 'github-dark-high-contrast'],
  themeCssSelector: (theme) => {
    switch (theme.name) {
      case 'github-light':
        return '[data-theme="light"]';
      case 'github-dark':
        return '[data-theme="dark"]';
      case 'github-dark-high-contrast':
        return '[data-theme="highContrast"]';
      default:
        return 'html';
    }
  },
  styleOverrides: {
    // ...
  },
};