Користувацька Тема

Створення користувацької теми

Примітка: Цей API нестабільний і, ймовірно, змінюватиметься в найближчому майбутньому. Ми рекомендуємо на даний момент використовувати вбудовані теми.

Хоча вбудовані теми забезпечують певний рівень налаштування, тип Тема надається для того, щоб допомогти вам визначити власні користувацькі теми з нижчим рівнем доступу до основних змінних теми.

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:

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

Огляд

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

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

Користувацька Тема

Створення користувацької теми

Розширення вбудованої теми

Створення селекторів для користувацьких тем