Пользовательская тема

Создание пользовательской темы

Примечание: АПИ находится в стадии разработки и может измениться в ближайшем будущем. Мы рекомендуем пока использовать встроенные темы.

Хотя встроенные темы обеспечивают некоторый уровень настройки, тип 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);

Наконец, вы можете передать вашу пользовательскую тему свойству theme провайдера RainbowKitProvider.

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

Создание селекторов пользовательских тем

Если ваше приложение рендерится на сервере/статично и позволяет пользователям вручную переключаться между темами, система тем RainbowKit может быть подключена к пользовательским селекторам CSS с помощью следующих функций, которые могут быть использованы с любой системой CSS-in-JS:

cssStringFromTheme
cssObjectFromTheme

Эти функции возвращают CSS, который устанавливает все необходимые переменные темы. Поскольку поддерживаются как строки, так и объекты, это можно интегрировать с любой системой CSS-in-JS.

В качестве основного примера вы можете отрисовать собственный элемент style с пользовательскими селекторами для каждой темы. Поскольку мы контролируем рендеринг CSS темы, мы передаем null свойству theme, чтобы RainbowKitProvider не рендерил никаких стилей для нас. Также обратите внимание на использование опции 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>
  );
};

Обзор

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

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

Пользовательская тема

Создание пользовательской темы

Расширение встроенной темы

Создание селекторов пользовательских тем