Switch default Expressive Code theme to one based on Astro theme

[JoshuaKGoldberg]

What version of starlight are you using?

0.30.3

What is your idea?

Switch the default Expressive Code theme (https://starlight.astro.build/reference/configuration/#themes) to one that is based on the current Astro theme. This would match code block colors to the Astro theme, instead of being the stock Night Owl defaults always.

Why is this feature necessary?

Coming over from HiDeoo/starlight-package-managers#22: code block text is the default blues and other colors regardless of the current Astro theme. It'd be nice to have it match the global / :root style of the Starlight app.

A couple of examples:

Location	Screenshot
create.bingo/about
mocha-docs-next.netlify.app/getting-started

If it were to, say, change the primary code color default to var(--sl-color-accent), code blocks would look a lot more like the site around them:

Location	Screenshot
create.bingo/about
mocha-docs-next.netlify.app/getting-started

Do you have examples of this feature in other projects?

No response

Participation

• I am willing to submit a pull request for this feature.

[delucis]

Thanks for the idea! This could indeed be nice, although not super easy to do given how different syntax highlighting themes and the site colour scheme are (you’d always need more colours for syntax highlighting than the basic theme colours). I’m not 100% sure how you’d decide which tokens inherit which user theme colours for example.

There’s also some added complexity with how this works under the hood architecturally:

1. Expressive Code processes code blocks to apply syntax highlighting. This includes logic to check the colour contrast of every text colour against code block backgrounds (including line highlights etc.) and automatically increase contrast to pass WCAG contrast requirements. (AFAIK Expressive Code is the only syntax highlighter that has this very cool feature.)

2. Custom user themes are set in unstructured custom CSS files.

For the syntax theme to use the user theme, we’d need to know the variables ahead of time, preferably without needing to parse all of a user’s raw CSS. So it would probably need some kind of structured design token kind of system.

It should be possible manually though I think for people to provide a custom syntax theme that matches their site colour scheme. Perhaps an easier way to approach this would be to e.g. support generating those in the same way we support generating a theme with our colour scheme editor. (I say “easier”, but admittedly syntax themes can still be quite the headache 😅)