深色模式

使用 appearance 属性来管理和集成深色模式。

概述

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

King Krule – The OOZ

一张阴郁而富有内涵的专辑，展现了独特的流派融合。

立即收听

King Krule – The OOZ

一张阴郁而富有内涵的专辑，展现了独特的流派融合。

立即收听

基本用法

默认情况下，根 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"