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 et configurations de rayon de bordure pré-définies.

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

lightTheme (par défaut)
darkTheme
midnightTheme

Une fonction thème renvoie un objet thème. Vous pouvez passer l'objet à la propriété theme de RainbowKitProvider.

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

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

Si vous le souhaitez, vous pouvez passer 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 une échelle de 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 couleur d'accent (bleu, vert, orange, rose, violet, rouge) qui peuvent être répartis dans l'objet options. Par exemple, pour utiliser le préréglage de couleur d'accent rose :

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

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

Exemples

Fonction de thème

Voici quelques différentes façons d'utiliser la propriété 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'accentuation

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

Définissez la couleur d'accentuation 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'accentuation sur la présélection green intégrée.

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 différentes façons d'utiliser la configuration borderRadius.

Définissez le rayon de la 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 la 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 de rayon de bordure disponibles sont : large (par défaut), medium, small et none.

Pile de polices

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

Définissez la pile de polices sur système.

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 aucun. Mais voici comment vous pouvez utiliser la configuration overlayBlur.

Réglez le flou de superposition sur petit.

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 différentes manières dont vous pouvez utiliser différents thèmes, avec les props accentColor, borderRadius et fontStack ensemble.

Utilisez le thème lightTheme
Définissez la couleur d'accentuation sur une valeur violette personnalisée
Définissez le rayon de la bordure sur medium
Définissez la pile de polices sur système

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'accentuation sur le préréglage pink intégré.
Réglez le rayon de la bordure sur small
Définissez la pile de polices sur système

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

const App = () => {
  return (
    <RainbowKitProvider
      theme={midnightTheme({
        ...midnightTheme.accentColors.pink,
        borderRadius: 'small',
        fontStack: 'system',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};

Support du mode sombre

Si votre application utilise la requête média standard prefers-color-scheme: dark pour basculer entre les modes lumineux et sombre, vous pouvez facultativement fournir un objet de 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é