theme

17 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Theme component wraps React tree for theme configuration

The Theme component wraps all or part of a React tree to provide theme configuration to its children.

Theme configuration can be nested with inheritance

You can nest Theme components to modify configuration for a specific subtree. Configuration is inherited from the parent Theme component.

Theme configuration can be overridden per component

You can override theme configuration on a per-component basis by passing supported props directly to that component, which takes precedence over Theme provider settings.

Theme component basic usage example

Basic example of wrapping a component tree in the Theme component: ```jsx <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> ```

Theme component nesting example with accentColor and radius

Example of nesting Theme components with configuration inheritance: ```jsx <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> ```

Theme component per-component override example

Example of overriding theme configuration on individual components: ```jsx <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> ```

Theme component accentColor prop for accent color configuration

The Theme component accepts __accentColor__ prop to configure the accent color for child components. Valid values include color names like 'cyan' and 'orange'.

Theme component radius prop for border radius configuration

The Theme component accepts __radius__ prop to configure the border radius for child components. Valid values include 'full' for full radius.

Theme component color prop for component-level color override

Components can accept __color__ prop to override theme color configuration at the component level. Valid values include color names like 'orange' and 'cyan'.

Theme appearance prop sets light or dark mode

The root Theme component has an appearance prop that accepts 'light' or 'dark'. By default, the root Theme appearance is 'light'. Pass a different appearance via the appearance prop to force the theme to use the specified setting.

Dark mode integration with next-themes

To integrate Radix Themes with next-themes for inheriting system appearance preferences, use ThemeProvider from next-themes with attribute='class'. Do not set Theme appearance={resolvedTheme} directly; instead rely only on class switching that next-themes provides. This prevents appearance flash during initial render. Radix Themes implements matching class names that next-themes uses.

Radix Themes dark mode class names

Radix Themes supports the following class names for dark mode switching: className='light', className='light-theme', className='dark', className='dark-theme'. Any library that supports class switching is compatible as long as it appends one of these class names.

Light and dark modes supported out of the box

Radix Themes supports light and dark modes out of the box, allowing you to easily switch appearance without additional design or styling.

Theme component purpose and customization

The Theme component defines the overall visual look of your application. It can be customized by passing configuration options for accentColor, grayColor, panelBackground, scaling, and radius. Well-tuned defaults are provided, and a Playground is available to preview the effect of each option.

Theme component props: accentColor, grayColor, panelBackground, scaling, radius

The Theme component accepts the following props: accentColor (example value: 'mint'), grayColor (example value: 'gray'), panelBackground (example value: 'solid'), scaling (example value: '100%'), and radius (example value: 'full').

Theme tokens provide direct access to theme values

Tokens provide direct access to theme values and give flexibility to build and customize your own themed components. All available theme tokens are available in the Radix UI themes source code repository.

Theme token categories: Color, Typography, Spacing, Radius, Shadows, Cursors

Theme tokens are organized into the following categories: Color (color system and application), Typography (typographic elements), Spacing (spacing scale and scaling options), Radius (border radius settings), Shadows (elevation, depth, and shadow properties), and Cursors (customizing cursors for interactive elements).

Give your agent this brain