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

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

function BasicExample() {
  return (
    <VStack alignItems="flex-start" w="3/4">
      <Box w="full">
        <Button>Default</Button>
      </Box>

      <Theme mode="light" css={{ w: 'full' }}>
        <Box bgColor="page.bg.200" p="md" w="full">
          <Button>Light</Button>
        </Box>
      </Theme>

      <Theme mode="dark" css={{ w: 'full' }}>
        <Box bgColor="page.bg.200" p="md" w="full">
          <Button>Dark</Button>
        </Box>
      </Theme>

      <Theme mode="system" css={{ w: 'full' }}>
        <Box bgColor="page.bg.200" p="md" w="full">
          <Button>System</Button>
        </Box>
      </Theme>

      <Theme mode="dark" theme="acheron" css={{ w: 'full' }}>
        <Box bgColor="page.bg.200" p="md" w="full">
          <Button>Dark Acheron</Button>
        </Box>
      </Theme>
    </VStack>
  )
}

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.

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

function NestedExample() {
  return (
    <Theme mode="dark" css={{ w: 'full' }}>
      <Box bgColor="page.bg.200" p="md" w="full">
        <Button css={{ mb: 'md' }}>Dark</Button>
        <Theme mode="light" css={{ w: 'full' }}>
          <Box bgColor="page.bg.200" p="md" w="full">
            <Button>Light</Button>
          </Box>
        </Theme>
      </Box>
    </Theme>
  )
}

Portalled

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

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.

import { Theme } from "@cerberus/react"

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

On this page

Edit this page on Github