Thème personnalisé

Créer un thème personnalisé

Remarque : Cette API est instable et est susceptible de changer dans un avenir proche. Nous recommandons d'utiliser pour le moment les thèmes intégrés.

Bien que les thèmes intégrés offrent un certain niveau de personnalisation, le type Thème est fourni pour vous aider à définir vos propres thèmes personnalisés avec un accès à un niveau inférieur 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>;
)

Étendre un thème intégré

Vous pouvez étendre un thème intégré sans avoir à redéfinir l'ensemble du thème. Cela est utile lorsque vous souhaitez uniquement remplacer des jetons 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 (ex. : darkTheme) et le type Thème de TypeScript :

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

Ensuite, fusionnez le thème intégré avec les jetons de thème que vous souhaitez remplacer. Dans cet exemple, je remplace le jeton accentColor pour qu'il corresponde à 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éer des sélecteurs de thème personnalisés

Si votre application est rendue côté serveur/statutiologique et permet aux utilisateurs de basculer manuellement entre les thèmes, le système de thématique de RainbowKit peut être connecté à des sélecteurs CSS personnalisés avec les fonctions suivantes qui peuvent être utilisées avec n'importe quel système CSS-in-JS :

cssStringFromTheme
cssObjectFromTheme

Ces fonctions renvoient des CSS qui définissent toutes les variables de thème requises. Puisque les chaînes et les objets sont pris en charge, cela peut être intégré dans n'importe quel système CSS-in-JS.

À titre d'exemple basique, vous pouvez rendre votre propre élément style avec des sélecteurs personnalisés pour chaque thème. Étant donné que nous prenons le contrôle du rendu du CSS du thème, nous passons null à la propriété theme pour que RainbowKitProvider ne rende pas de styles pour nous. Notez également l'utilisation de l'option d'extends sur la fonction cssStringFromTheme qui omet toutes les variables de thème qui sont les mêmes que le 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éer un thème personnalisé

Étendre un thème intégré

Créer des sélecteurs de thème personnalisés