Shadow Panda
Shadow Panda
Guides
Theming

Theming

Using PandaCSS or CSS Variables for theming.

You can choose between extending the theme using PandaCSS or CSS variables.

Extending PandaCSS theme

The easiest way to configure the theme is to use the theme feature from PandaCSS.

Variables used in Shadow Panda are defined as semanticTokens, so simply extend the theme and override them:

panda.config.ts
import { defineConfig } from '@pandacss/dev'
 
export default defineConfig({
  // Presets
  presets: ['@shadow-panda/preset'],
 
  // Extend theme
  theme: {
    extend: {
      // Override `semanticTokens`
      semanticTokens: {
        // Example: Set primary color to another value
        colors: {
          primary: {
            DEFAULT: {
              value: {
                // Light mode
                base: '{colors.grayscale.900}',
                // Dark mode
                _dark: '{colors.grayscale.50}',
              },
            },
          },
        },
      },
    },
  },
})

For a list of semanticTokens defined in Shadow Panda, check out the config file.

CSS Variables

Supported ComponentsUtilities