Тематизація

Використання та налаштування тем

Ви можете налаштувати інтерфейс RainbowKit відповідно до вашого бренду. Ви можете обрати з кількох попередньо визначених акцентних кольорів і конфігурацій радіусу межі.

Існує 3 вбудовані функції теми:

lightTheme (за замовчуванням)
darkTheme
midnightTheme

Функція теми повертає об'єкт теми. Ви можете передати об'єкт у властивість theme провайдера RainbowKitProvider.

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

Огляд

Початок роботи

Розширені можливості