Оформление тематического оформления

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

Вы можете настроить интерфейс 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.

Стек шрифтов

По умолчанию стек шрифтов настроен на rounded. Вот как вы можете использовать конфигурацию fontStack.

Установите стек шрифтов на system.

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

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

Размытие наложения

По умолчанию размытие наложения установлено в 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>
);

Обзор

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

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