Tematización
Tematización
Uso y personalización de los temas
Puede ajustar la interfaz de usuario de RainbowKit para que coincida con su marca. Puede elegir entre algunos colores de acento predefinidos y configuraciones de radio de borde.
Existen 3 funciones de tema incorporadas:
Una función de tema devuelve un objeto de tema. Puede pasar el objeto al prop theme del RainbowKitProvider.
import { RainbowKitProvider , darkTheme } from '@rainbow-me/rainbowkit' ;
export const App = ( ) => (
< RainbowKitProvider theme = { darkTheme ( ) } { ... etc} >
{ }
</ RainbowKitProvider >
) ;
Si lo desea, puede pasar en accentColor, accentColorForeground, borderRadius, fontStack y overlayBlur para personalizarlos.
import { RainbowKitProvider , darkTheme } from '@rainbow-me/rainbowkit' ;
export const App = ( ) => (
< RainbowKitProvider theme = { darkTheme ( {
accentColor : '#7b3fe4' ,
accentColorForeground : 'white' ,
borderRadius : 'small' ,
fontStack : 'system' ,
overlayBlur : 'small' ,
} ) } { ... etc} >
{ }
</ RainbowKitProvider >
) ;
Las funciones de tema incorporadas también aceptan un objeto de opciones, permitiéndole seleccionar entre varios estilos visuales diferentes.
Prop Type Default accentColorInformation string "#0E76FD"accentColorForegroundInformation string "white"borderRadiusInformation enum Information grandefontStackInformation enum Information redondeadooverlayBlurInformation enum Information none
Por ejemplo, para personalizar el tema oscuro con un color de acento morado y una escala de radio de borde medium:
import { RainbowKitProvider , darkTheme } from '@rainbow-me/rainbowkit' ;
const App = ( ) => {
return (
< RainbowKitProvider theme = { darkTheme ( {
accentColor: '#7b3fe4' ,
accentColorForeground: 'white' ,
borderRadius: 'medium' ,
} ) } { ... etc} >
{ }
</ RainbowKitProvider >
) ;
} ;
Cada tema también proporciona varios preajustes de color de acento (blue, green, orange, pink, purple, red) que se pueden integrar en el objeto de opciones. Por ejemplo, para usar el preset de color de acento rosado:
import { RainbowKitProvider , darkTheme } from '@rainbow-me/rainbowkit' ;
const App = ( ) => {
return (
< RainbowKitProvider theme = { darkTheme ( {
... darkTheme. accentColors . pink ,
} ) } { ... etc} >
{ }
</ RainbowKitProvider >
) ;
} ;
Utilice el tema midnightTheme
Use el tema temaMedianoche.
import { RainbowKitProvider , darkTheme } from '@rainbow-me/rainbowkit' ;
export const App = ( ) => (
< RainbowKitProvider theme = { darkTheme ( ) } { ... etc} >
{ }
</ RainbowKitProvider >
) ;
Use el tema midnightTheme.
import {
RainbowKitProvider ,
midnightTheme,
} from '@rainbow-me/rainbowkit' ;
export const App = ( ) => (
< RainbowKitProvider theme = { midnightTheme ( ) } { ... etc} >
{ }
</ RainbowKitProvider >
) ;
Establece el color de acento a un valor morado personalizado
Establezca el color de acento en el preset verde incorporado.
import { RainbowKitProvider , darkTheme } from '@rainbow-me/rainbowkit' ;
const App = ( ) => {
return (
< RainbowKitProvider theme = { darkTheme ( {
accentColor: '#7b3fe4' ,
accentColorForeground: 'white' ,
} ) } { ... etc} >
{ }
</ RainbowKitProvider >
) ;
} ;
Establezca el color de acento en el preset verde incorporado.
import { RainbowKitProvider , darkTheme } from '@rainbow-me/rainbowkit' ;
const App = ( ) => {
return (
< RainbowKitProvider theme = { darkTheme ( {
... darkTheme. accentColors . green ,
} ) } { ... etc} >
{ }
</ RainbowKitProvider >
) ;
} ;
Establezca el radio del borde en medio.
Establezca el radio del borde en ninguno.
import { RainbowKitProvider , darkTheme } from '@rainbow-me/rainbowkit' ;
const App = ( ) => {
return (
< RainbowKitProvider theme = { darkTheme ( {
borderRadius: 'medium' ,
} ) } { ... etc} >
{ }
</ RainbowKitProvider >
) ;
} ;
Establezca el radio del borde en ninguno.
import { RainbowKitProvider , darkTheme } from '@rainbow-me/rainbowkit' ;
const App = ( ) => {
return (
< RainbowKitProvider theme = { darkTheme ( {
borderRadius: 'none' ,
} ) } { ... etc} >
{ }
</ RainbowKitProvider >
) ;
} ;
Recordatorio: los valores de radio de borde disponibles son: large (predeterminado), medium, small y none.
Por defecto, la fontStack está configurada a rounded. Pero aquí está cómo puedes usar la configuración fontStack.
Establece la pila de fuentes en system.
import { RainbowKitProvider , darkTheme } from '@rainbow-me/rainbowkit' ;
const App = ( ) => {
return (
< RainbowKitProvider theme = { darkTheme ( {
fontStack: 'system' ,
} ) } { ... etc} >
{ }
</ RainbowKitProvider >
) ;
} ;
Por defecto, el overlayBlur está configurado a none. Pero aquí está cómo puedes usar la configuración overlayBlur.
Establece el desenfoque de superposición a small.
import { RainbowKitProvider , darkTheme } from '@rainbow-me/rainbowkit' ;
const App = ( ) => {
return (
< RainbowKitProvider theme = { darkTheme ( {
overlayBlur: 'small' ,
} ) } { ... etc} >
{ }
</ RainbowKitProvider >
) ;
} ;
Aquí hay algunas distintas formas en las que puedes utilizar diferentes temas, con las props accentColor, borderRadius y fontStack juntas.
Utilice el tema lightTheme
Establezca el color de acento en un valor personalizado de púrpura.
Establezca el radio del borde en medio
Establezca el radio del borde en medio.
import { RainbowKitProvider , lightTheme } from '@rainbow-me/rainbowkit' ;
const App = ( ) => {
return (
< RainbowKitProvider theme = { lightTheme ( {
accentColor: '#7b3fe4' ,
accentColorForeground: 'white' ,
borderRadius: 'medium' ,
fontStack: 'system' ,
} ) } { ... etc} >
{ }
</ RainbowKitProvider >
) ;
} ;
Utilice el tema midnightTheme
Establece el color de acento al preset incorporado pink.
Establece el radio del borde a small
Establece la pila de fuentes en system
import {
RainbowKitProvider ,
midnightTheme,
} from '@rainbow-me/rainbowkit' ;
const App = ( ) => {
return (
< RainbowKitProvider theme = { midnightTheme ( {
... midnightTheme. accentColors . pink ,
borderRadius: 'small' ,
fontStack: 'system' ,
} ) } { ... etc} >
{ }
</ RainbowKitProvider >
) ;
} ;
Si su aplicación utiliza la consulta de medios estándar prefers-color-scheme: dark para cambiar entre los modos de luz y oscuridad, puede proporcionar opcionalmente un objeto de tema dinámico que contenga los valores lightMode y darkMode.
import {
RainbowKitProvider ,
lightTheme,
darkTheme,
} from '@rainbow-me/rainbowkit' ;
const App = ( ) => (
< RainbowKitProvider theme = { {
lightMode: lightTheme ( ) ,
darkMode: darkTheme ( ) ,
} } { ... etc} >
{ }
</ RainbowKitProvider >
) ;
