ダークモード

外観を使用してダークモードを管理および統合する。

概要

ライトモードとダークモードは標準でサポートされているため、追加のデザインやスタイリングなしで簡単に外観を切り替えることができます。

King Krule – The OOZ

独特のジャンルブレンドを紹介する、ダークで内省的なアルバム。

今すぐ聴く

King Krule – The OOZ

独特のジャンルブレンドを紹介する、ダークで内省的なアルバム。

今すぐ聴く

基本的な使い方

デフォルトでは、ルートのThemeの外観はlightです。異なる外観を設定するには、appearanceプロップに渡します。これにより、テーマは指定された設定を強制的に使用します。

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

システムの外観を継承する

一般的な要件は、ユーザーのシステム設定から外観設定を継承することです。

SSR、SSG、クライアント側のハイドレーションを考慮すると、これは解決するのが非常に複雑な問題です。実装を容易にするために、テーマ切り替えライブラリとの統合を推奨します。

next-themesを使用する場合

Radix Themesは一致するクラス名を実装しているため、next-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"