Thème personnalisé

Création d'un thème personnalisé

Note : Cette API est instable et susceptible de changer dans un futur proche. Nous recommandons de s'en tenir aux thèmes intégrés pour le moment.

Bien que les thèmes intégrés offrent un certain niveau de personnalisation, le type Theme est fourni pour vous aider à définir vos propres thèmes personnalisés avec un accès de bas niveau aux variables de thème sous-jacentes.

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

Extension d'un thème intégré

Vous pouvez étendre un thème intégré sans avoir à redéfinir tout le thème. Ceci est utile lorsque vous souhaitez simplement remplacer des tokens de thème spécifiques.

Pour ce faire, installez lodash.merge (ou équivalent) :

npm install lodash.merge

Importez-le, ainsi que le thème que vous souhaitez étendre (par exemple : darkTheme) et le type TypeScript Theme :

import merge from 'lodash.merge';
import {
  RainbowKitProvider,
  darkTheme,
  Theme,
} from '@rainbow-me/rainbowkit';

Ensuite, fusionnez le thème intégré avec les tokens de thème que vous souhaitez remplacer. Dans cet exemple, je remplace le token accentColor pour correspondre à la couleur d'accent de ma marque.

const myTheme = merge(darkTheme(), {
  colors: {
    accentColor: '#07296d',
  },
} as Theme);

Enfin, vous pouvez maintenant passer votre thème personnalisé à la propriété theme de RainbowKitProvider.

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

Création de sélecteurs de thème personnalisés

Si votre application est rendue de manière serveur ou statiquement et permet aux utilisateurs de basculer manuellement entre les thèmes, le système de thématisation de RainbowKit peut être relié à des sélecteurs CSS personnalisés avec les fonctions suivantes qui peuvent être utilisées avec tout système CSS-in-JS :

cssStringFromTheme
cssObjectFromTheme

Ces fonctions renvoient du CSS qui définit toutes les variables de thème requises. Puisque les chaînes et les objets sont pris en charge, cela peut être intégré à tout système CSS-in-JS.

Pour un exemple de base, vous pouvez rendre votre propre élément style avec des sélecteurs personnalisés pour chaque thème. Puisque nous prenons le contrôle du rendu du CSS du thème, nous passons null à la propriété theme afin que RainbowKitProvider ne rende aucun style pour nous. Notez également l'utilisation de l'option extends sur la fonction cssStringFromTheme qui omet toutes les variables de thème identiques au thème de base.

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

Aperçu

Prise en main

Avancé

Thème personnalisé

Création d'un thème personnalisé

Extension d'un thème intégré

Création de sélecteurs de thème personnalisés