自定義主題

創建自定義主題

注意：此 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>;
)

擴展內建主題

您可以擴展內建主題，而無需重新定義整個主題。這樣可讓您只覆蓋特定主題 token。

為此，請安裝 lodash.merge （或同類庫）：

npm install lodash.merge

並導入您想擴展的主題（例如：darkTheme）和 TypeScript 的 Theme 類型：

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

然後，將內建主題與想要覆蓋的主題 token 合併。在此例中，我將覆蓋 accentColor token 以配合我的品牌強調色。

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 函數中擴展選項的應用省略了與基礎主題相同的任何主題變數。

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

概述

入門指南

進階

自定義主題

創建自定義主題

擴展內建主題

創建自定義主題選擇器