暗黑模式

¥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

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

¥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.

考虑到服务器端渲染 (SSR)、服务器服务化 (SSG) 和客户端数据融合 (hydration) 的考虑，这是一个看似复杂的问题。为了简化实现，我们建议集成主题切换库。

¥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.

使用 next-themes

¥With next-themes

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

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

要启用暗黑模式，请将 next-themes 中的 <ThemeProvider> 与 attribute="class" 结合使用。

¥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>
	);
}

与其他库一起使用

¥With other libraries

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

¥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"