> Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.
# Dark mode
Using appearance to manage and integrate dark mode.
## Overview
Light and dark modes are supported out of the box, allowing you to easily switch appearance without additional design or styling.
### King Krule – The OOZ
A dark and introspective album that showcases a distinctive blend of genres.
### King Krule – The OOZ
A dark and introspective album that showcases a distinctive blend of genres.
## Basic usage
By default, the root `Theme` appearance is `light`. To set a different appearance pass it via the `appearance` prop. This will force the theme to use the specified setting.
```tsx
import type { Element } from "solid-js";
export default (props: { children: Element }) =>
{props.children}
;
```
## Inheriting system appearance
A common requirement is to inherit the appearance setting from a user’s system preferences.
Use the browser's `matchMedia` API and pass the resolved appearance to `Theme`. This example renders light during SSR and initial hydration, then follows the system preference:
```tsx
import { createSignal, onSettled, type Element } from "solid-js";
import { isServer } from "@solidjs/web";
import { Theme } from "@radix-solid/themes";
export default function SystemTheme(props: { children: Element }) {
const [dark, setDark] = createSignal(false);
if (!isServer) onSettled(() => {
const media = window.matchMedia("(prefers-color-scheme: dark)");
const update = () => setDark(media.matches);
update();
media.addEventListener("change", update);
return () => media.removeEventListener("change", update);
});
return {props.children};
}
```
For a flash-free initial appearance, resolve it before the first paint: use a server-provided preference or a pre-paint script that sets the document's appearance class. Keep the server render and initial hydration appearance consistent.
### With other libraries
Class-switching integrations must support Solid and match the class names understood by Radix Themes. React-only providers such as `next-themes` cannot wrap native Solid components.
- `class="light"`
- `class="light-theme"`
- `class="dark"`
- `class="dark-theme"`