テーマ設定

テーマの使用とカスタマイズ

あなたはRainbowKit UIを自分のブランドに合わせて調整することができます。いくつかの事前に定義されたアクセントカラーやボーダーラディウスの設定から選ぶことができます。より高度なユースケースでは、完全にカスタムテーマを提供し、自分のボタンをレンダリングし、特定の機能を省略することができます。ダークモードを含みます。

3つの組み込みテーマ関数があります：

lightTheme (デフォルト)
darkTheme
midnightTheme

テーマ関数はテーマオブジェクトを返します。このオブジェクトを RainbowKitProviderのtheme プロパティに渡すことができます。

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

export const App = () => (
  <RainbowKitProvider theme={darkTheme()} {...etc}>
    {/* Your App */}
  </RainbowKitProvider>
);

必要であれば、accentColor、accentColorForeground、borderRadius、fontStack、およびoverlayBlurをカスタマイズするために渡すことができます。

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

export const App = () => (
  <RainbowKitProvider
    theme={darkTheme({
      accentColor: '#7b3fe4',
      accentColorForeground: 'white',
      borderRadius: 'small',
      fontStack: 'system',
      overlayBlur: 'small',
    })}
    {...etc}
  >
    {/* Your App */}
  </RainbowKitProvider>
);

組み込みテーマのカスタマイズ

組み込みのテーマ関数は、オプションオブジェクトも受け入れます。これにより、いくつかの異なる視覚スタイルから選択できます。

Prop	Type	Default
`accentColor`	`string`	`"#0E76FD"`
`accentColorForeground`	`string`	`"white"`
`borderRadius`	`enum`	`large`
`fontStack`	`enum`	`rounded`
`overlayBlur`	`enum`	`none`

例えば、ダークテーマをパープルのアクセントカラーとmediumのボーダーラディウススケールでカスタマイズする方法は次の通りです：

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        accentColor: '#7b3fe4',
        accentColorForeground: 'white',
        borderRadius: 'medium',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};

各テーマはさまざまなアクセントカラープリセット（blue、green、orange、pink、purple、red）を提供しており、これらをオプションオブジェクトにスプレッドすることができます。例えば、ピンクのアクセントカラープリセットを使用する方法は次の通りです：

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        ...darkTheme.accentColors.pink,
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};

例

テーマ機能

themeプロパティを使用するいくつかの異なる方法です。

darkThemeテーマを使用します。

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

export const App = () => (
  <RainbowKitProvider theme={darkTheme()} {...etc}>
    {/* Your App */}
  </RainbowKitProvider>
);

midnightThemeテーマを使用します。

import {
  RainbowKitProvider,
  midnightTheme,
} from '@rainbow-me/rainbowkit';

export const App = () => (
  <RainbowKitProvider theme={midnightTheme()} {...etc}>
    {/* Your App */}
  </RainbowKitProvider>
);

アクセントカラー

accentColor設定を使用するいくつかの異なる方法です。

アクセントカラーをカスタムの紫色に設定します。

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        accentColor: '#7b3fe4',
        accentColorForeground: 'white',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};

アクセントカラーを内蔵のgreenプリセットに設定します。

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        ...darkTheme.accentColors.green,
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};

ボーダーラディウス

borderRadius設定を使用するいくつかの異なる方法です。

ボーダーラディウスをmediumに設定します。

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        borderRadius: 'medium',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};

ボーダーラディウスをnoneに設定します。

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        borderRadius: 'none',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};

リマインダー：利用可能なボーダーラディウスの値は、large（デフォルト）、medium、small、およびnoneです。

フォントスタック

デフォルトでは、fontStackはroundedに設定されています。しかし、ここではfontStack設定の使い方を説明します。

フォントスタックをsystemに設定します。

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        fontStack: 'system',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};

オーバーレイのブラー

デフォルトでは、overlayBlurはnoneに設定されています。しかし、ここではoverlayBlur設定の使い方を説明します。

オーバレイのブラーをsmallに設定します。

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        overlayBlur: 'small',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};

ミックスアンドマッチ

ここでは、異なるテーマを使用するためのいくつかの方法と、accentColor、borderRadius、fontStackプロパティを一緒に使用する方法を説明します。

lightTheme テーマを使用する
アクセントカラーをカスタムパープル値に設定する
境界線の半径を medium に設定する
フォントスタックを system に設定する

import { RainbowKitProvider, lightTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={lightTheme({
        accentColor: '#7b3fe4',
        accentColorForeground: 'white',
        borderRadius: 'medium',
        fontStack: 'system',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};

midnightTheme テーマを使用する
アクセントカラーをビルトインの pink プリセットに設定する。
境界線の半径を small に設定する
フォントスタックを system に設定する

import {
  RainbowKitProvider,
  midnightTheme,
} from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={midnightTheme({
        ...midnightTheme.accentColors.pink,
        borderRadius: 'small',
        fontStack: 'system',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};

ダークモードのサポート

あなたのアプリが標準的な prefers-color-scheme: dark メディアクエリを使用してライトモードとダークモードを切り替える場合、オプションで動的なテーマオブジェクトを提供して lightMode と darkMode の値を設定することができます。

import {
  RainbowKitProvider,
  lightTheme,
  darkTheme,
} from '@rainbow-me/rainbowkit';

const App = () => (
  <RainbowKitProvider
    theme={{
      lightMode: lightTheme(),
      darkMode: darkTheme(),
    }}
    {...etc}
  >
    {/* Your App */}
  </RainbowKitProvider>
);

概要

入門

高度な設定