暗黑模式

使用外观来管理和集成暗黑模式。

概述

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

King Krule – The OOZ

一张黑暗且内省的专辑，展示了独特的流派融合。

立即收听

King Krule – The OOZ

一张黑暗且内省的专辑，展示了独特的流派融合。

立即收听

基本用法

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

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

继承系统外观

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

考虑到 SSR、SSG 和客户端 hydration 的因素，这是一个复杂的问题。为了简化实现，我们建议与主题切换库集成。

使用 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"