テーマ設定
テーマ設定
テーマの使用とカスタマイズ
あなたはRainbowKit UIを自分のブランドに合わせて調整することができます。 いくつかの事前に定義されたアクセントカラーやボーダーラディウスの設定から選ぶことができます。
3つの組み込みテーマ関数があります:
lightTheme
(デフォルト)
darkTheme
midnightTheme
テーマ関数はテーマオブジェクトを返します。 このオブジェクトを RainbowKitProvider
のtheme
プロパティに渡すことができます。
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
export const App = () => (
<RainbowKitProvider theme={darkTheme()} {...etc}>
{}
</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}
>
{}
</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}
>
{}
</RainbowKitProvider>
);
};
各テーマはさまざまなアクセントカラープリセット(blue
、green
、orange
、pink
、purple
、red
)を提供しており、これらをオプションオブジェクトにスプレッドすることができます。 例えば、ピンクのアクセントカラープリセットを使用する方法は次の通りです:
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
const App = () => {
return (
<RainbowKitProvider
theme={darkTheme({
...darkTheme.accentColors.pink,
})}
{...etc}
>
{}
</RainbowKitProvider>
);
};
theme
プロパティを使用するいくつかの異なる方法です。
darkTheme
テーマを使用します。
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
export const App = () => (
<RainbowKitProvider theme={darkTheme()} {...etc}>
{}
</RainbowKitProvider>
);
midnightTheme
テーマを使用します。
import {
RainbowKitProvider,
midnightTheme,
} from '@rainbow-me/rainbowkit';
export const App = () => (
<RainbowKitProvider theme={midnightTheme()} {...etc}>
{}
</RainbowKitProvider>
);
accentColor
設定を使用するいくつかの異なる方法です。
アクセントカラーをカスタムの紫色に設定します。
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
const App = () => {
return (
<RainbowKitProvider
theme={darkTheme({
accentColor: '#7b3fe4',
accentColorForeground: 'white',
})}
{...etc}
>
{}
</RainbowKitProvider>
);
};
アクセントカラーを内蔵のgreen
プリセットに設定します。
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
const App = () => {
return (
<RainbowKitProvider
theme={darkTheme({
...darkTheme.accentColors.green,
})}
{...etc}
>
{}
</RainbowKitProvider>
);
};
borderRadius
設定を使用するいくつかの異なる方法です。
ボーダーラディウスをmedium
に設定します。
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
const App = () => {
return (
<RainbowKitProvider
theme={darkTheme({
borderRadius: 'medium',
})}
{...etc}
>
{}
</RainbowKitProvider>
);
};
ボーダーラディウスをnone
に設定します。
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
const App = () => {
return (
<RainbowKitProvider
theme={darkTheme({
borderRadius: 'none',
})}
{...etc}
>
{}
</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}
>
{}
</RainbowKitProvider>
);
};
デフォルトでは、overlayBlur
はnone
に設定されています。 しかし、ここではoverlayBlur
設定の使い方を説明します。
オーバレイのブラーをsmall
に設定します。
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
const App = () => {
return (
<RainbowKitProvider
theme={darkTheme({
overlayBlur: 'small',
})}
{...etc}
>
{}
</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}
>
{}
</RainbowKitProvider>
);
};
import {
RainbowKitProvider,
midnightTheme,
} from '@rainbow-me/rainbowkit';
const App = () => {
return (
<RainbowKitProvider
theme={midnightTheme({
...midnightTheme.accentColors.pink,
borderRadius: 'small',
fontStack: 'system',
})}
{...etc}
>
{}
</RainbowKitProvider>
);
};
あなたのアプリが標準的な prefers-color-scheme: dark
メディアクエリを使用してライトモードとダークモードを切り替える場合、オプションで動的なテーマオブジェクトを提供して lightMode
と darkMode
の値を設定することができます。
import {
RainbowKitProvider,
lightTheme,
darkTheme,
} from '@rainbow-me/rainbowkit';
const App = () => (
<RainbowKitProvider
theme={{
lightMode: lightTheme(),
darkMode: darkTheme(),
}}
{...etc}
>
{}
</RainbowKitProvider>
);