Radix2Solid

Theme

Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

API Reference

For an overview of theming see the overview page.

PropTypeDefault
asChildboolean—
hasBackgroundbooleantrue
appearance"inherit" | "light" | "dark""inherit"
accentColorenum"indigo"
grayColorenum"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">{target => target("label", {

            children: <>

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

						Attach screenshot?

					</Text>

					<Switch size="1" defaultChecked />

				</>

          })}</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">{target => target("label", {

            children: <>

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

						Attach screenshot?

					</Text>

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

				</>

          })}</Flex>

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

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

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

					Send

				</Button>

			</Grid>

		</Flex>

	</Card>

</Box>