自定义主题

创建自定义主题

注意：该API不稳定且可能在不久的将来改变。我们建议现在先坚持使用内置的主题。

虽然内置主题提供了一定程度的自定义，但Theme类型是为了帮助你定义你自己的自定义主题，它为你提供了到底层主题变量的低级访问。

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

const myCustomTheme: Theme = {
  blurs: {
    modalOverlay: '...',
  },
  colors: {
    accentColor: '...',
    accentColorForeground: '...',
    actionButtonBorder: '...',
    actionButtonBorderMobile: '...',
    actionButtonSecondaryBackground: '...',
    closeButton: '...',
    closeButtonBackground: '...',
    connectButtonBackground: '...',
    connectButtonBackgroundError: '...',
    connectButtonInnerBackground: '...',
    connectButtonText: '...',
    connectButtonTextError: '...',
    connectionIndicator: '...',
    downloadBottomCardBackground: '...',
    downloadTopCardBackground: '...',
    error: '...',
    generalBorder: '...',
    generalBorderDim: '...',
    menuItemBackground: '...',
    modalBackdrop: '...',
    modalBackground: '...',
    modalBorder: '...',
    modalText: '...',
    modalTextDim: '...',
    modalTextSecondary: '...',
    profileAction: '...',
    profileActionHover: '...',
    profileForeground: '...',
    selectedOptionBorder: '...',
    standby: '...',
  },
  fonts: {
    body: '...',
  },
  radii: {
    actionButton: '...',
    connectButton: '...',
    menuButton: '...',
    modal: '...',
    modalMobile: '...',
  },
  shadows: {
    connectButton: '...',
    dialog: '...',
    profileDetailsAction: '...',
    selectedOption: '...',
    selectedWallet: '...',
    walletLogo: '...',
  },
};

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

扩展内置主题

你可以扩展内置主题，而不需要重新定义整个主题。当你只想覆盖特定主题令牌时，这是有用的。

要做到这一点，安装lodash.merge（或等效物）：

npm install lodash.merge

导入它，同时导入你想要扩展的主题（例如：darkTheme）和 TypeScript 的 Theme 类型:

import merge from 'lodash.merge';
import {
  RainbowKitProvider,
  darkTheme,
  Theme,
} from '@rainbow-me/rainbowkit';

然后，将内置主题与你想要覆盖的主题标记进行合并。在这个例子中，我正在覆盖accentColor标记来匹配我的品牌的强调色。

const myTheme = merge(darkTheme(), {
  colors: {
    accentColor: '#07296d',
  },
} as Theme);

最后，你现在可以将你的自定义主题传递给RainbowKitProvider的theme属性。

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

创建自定义主题选择器

如果你的应用是服务器/静态渲染的，并允许用户手动切换主题，那么RainbowKit的主题系统可以通过以下可以与任何CSS-in-JS系统一起使用的函数与自定义CSS选择器进行链接：

cssStringFromTheme
cssObjectFromTheme

这些函数返回设置所有所需主题变量的CSS。由于支持字符串和对象，因此可以将其集成到任何CSS-in-JS系统中。

作为一个基本示例，您可以使用每个主题的自定义选择器渲染自己的style元素。因为我们正在控制渲染主题的CSS，所以我们传递null给theme属性，这样RainbowKitProvider就不会为我们渲染任何样式。还要注意在cssStringFromTheme函数的extends选项上使用，它会忽略任何与基础主题相同的主题变量。

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

const App = () => {
  return (
    <RainbowKitProvider theme={null} {...etc}>
      <style
        dangerouslySetInnerHTML={{
          __html: `
            :root {
              ${cssStringFromTheme(lightTheme)}
            }

            html[data-dark] {
              ${cssStringFromTheme(darkTheme, {
                extends: lightTheme,
              })}
            }
          `,
        }}
      />

      {/* ... */}
    </RainbowKitProvider>
  );
};

概览

入门

高级

自定义主题

创建自定义主题

扩展内置主题

创建自定义主题选择器