Theme

Import

import { Theme } from '@cerberus/react'

Usage

Basic

Nested

The theme can be nested to apply different appearances to different parts of the tree. This is useful for applying a global appearance and then overriding some parts of it.

Note

Good to know: We use native panda-css attributes to achieve this.

Portalled

Use the asChild prop to force the appearance of portalled elements like the popover and modal content.

Page Specific Color Mode

To lock a page to a specific color mode (light or dark), wrap the entire page with the Theme component.

import { Theme } from '@cerberus/react'
 
export default (Page = ({ children }) => {
  return <Theme mode="dark">{/* Rest of the page */}</Theme>
})

API

Props