Shiki theme not applying on code block background

[Neluji]

Describe the bug

When using a theme for shiki, the colours are effectively applied to the text, but the background of the code blocks remains in the default colour.

Minimal reproduction

Steps to reproduce the behavior:

1. Create a new Slidev project:

   npm init slidev@latest / pnpm create slidev / yarn create slidev
   

   and install the dependencies
2. In the project, create a setup folder, and in it, a shiki.ts file (as specified in the doc) with the following content:

   /* ./setup/shiki.ts */
   import { defineShikiSetup } from "@slidev/types";
   
   export default defineShikiSetup(() => {
     return {
       themes: {
         dark: "min-light",
         light: "min-dark",
       },
     };
   });
   

   this should apply a dark theme to the code when in light mode, and vice-versa
3. Launch the dev server and open the slide using the dev npm script
4. Go to the 5th slide where there is some code blocks: the colour of the code is the one from the shiki theme (i.e. colours of the min-dark code theme when in light mode and vice-versa), but the background remains the default one (i.e. a light background when in light mode and vice-versa)

System infos

• Slidev version: 51.0.2
• Browser: Firefox
• OS: Ubuntu

[kermanx]

I am not 100% sure. The background color seems to be controlled by the CSS Variable --slidev-code-background

[Neluji]

It is, but this variable isn't linked to the shiki theme, it seems to be (not too much investigated ^^') hardcoded to #f5f5f5 in light mode and #1b1b1b in dark mode in packages/client/styles/vars.css

[antfu]

This was intended to make the overall slide theme more consistent. CSS vars are made to be overridden, so it's not technically hardcoded (only the very defaults are). I am not yet sure if it's worth it to make an option to respect the Shiki's theme's bg, maybe we could generate a inlined variable where users can do something like --slidev-code-background: var(--shiki-bg) to link them

[Neluji]

My use case being to use a dark theme on the code blocks with a light theme for the slides, it is useful to respect the Shiki's theme's bg. More generally, I find it a bit surprising that the code background does not match the chosen theme, it could lead to inconsistencies with the code colours (as the text colours are those of the Siki theme), I think that if the user does the action to configure a Shiki theme, he wants to have it applied to every colour of the code blocks. This said, I understand the overall consistency you mention, so maybe juste mentioning in the doc the fact that the Shiki bg doesn't apply, and how to override the default one to have it applied could be a good solution ^^