# 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](/themes/docs/theme/overview).

| Prop                                                                                                                                                                   | Type                                                 | Default         |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | --------------- |
| `asChild`Render one explicit target with merged props and behavior, not a cloned child. Read our [Composition](/primitives/docs/guides/composition) guide for details. | `boolean`                                            | —               |
| `hasBackground`Whether to apply the theme background color to the theme node.                                                                                          | `boolean`                                            | `true`          |
| `appearance`The color scheme of the theme (typically referred to as light and dark mode). See the [dark mode guide](/themes/docs/theme/dark-mode) for details.         | `"inherit" \| "light" \| "dark"`                     | `"inherit"`     |
| `accentColor`The dominant color of the theme, see the [color guide](/themes/docs/theme/color) for details.                                                             | `enum`                                               | `"indigo"`      |
| `grayColor`The grayscale of the theme, see the [color guide](/themes/docs/theme/color) for details.                                                                    | `enum`                                               | `"auto"`        |
| `panelBackground`                                                                                                                                                      | `"solid" \| "translucent"`                           | `"translucent"` |
| `radius`Overrides the radius inherited from the theme. See the [radius guide](/themes/docs/theme/radius) for more details.                                             | `"none" \| "small" \| "medium" \| "large" \| "full"` | `"medium"`      |
| `scaling`The linear scaling applied to the theme. See the [scaling guide](/themes/docs/theme/spacing#scaling) for details.                                             | `"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.

```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">{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.

```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">{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>
```