主題化

使用和自定義主題

您可以調整 RainbowKit 的 UI 以符合您的品牌。您可以從幾個預定義的重點顏色和邊框半徑配置中選擇。

系統中內建了三個主題函數：

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），這些可以加入到選項對象中。例如，要使用 pink 重點顏色預設值：

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

概述

入門指南

進階

主題化