Get Started
Components
Styling
Theming

Theme

Used to force a part of the tree to a different mode or theme.

Usage

import { Theme } from "@cerberus/react"
<Theme mode="dark">
  This is dark mode
</Theme>

Examples

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.

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.

Portalled example
import { TooltipParts, Theme, Button } from '@cerberus/react'
import { Box } from 'styled-system/jsx'


function PortalledExample() {
  return (
      <TooltipParts.Root>
      <TooltipParts.Trigger asChild>
        <Button>Dark</Button>
      </TooltipParts.Trigger>


      <TooltipParts.Positioner>
        <TooltipParts.Content asChild>
          <Theme mode="dark">
            <Box bgColor="page.bg.200" p="md" w="full">
              This is a dark mode tooltip bubble
            </Box>
          </Theme>
        </TooltipParts.Content>
      </TooltipParts.Positioner>
    </TooltipParts.Root>
  )
}

Page Specific Color Mode

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

page.tsx
import { Theme } from "@cerberus/react"


export default Page = ({ children }) => {
  return (
    <Theme mode="dark">{/* Rest of the page */}</Theme>
  )
}

On this page