Homepage
Homepage
ThemesThemesHooksHooksColorsColorsIconsIcons

Theme

Wraps all or part of a React tree to provide theme configuration.

View sourceReport an issue

API Reference

For an overview of theming see the overview page.

PropTypeDefault
asChild
boolean
No default value
hasBackground
boolean
true
appearance
"inherit" | "light" | "dark"
"inherit"
accentColor
enum
"indigo"
grayColor
enum
"auto"
panelBackground
"solid" | "translucent"
"translucent"
radius
"none" | "small" | "medium" | "large" | "full"
"medium"
scaling
"90%" | "95%" | "100%" | "105%" | "110%"
"100%"

Examples

Basic configuration

Wrap a component tree in the Theme component to provide or modify configuration for all children.

Feedback
<Box maxWidth="400px">

  <Card size="2">

    <Flex direction="column" gap="3">

      <Grid gap="1">

        <Text as="div" weight="bold" size="2" mb="1">

          Feedback

        </Text>

        <TextArea placeholder="Write your feedback…" />

      </Grid>

      <Flex asChild justify="between">

        <label>

          <Text color="gray" size="2">

            Attach screenshot?

          </Text>

          <Switch size="1" defaultChecked />

        </label>

      </Flex>

      <Grid columns="2" gap="2">

        <Button variant="surface">Back</Button>

        <Button>Send</Button>

      </Grid>

    </Flex>

  </Card>

</Box>

Nesting

Nest another theme to modify configuration for a specific subtree. Configuration is inherited from the parent.

Global
Feedback
Child
Feedback
Grandchild
Feedback
<Card size="2">

  <Flex gap="6">

    <Flex direction="column" gap="3">

      <Heading as="h5" size="2">

        Global

      </Heading>

      <Grid gap="1">

        <Text as="div" weight="bold" size="2" mb="1">

          Feedback

        </Text>

        <TextArea placeholder="Write your feedback…" />

      </Grid>

      <Button>Send</Button>

    </Flex>



    <Theme accentColor="cyan" radius="full">

      <Card size="2">

        <Flex gap="6">

          <Flex direction="column" gap="3">

            <Heading as="h5" size="2">

              Child

            </Heading>

            <Grid gap="1">

              <Text as="div" weight="bold" size="2" mb="1">

                Feedback

              </Text>

              <TextArea placeholder="Write your feedback…" />

            </Grid>

            <Button>Send</Button>

          </Flex>



          <Theme accentColor="orange">

            <Card size="2">

              <Flex direction="column" gap="3">

                <Heading as="h5" size="2">

                  Grandchild

                </Heading>

                <Grid gap="1">

                  <Text as="div" weight="bold" size="2" mb="1">

                    Feedback

                  </Text>

                  <TextArea placeholder="Write your feedback…" />

                </Grid>

                <Button>Send</Button>

              </Flex>

            </Card>

          </Theme>

        </Flex>

      </Card>

    </Theme>

  </Flex>

</Card>

Component overrides

Override configuration per component by passing any supported prop directly to that component.

Feedback
<Box maxWidth="400px">

  <Card size="2">

    <Flex direction="column" gap="3">

      <Grid gap="1">

        <Text as="div" weight="bold" size="2" mb="1">

          Feedback

        </Text>

        <TextArea placeholder="Write your feedback…" />

      </Grid>

      <Flex asChild justify="between">

        <label>

          <Text color="gray" size="2">

            Attach screenshot?

          </Text>

          <Switch size="1" color="orange" radius="full" defaultChecked />

        </label>

      </Flex>

      <Grid columns="2" gap="2">

        <Button variant="surface">Back</Button>

        <Button color="cyan" radius="full">

          Send

        </Button>

      </Grid>

    </Flex>

  </Card>

</Box>
PreviousSlot
NextVisually Hidden
Edit this page on GitHub.