Thématisation

Utilisation et personnalisation des thèmes

Vous pouvez ajuster l'interface utilisateur de RainbowKit pour correspondre à votre image de marque. Vous pouvez choisir parmi quelques couleurs d'accent prédéfinies et configurations de rayon de bordure.

Il y a 3 fonctions de thème intégrées :

lightTheme (par défaut)
darkTheme
midnightTheme

Une fonction thème retourne un objet thème. Vous pouvez passer l'objet à la prop theme du RainbowKitProvider.

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

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

Si vous le souhaitez, vous pouvez transmettre accentColor, accentColorForeground, borderRadius, fontStack et overlayBlur pour les personnaliser.

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

Personnalisation des thèmes intégrés

Les fonctions de thème intégrées acceptent également un objet d'options, vous permettant de choisir parmi plusieurs styles visuels différents.

Prop	Type	Default
`accentColor`	`string`	`"#0E76FD"`
`accentColorForeground`	`string`	`"white"`
`borderRadius`	`enum`	`large`
`fontStack`	`enum`	`rounded`
`overlayBlur`	`enum`	`none`

Par exemple, pour personnaliser le thème sombre avec une couleur d'accent violet et un rayon de bordure medium :

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

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        accentColor: '#7b3fe4',
        accentColorForeground: 'white',
        borderRadius: 'medium',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};

Chaque thème propose également plusieurs préréglages de couleurs d'accent (blue, green, orange, pink, purple, red) qui peuvent être intégrés dans l'objet d'options. Par exemple, pour utiliser le préréglage de couleur d'accent pink :

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

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        ...darkTheme.accentColors.pink,
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};

Exemples

Fonction thème

Voici quelques façons différentes d'utiliser la prop theme.

Utilisez le thème darkTheme.

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

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

Utilisez le thème midnightTheme.

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

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

Couleur d'accent

Voici quelques façons différentes d'utiliser la configuration accentColor.

Définissez la couleur d'accent sur une valeur violette personnalisée.

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

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        accentColor: '#7b3fe4',
        accentColorForeground: 'white',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};

Définissez la couleur d'accent sur le préréglage intégré green.

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

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        ...darkTheme.accentColors.green,
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};

Rayon de bordure

Voici quelques façons différentes d'utiliser la configuration borderRadius.

Définissez le rayon de bordure sur medium.

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

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

Définissez le rayon de bordure sur none.

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

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

Rappel : les valeurs disponibles pour le rayon de bordure sont : large (par défaut), medium, small et none.

Pile de polices

Par défaut, la fontStack est définie sur rounded. Mais voici comment vous pouvez utiliser la configuration fontStack.

Définissez la pile de polices sur system.

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

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

Flou de superposition

Par défaut, le overlayBlur est défini sur none. Mais voici comment vous pouvez utiliser la configuration overlayBlur.

Définissez le flou de superposition sur small.

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

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

Mélanger et assortir

Voici quelques façons différentes d'utiliser différents thèmes, avec les props accentColor, borderRadius et fontStack ensemble.

Utilisez le thème lightTheme
Définissez la couleur d'accent sur une valeur violette personnalisée
Définissez le rayon de bordure sur medium
Définissez la pile de polices sur 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>
  );
};

Utilisez le thème midnightTheme
Définissez la couleur d'accent sur le préréglage intégré pink.
Définissez le rayon de bordure sur small
Définissez la pile de polices sur 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>
  );
};

Prise en charge du mode sombre

Si votre application utilise la requête média standard prefers-color-scheme: dark pour alterner entre les modes clair et sombre, vous pouvez éventuellement fournir un objet thème dynamique contenant les valeurs lightMode et darkMode.

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

const App = () => (
  <RainbowKitProvider
    theme={{
      lightMode: lightTheme(),
      darkMode: darkTheme(),
    }}
    {...etc}
  >
    {/* Your App */}
  </RainbowKitProvider>
);

Aperçu

Prise en main

Avancé