Source: https://www.radix-ui.com/themes/docs/theme/dark-mode

Radix Homepage

Made by WorkOS

Radix Homepage

Made by WorkOS

ThemesThemes PrimitivesPrimitives IconsIcons ColorsColors

Documentation Playground Blog

Overview

Getting started Styling Layout Releases Resources

Theme

Overview Color Dark mode Typography Spacing Breakpoints Radius Shadows Cursors

Layout

Box Flex Grid Container Section

Typography

Text Heading Blockquote Code Em Kbd Link Quote Strong

Components

Alert Dialog Aspect Ratio Avatar Badge Button Callout Card Checkbox Checkbox Group Checkbox Cards Context Menu Data List Dialog Dropdown Menu Hover Card Icon Button Inset Popover Progress Radio Radio Group Radio Cards Scroll Area Segmented Control Select Separator Skeleton Slider Spinner Switch Table Tabs Tab Nav Text Area Text Field Tooltip

Utilities

Accessible Icon Portal Reset Slot Theme Visually Hidden

Guides

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.

Listen Now

King Krule – The OOZ

A dark and introspective album that showcases a distinctive blend of genres.

Listen Now

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.

<Theme appearance="dark">
	<MyApp />
</Theme>

Inheriting system appearance

---

A common requirement is to inherit the appearance setting from a user’s system preferences.

This is a deceptively complex problem to solve given SSR, SSG and client side hydration considerations. To make implementation easier, we recommend integrating with a theme switching library.

With next-themes

Integration with next-themes is simple and straightforward because Radix Themes implements matching class names.

To enable dark mode, use <ThemeProvider> from next-themes with attribute="class".

import { Theme } from "@radix-ui/themes";
import { ThemeProvider } from "next-themes";

export default function () {
	return (
		<ThemeProvider attribute="class">
			<Theme>
				<MyApp />
			</Theme>
		</ThemeProvider>
	);
}

Do not try to set <Theme appearance={resolvedTheme}>. Instead, rely just on class switching that next-themes provides. This way next-themes can prevent the appearance flash during initial render.

With other libraries

Any library that supports class switching is compatible. You’ll just need to ensure that the appended class names match those supported by Radix Themes:

• className="light"
• className="light-theme"
• className="dark"
• className="dark-theme"

PreviousColor

NextTypography

Edit this page on GitHub.