사용자 정의 테마

사용자 정의 테마 생성

참고: 이 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-in-JS 시스템에서 사용할 수 있는 다음 함수들을 사용하여 사용자 정의 CSS 선택기에 연결될 수 있습니다:

cssStringFromTheme
cssObjectFromTheme

이 함수들은 필요한 모든 테마 변수를 설정하는 CSS를 반환합니다. 문자열과 객체가 모두 지원되므로, 어떤 CSS-in-JS 시스템과도 통합할 수 있습니다.

기본 예로, 각 테마에 대한 사용자 정의 선택기와 함께 자체 style 요소를 렌더링할 수 있습니다. 테마의 CSS 렌더링을 제어하고 있기 때문에, RainbowKitProvider가 우리를 위해 스타일을 렌더링하지 않도록 theme prop에 null을 전달하고 있습니다. 또한 extends 옵션을 사용하는 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>
  );
};

개요

시작하기

고급

사용자 정의 테마

사용자 정의 테마 생성

내장 테마 확장

사용자 정의 테마 선택기 생성