Tematização

Usando e personalizando os temas

Você pode ajustar a UI do RainbowKit para combinar com a sua marca. Você pode escolher entre algumas cores de destaque pré-definidas e configurações de raio de borda.

Existem 3 funções de tema integradas:

lightTheme (padrão)
darkTheme
midnightTheme

Uma função de tema retorna um objeto de tema. Você pode passar o objeto para a prop theme do RainbowKitProvider.

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

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

Se quiser, você pode inserir accentColor, accentColorForeground, borderRadius, fontStack e overlayBlur para personalizá-los.

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

Personalizando os temas embutidos

As funções de tema embutidos também aceitam um objeto de opções, permitindo que você escolha entre vários estilos visuais diferentes.

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

Por exemplo, para personalizar o tema escuro com uma cor de destaque roxa e uma escala de raio de borda medium:

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

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

Cada tema também fornece várias predefinições de cores de destaque (blue, green, orange, pink, purple, red) que podem ser espalhadas no objeto de opções. Por exemplo, para usar a pré-configuração de cor de destaque rosa:

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

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

Exemplos

Função de tema

Aqui estão algumas maneiras diferentes de usar a propriedade tema.

Use o tema darkTheme.

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

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

Use o tema midnightTheme.

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

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

Cor de destaque

Aqui estão algumas maneiras diferentes de usar a configuração corDeDestaque.

Defina a cor de destaque para um valor roxo personalizado.

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

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

Defina a cor de destaque para a pré-configuração verde incorporada.

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

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

Raio da borda

Aqui estão algumas maneiras diferentes de usar a configuração raioDaBorda.

Defina o raio da borda para médio.

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

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

Defina o raio da borda para none.

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

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

Lembrete: os valores de raio de borda disponíveis são: large (padrão), medium, small e none.

Pilha de fontes

Por padrão, a fontStack está configurada como rounded. Mas aqui está como você pode usar a configuração fontStack.

Configure a pilha de fontes para system.

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

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

Desfoque de sobreposição

Por padrão, o overlayBlur está configurado como none. Mas aqui está como você pode usar a configuração overlayBlur.

Configure o desfoque de sobreposição para small.

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

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

Mix and Match

Aqui estão algumas maneiras diferentes de você usar diferentes temas, com as props accentColor, borderRadius e fontStack juntas.

Use o tema lightTheme
Defina a cor de destaque para um valor roxo personalizado
Defina o raio da borda para medium
Configure a pilha de fontes para 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>
  );
};

Use o tema midnightTheme
Defina a cor de destaque para o preset pink integrado.
Defina o raio da borda para small
Configure a pilha de fontes para 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>
  );
};

Suporte para modo escuro

Se seu aplicativo usa a consulta de mídia padrão prefers-color-scheme: dark para alternar entre modos claro e escuro, você pode opcionalmente fornecer um objeto tema dinâmico contendo valores lightMode e darkMode.

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

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

Visão Geral

Introdução

Avançado