How to enable a different (light) code block theme when the website theme changes?

[satnaing]

When the site theme is toggled to 'light', the syntax-highlighted code blocks remain dark-themed.
This FAQ is intended for those who wish to update the code block theme to the 'light' theme as well.

[FjellOverflow]

The default syntax-highlighter Shikiji can be configured to have multiple themes in astro.config.ts:

shikiConfig: {
-      theme: "github-dark",
+      experimentalThemes: {
+        dark: "github-dark",
+        light: "github-light",
      },
      wrap: true,
    }

The respective light/dark themed syntax-highlighting is set by adding CSS, for instance in src/styles/base.css:

html[data-theme="dark"] .astro-code,
html[data-theme="dark"] .astro-code span {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important;
  font-style: var(--shiki-dark-font-style) !important;
  font-weight: var(--shiki-dark-font-weight) !important;
  text-decoration: var(--shiki-dark-text-decoration) !important;
}