Tema Personalizado

Creando un tema personalizado

Nota: Esta API es inestable y probablemente cambiará en el futuro cercano. Recomendamos adherirse a los temas integrados por ahora.

Mientras que los temas integrados ofrecen cierto nivel de personalización, el tipo Theme se proporciona para ayudarte a definir tus propios temas personalizados con acceso de bajo nivel a las variables subyacentes del tema.

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

Extender un tema incorporado

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

Para hacer esto, instala lodash.merge (o equivalente):

npm install lodash.merge

Impórtalo junto con el tema que deseas extender (ej: darkTheme) y el tipo Theme de TypeScript:

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

Luego, combina el tema incorporado con los tokens de tema que deseas 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 puedes pasar tu tema personalizado a la propiedad theme de RainbowKitProvider.

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

Creando selectores de temas personalizados

Si tu aplicación es renderizada en servidor/estáticamente y permite a los usuarios cambiar manualmente entre temas, el sistema de temas de RainbowKit puede conectarse a selectores CSS personalizados con las siguientes funciones que pueden usarse con cualquier sistema CSS-in-JS:

cssStringFromTheme
cssObjectFromTheme

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

Como un ejemplo básico, puedes renderizar tu propio elemento style con selectores personalizados para cada tema. Como 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 observa el uso de la opción de extensión 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

Extender un tema incorporado

Creando selectores de temas personalizados