Can't override --card-bg-color CSS variable in Sanity

7 replies
Last updated: Jan 28, 2026
Cant override the css-variable
--card-bg-color
when trying to overide css-variables https://www.sanity.io/docs/styling#d7f9b5cc2adb . Other overrides seems to work. Anybody has some pointers?
AI Update

I see you're having trouble overriding --card-bg-color when theming Sanity Studio. This is a common issue, and here's what's likely happening:

The --card-bg-color variable isn't part of the documented theming API that buildLegacyTheme exposes. Looking at the official theming documentation, the documented variables you can override include things like --component-bg, --brand-primary, --main-navigation-color, etc., but --card-bg-color specifically isn't listed.

Here are some approaches to try:

1. Use --component-bg instead

This is the documented variable for controlling component backgrounds, which should affect cards:

import {buildLegacyTheme, defineConfig} from 'sanity'

export const myTheme = buildLegacyTheme({
  '--component-bg': '#your-color-here',
  '--component-text-color': '#your-text-color',
  // ... other variables
})

export default defineConfig({
  theme: myTheme,
  // ... rest of config
})

2. Check if you need custom CSS instead

If --component-bg doesn't give you the granular control you need for cards specifically, you might need to add custom CSS that targets card elements directly using their data attributes or classes. Sanity UI components typically have specific selectors you can target.

3. Use the Themer app

The Themer app is an official tool that lets you visually create custom themes and will show you exactly which variables are available for override. This can help you identify the correct variable to use for your specific styling needs.

Why this happens:

CSS variables like --card-bg-color might exist internally in Sanity UI's implementation, but they're not exposed through the buildLegacyTheme API. The theming system only guarantees that the documented variables will work reliably across Studio updates. Using undocumented variables can break when Sanity UI updates its internal implementation.

If you're trying to achieve something specific with card styling that the documented variables don't cover, feel free to share more details about your use case and I can suggest alternative approaches!

Show original thread
7 replies

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?