data-theme color

[plush ferry]

I set custom.css about that.

html[data-theme='light'] {
    --sl-color-bg: rgb(247,247,247);
}

But I found it remain white (#ffffff) in card component.
I want to replace all white color to rgb(247,247,247) in light-theme.

[bleak raptor]

Hi @plush ferry. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To change the background color of all Starlight card components (and other UI elements) in light mode, you need to override the relevant CSS custom properties used by Starlight for background colors. Setting only --sl-color-bg may not be enough, as Starlight uses a range of custom properties for different background elements, including cards.

Steps to override the card background color:

1. Identify the correct custom property:
   Starlight uses several variables for backgrounds. For cards, the relevant variable is likely --sl-color-bg-card (or similar), not just --sl-color-bg. You can see all available variables in the props.css file on GitHub or by inspecting the card element in your browser’s dev tools.

2. Override the variable in your custom CSS:
   Add your overrides for the light theme in your custom.css file. For example:

   html[data-theme='light'] {
     --sl-color-bg: rgb(247,247,247);
     --sl-color-bg-card: rgb(247,247,247);
   }
   

   If you find other variables controlling card backgrounds (e.g., --sl-color-bg-surface), override those as well.

3. Ensure your custom CSS is loaded:
   Make sure your custom.css is included in the customCss array in your Starlight config:

   import { defineConfig } from 'astro/config';
   import starlight from '@astrojs/starlight';
   
   export default defineConfig({
     integrations: [
       starlight({
         customCss: ['./src/styles/custom.css'],
       }),
     ],
   });
   

   Custom CSS styles

4. Cascade order:
   If your override does not take effect, ensure your CSS is loaded after Starlight’s defaults, or use higher specificity or !important as a last resort. Starlight uses cascade layers, so unlayered custom CSS will override defaults.

Summary:
Override all relevant background color variables for the light theme in your custom CSS. For cards, this is likely --sl-color-bg-card. If you’re unsure of the exact variable, inspect the card in your browser or refer to Starlight’s CSS custom properties documentation.

Custom CSS styles
props.css on GitHub

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: