Tema personalizado

Creando un tema personalizado

Nota: Esta API es inestable y es probable que cambie en un futuro cercano. Recomendamos seguir con los temas incorporados para ahora.

Mientras los temas incorporados ofrecen algún nivel de personalización, el tipo Tema se proporciona para ayudarlo a definir sus propios temas personalizados con acceso de nivel inferior a las variables de tema subyacentes.

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

Extendiendo un tema incorporado

Puede extender un tema incorporado sin tener que redefinir todo el tema. Esto es útil cuando solo desea sobrescribir tokens de tema específicos.

Para hacer eso, instale lodash.merge (o equivalente):

npm install lodash.merge

Impórtelo, junto con el tema que desea extender (por ejemplo: darkTheme) y el tipo Theme de TypeScript:

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

Luego, combine el tema incorporado, con los tokens de tema que le gustaría sobrescribir. En este ejemplo, estoy sobrescribiendo el token accentColor para que coincida con el color de acento de mi marca.

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

Finalmente, ahora puede pasar su tema personalizado al theme prop de RainbowKitProvider.

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

Creando selectores de temas personalizados

Si su aplicación se renderiza en el servidor o estáticamente y permite a los usuarios cambiar manualmente entre temas, el sistema de temas de RainbowKit se puede conectar a selectores CSS personalizados con las siguientes funciones que se pueden usar con cualquier sistema CSS-en-JS:

cssStringFromTheme
cssObjectFromTheme

Estas funciones devuelven CSS que establece todas las variables de tema requeridas. Dado que se admiten tanto cadenas como objetos, esto se puede integrar con cualquier sistema CSS-en-JS.

Como un ejemplo básico, puedes renderizar tu propio elemento style con selectores personalizados para cada tema. Dado que estamos tomando el control de la renderización del CSS del tema, estamos pasando null a la propiedad theme para que RainbowKitProvider no renderice ningún estilo para nosotros. También nota el uso de la opción extends en la función cssStringFromTheme que omite cualquier variable de tema que sea la misma que el 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>
  );
};

Visión General

Primeros Pasos

Avanzado

Tema personalizado

Creando un tema personalizado

Extendiendo un tema incorporado

Creando selectores de temas personalizados