テーマ設定

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

RainbowKit UIを、簡単にブランドに合わせて調整できます。いくつかの事前定義されたアクセントカラーとボーダー半径の構成から選べます。

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

lightTheme (デフォルト)
darkTheme
midnightTheme

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

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）も提供します。例えば、pinkアクセントカラープリセットを使うには:

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

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

例

テーマ関数

こちらは、テーマプロップを使用するいくつかの異なる方法です。

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

概要

入門

高度な設定