Tema Personalizado

Criando um tema personalizado

Nota: Esta API é instável e provavelmente sofrerá alterações em um futuro próximo. Recomendamos usar os temas integrados por agora.

Embora os temas integrados ofereçam algum nível de personalização, o tipo Theme é fornecido para ajudá-lo a definir seus próprios temas personalizados com acesso mais profundo às variáveis de tema subjacentes.

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

Estendendo um tema integrado

Você pode estender um tema integrado sem precisar redefinir todo o tema. Isso é útil quando você deseja apenas substituir tokens de tema específicos.

Para isso, instale lodash.merge (ou equivalente):

npm install lodash.merge

Importe-o, juntamente com o tema que você deseja estender (por exemplo: darkTheme) e o tipo Theme do TypeScript:

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

Em seguida, faça merge do tema integrado com os tokens de tema que você gostaria de substituir. Neste exemplo, estou substituindo o token accentColor para coincidir com a cor de destaque da minha marca.

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

Finalmente, agora você pode passar seu tema personalizado para a propriedade theme do RainbowKitProvider.

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

Criando seletores de tema personalizados

Se o seu aplicativo é renderizado no servidor/estaticamente e permite que os usuários alternem manualmente entre temas, o sistema de tematização do RainbowKit pode ser integrado a seletores CSS personalizados com as seguintes funções que podem ser utilizadas com qualquer sistema CSS-in-JS:

cssStringFromTheme
cssObjectFromTheme

Essas funções retornam CSS que define todas as variáveis de tema necessárias. Como ambas suportam strings e objetos, isso pode ser integrado a qualquer sistema CSS-in-JS.

Como um exemplo básico, você pode renderizar seu próprio elemento style com seletores personalizados para cada tema. Como estamos assumindo o controle de renderizar o CSS do tema, estamos passando null para a propriedade theme para que o RainbowKitProvider não renderize nenhum estilo para nós. Também observe o uso da opção extends na função cssStringFromTheme que omite quaisquer variáveis de tema que sejam iguais ao tema 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>
  );
};

Visão Geral

Introdução

Avançado

Tema Personalizado

Criando um tema personalizado

Estendendo um tema integrado

Criando seletores de tema personalizados