Theme

Used to force a part of the tree to light or dark mode.

import { Button, Stack, Theme } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack align="flex-start">
      <Button variant="surface" colorPalette="teal">
        Auto Button
      </Button>
      <Theme p="4" appearance="dark" colorPalette="teal">
        <Button variant="surface">Dark Button</Button>
      </Theme>
      <Theme p="4" appearance="light" colorPalette="teal">
        <Button variant="surface">Light Button</Button>
      </Theme>
    </Stack>
  )
}

Usage

import { Theme } from "@chakra-ui/react"

<Theme appearance="dark">
  <div />
</Theme>

Examples

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 CSS selectors to achieve this.

Hello Normal

Hello Dark

Hello Light

import { Box, Button, Theme } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Box>
      <Box p="8" borderWidth="1px">
        Hello Normal <Button>Click me</Button>
        <Theme appearance="dark" colorPalette="red">
          <Box p="8" borderWidth="1px">
            Hello Dark <Button>Click me</Button>
            <Theme appearance="light" colorPalette="pink">
              <Box p="8" borderWidth="1px">
                Hello Light <Button>Click me</Button>
              </Box>
            </Theme>
          </Box>
        </Theme>
      </Box>
    </Box>
  )
}

Portalled

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

import { Button, Input, Text, Theme } from "@chakra-ui/react"
import {
  PopoverArrow,
  PopoverBody,
  PopoverContent,
  PopoverRoot,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover"

const Demo = () => {
  return (
    <PopoverRoot>
      <PopoverTrigger asChild>
        <Button size="sm" variant="outline">
          Click me
        </Button>
      </PopoverTrigger>
      <PopoverContent asChild>
        <Theme hasBackground={false} appearance="dark" colorPalette="teal">
          <PopoverArrow />
          <PopoverBody spaceY="4">
            <PopoverTitle fontWeight="medium">Naruto Form</PopoverTitle>
            <Text>
              Naruto is a Japanese manga series written and illustrated by
              Masashi Kishimoto.
            </Text>
            <Input placeholder="Search" />
            <Button>Click me</Button>
          </PopoverBody>
        </Theme>
      </PopoverContent>
    </PopoverRoot>
  )
}

Page Specific Color Mode

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

You can also combine it with the ColorModeProvider if you use the useColorMode hook.

import { ColorModeProvider } from "@/components/ui/color-mode"
import { Theme } from "@chakra-ui/react"

export const ForcedColorMode = ({ children }) => {
  return (
    <ColorModeProvider forcedTheme="dark">
      <Theme appearance="dark">{/* Rest of the page */}</Theme>
    </ColorModeProvider>
  )
}

Stack

Blockquote