Тематизация

Использование и настройка тем

Вы можете настроить UI 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>
);

Обзор

Начало работы

Продвинутый уровень