主题

使用和自定义主题

您可以调整 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`

例如，要使用紫罗兰色的重音颜色和中等边界半径尺寸自定义深色主题：

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

概览

入门

高级

主题