테마 설정

테마 사용 및 맞춤화

RainbowKit UI를 브랜드와 일치하도록 조정할 수 있습니다. 사전 정의된 몇 가지 강조색상 및 테두리 반경 설정에서 선택할 수 있습니다.

3개의 기본 테마 함수가 있습니다:

lightTheme (기본값)
darkTheme
midnightTheme

테마 함수는 테마 객체를 반환합니다. 해당 객체를 RainbowKitProvider의 theme 속성에 전달할 수 있습니다.

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

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

원하는 경우 accentColor, accentColorForeground, borderRadius, fontStack, 및 overlayBlur를 전달하여 설정을 맞춤화할 수 있습니다.

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

export const App = () => (
  <RainbowKitProvider
    theme={darkTheme({
      accentColor: '#7b3fe4',
      accentColorForeground: 'white',
      borderRadius: 'small',
      fontStack: 'system',
      overlayBlur: 'small',
    })}
    {...etc}
  >
    {/* Your App */}
  </RainbowKitProvider>
);

내장 테마 맞춤화

기본 제공되는 테마 함수는 여러 다른 시각 스타일 중에서 선택할 수 있는 옵션 객체도 수용합니다.

Prop	Type	Default
`accentColor`	`string`	`"#0E76FD"`
`accentColorForeground`	`string`	`"white"`
`borderRadius`	`enum`	`large`
`fontStack`	`enum`	`rounded`
`overlayBlur`	`enum`	`none`

예를 들어, 보라색 강조 색상과 medium 테두리 반경 스케일로 어두운 테마를 맞춤화하려면:

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

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        accentColor: '#7b3fe4',
        accentColorForeground: 'white',
        borderRadius: 'medium',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};

각 테마는 옵션 객체에 확산할 수 있는 몇 가지 강조 색상 프리셋(blue, green, orange, pink, purple, red)을 제공합니다. 예를 들어, pink 강조 색상 프리셋을 사용하려면:

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

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        ...darkTheme.accentColors.pink,
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};

예시들

테마 함수

다음은 theme 속성을 사용할 수 있는 몇 가지 방법입니다.

darkTheme 테마를 사용합니다.

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

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

midnightTheme 테마를 사용합니다.

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

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

강조 색상

다음은 accentColor 설정을 사용할 수 있는 몇 가지 방법입니다.

강조 색상을 사용자 정의 보라색 값으로 설정합니다.

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

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        accentColor: '#7b3fe4',
        accentColorForeground: 'white',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};

강조 색상을 기본 제공 green 프리셋으로 설정합니다.

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

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        ...darkTheme.accentColors.green,
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};

테두리 반경

다음은 borderRadius 설정을 사용할 수 있는 방법입니다.

테두리 반경을 medium으로 설정합니다.

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

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        borderRadius: 'medium',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};

테두리 반경을 none으로 설정합니다.

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

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        borderRadius: 'none',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};

알림: 사용 가능한 테두리 반경 값은: large (기본값), medium, small, none입니다.

폰트 스택

기본적으로 fontStack는 rounded로 설정되지만, fontStack 설정을 사용할 수 있는 방법은 다음과 같습니다.

폰트 스택을 system으로 설정합니다.

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

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        fontStack: 'system',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};

블러 효과 오버레이

기본적으로 overlayBlur는 none으로 설정되지만, overlayBlur 설정을 사용하는 방법은 다음과 같습니다.

블러 효과 오버레이를 small로 설정합니다.

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

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        overlayBlur: 'small',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};

혼합 및 매칭

다음은 accentColor, borderRadius, fontStack 속성을 함께 사용하여 다양한 테마를 혼합하여 사용할 수 있는 몇 가지 방법입니다.

lightTheme 테마를 사용합니다.
강조 색상을 사용자 정의 보라색 값으로 설정합니다.
테두리 반경을 medium으로 설정합니다.
폰트 스택을 system으로 설정합니다.

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

const App = () => {
  return (
    <RainbowKitProvider
      theme={lightTheme({
        accentColor: '#7b3fe4',
        accentColorForeground: 'white',
        borderRadius: 'medium',
        fontStack: 'system',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};

midnightTheme 테마를 사용합니다.
강조 색상을 기본 제공 pink 프리셋으로 설정합니다.
테두리 반경을 small으로 설정합니다.
폰트 스택을 system으로 설정합니다.

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

const App = () => {
  return (
    <RainbowKitProvider
      theme={midnightTheme({
        ...midnightTheme.accentColors.pink,
        borderRadius: 'small',
        fontStack: 'system',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};

다크 모드 지원

앱이 표준 prefers-color-scheme: dark 미디어 쿼리를 사용하여 라이트 및 다크 모드를 전환하는 경우, lightMode 및 darkMode 값을 포함하는 동적 테마 객체를 선택적으로 제공할 수 있습니다.

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

const App = () => (
  <RainbowKitProvider
    theme={{
      lightMode: lightTheme(),
      darkMode: darkTheme(),
    }}
    {...etc}
  >
    {/* Your App */}
  </RainbowKitProvider>
);

개요

시작하기

고급