カスタムテーマ

カスタムテーマの作成

注意: この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 prop に自分のカスタムテーマを渡すことができます。

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

カスタムテーマセレクタの作成

もしアプリがサーバーレンダリングまたは静的レンダリングされており、ユーザーにテーマを手動で切り替えることができるのであれば、RainbowKit のテーマシステムは以下の関数を使用してカスタム CSS セレクタと接続できます。これらの関数はどの CSS-in-JS システムとも使用できます。

cssStringFromTheme
cssObjectFromTheme

これらの関数は、すべての必要なテーマ変数を設定する CSS を返します。文字列とオブジェクトの両方に対応しているため、任意の CSS-in-JS システムと統合できます。

基本的な例として、各テーマにカスタムセレクタを持つ style 要素をレンダリングすることができます。テーマの CSS のレンダリングを管理しているため、theme prop には null を渡して、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>
  );
};

概要

入門

高度な設定

カスタムテーマ

カスタムテーマの作成

組み込みテーマの拡張

カスタムテーマセレクタの作成