深色模式

使用外观管理和集成深色模式。

概述

深色模式和浅色模式开箱即用，允许您轻松切换外观，而无需额外的设计或样式。

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

基本用法

默认情况下，根 Theme 外观为 light。要设置不同的外观，请通过 appearance 属性传递。这样将强制主题使用指定的设置。

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

继承系统外观

一个常见的需求是从用户的系统偏好中继承外观设置。

由于考虑到 SSR、SSG 和客户端水合，这个问题看似复杂。为了简化实现，我们建议与主题切换库集成。

使用 next-themes

与 next-themes 的集成简单明了，因为 Radix Themes 实现了匹配的类名。

要启用深色模式，请使用来自 next-themes 的 <ThemeProvider>，并设置 attribute="class"。

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

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

使用其他库

任何支持类切换的库都兼容。您只需确保添加的类名与 Radix Themes 支持的类名匹配：

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