커스텀 테마

커스텀 테마 만들기

참고: 이 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 함수의 확장 옵션을 사용하여 기본 테마와 동일한 테마 변수를 생략합니다.

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

개요

시작하기

고급

커스텀 테마

커스텀 테마 만들기

기본 제공 테마 확장하기

커스텀 테마 선택기 만들기