Light & Dark Mode Styling

Panda comes with a built in condition called dark which maps to the .dark & selector. This means when we want to change an element's color, we use _dark.

Defining Light and Dark Mode Styles

In your panda.config file, add a globalCss property and define all the styles for light mode in the base key and styles for dark mode in the _dark key.

// panda.config.ts

export default defineConfig({
  // ...

  globalCss: {
    body: {
      bg: { base: '#F8FAFC', _dark: 'black' },
      color: { base: 'black', _dark: 'white' },
    },
  },
})