Theme - Radix Ui — ContextQMD

API Reference

For an overview of theming see the overview page.

Examples

Basic configuration

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

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>

Nesting

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

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>

Component overrides

Override configuration per component by passing any supported prop directly to that 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"
						__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>