थीमिंग
थीमिंग
थीम्स का उपयोग करना और कस्टमाइज़ करना
आप रेनबोकिट UI को अपने ब्रांडिंग के अनुसार समायोजित कर सकते हैं। आप कुछ पूर्व-परिभाषित एक्सेंट रंगों और बॉर्डर रेडियस कॉन्फ़िगरेशन में से चुन सकते हैं।
3 बिल्ट-इन थीम फ़ंक्शन हैं:
lightTheme
(डिफॉल्ट)
darkTheme
midnightTheme
एक थीम फ़ंक्शन एक थीम ऑब्जेक्ट को लौटाता है। आप ऑब्जेक्ट को RainbowKitProvider
के theme
प्रॉप में पास कर सकते हैं।
import { RainbowKitProvider , darkTheme } from '@rainbow-me/rainbowkit' ;
export const App = ( ) => (
< RainbowKitProvider theme = { darkTheme ( ) } { ... etc} >
{ }
</ RainbowKitProvider >
) ;
अगर आप चाहते हैं, तो आप accentColor
, accentColorForeground
, borderRadius
, fontStack
और overlayBlur
को कस्टमाइज़ करने के लिए पास कर सकते हैं।
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 >
) ;
बिल्ट-इन थीम फ़ंक्शंस भी एक विकल्प ऑब्जेक्ट को स्वीकार करते हैं, जिससे आप कई अलग-अलग दृश्य शैलियों में से चुन सकते हैं।
Prop Type Default accentColor
Information string
"#0E76FD"
accentColorForeground
Information string
"white"
borderRadius
Information enum
Information large
fontStack
Information enum
Information rounded
overlayBlur
Information enum
Information none
उदाहरण के लिए, डार्क थीम को एक बैंगनी एक्सेंट रंग और 'मध्यम' सीमा त्रिज्या स्केल के साथ अनुकूलित करने के लिए:
import { RainbowKitProvider , darkTheme } from '@rainbow-me/rainbowkit' ;
const App = ( ) => {
return (
< RainbowKitProvider
theme = { darkTheme ( {
accentColor: '#7b3fe4' ,
accentColorForeground: 'white' ,
borderRadius: 'medium' ,
} ) }
{ ... etc}
>
{ }
</ RainbowKitProvider >
) ;
} ;
प्रत्येक थीम में कई उच्चारण रंग प्रीसेट (blue
, green
, orange
, pink
, purple
, red
) होते हैं जिन्हें विकल्प ऑब्जेक्ट में फैलाया जा सकता है। जैसे कि, pink
उच्चारण रंग प्रीसेट का उपयोग करना:
import { RainbowKitProvider , darkTheme } from '@rainbow-me/rainbowkit' ;
const App = ( ) => {
return (
< RainbowKitProvider
theme = { darkTheme ( {
... darkTheme. accentColors . pink ,
} ) }
{ ... etc}
>
{ }
</ RainbowKitProvider >
) ;
} ;
यहाँ theme
प्रॉप का उपयोग करने के कुछ अलग-अलग तरीके हैं।
darkTheme
थीम का उपयोग करें।
import { RainbowKitProvider , darkTheme } from '@rainbow-me/rainbowkit' ;
export const App = ( ) => (
< RainbowKitProvider theme = { darkTheme ( ) } { ... etc} >
{ }
</ RainbowKitProvider >
) ;
midnightTheme
थीम का उपयोग करें।
import {
RainbowKitProvider ,
midnightTheme,
} from '@rainbow-me/rainbowkit' ;
export const App = ( ) => (
< RainbowKitProvider theme = { midnightTheme ( ) } { ... etc} >
{ }
</ RainbowKitProvider >
) ;
यहाँ accentColor
config का उपयोग करने के कुछ अलग-अलग तरीके हैं।
एक्सेंट रंग को कस्टम पर्पल वैल्यू पर सेट करें।
import { RainbowKitProvider , darkTheme } from '@rainbow-me/rainbowkit' ;
const App = ( ) => {
return (
< RainbowKitProvider
theme = { darkTheme ( {
accentColor: '#7b3fe4' ,
accentColorForeground: 'white' ,
} ) }
{ ... etc}
>
{ }
</ RainbowKitProvider >
) ;
} ;
एक्सेंट रंग को बिल्ट-इन green
preset पर सेट करें।
import { RainbowKitProvider , darkTheme } from '@rainbow-me/rainbowkit' ;
const App = ( ) => {
return (
< RainbowKitProvider
theme = { darkTheme ( {
... darkTheme. accentColors . green ,
} ) }
{ ... etc}
>
{ }
</ RainbowKitProvider >
) ;
} ;
यहाँ borderRadius
config का उपयोग करने के कुछ अलग-अलग तरीके हैं।
बॉर्डर रेडियस को medium
पर सेट करें।
import { RainbowKitProvider , darkTheme } from '@rainbow-me/rainbowkit' ;
const App = ( ) => {
return (
< RainbowKitProvider
theme = { darkTheme ( {
borderRadius: 'medium' ,
} ) }
{ ... etc}
>
{ }
</ RainbowKitProvider >
) ;
} ;
बॉर्डर रेडियस को none
पर सेट करें।
import { RainbowKitProvider , darkTheme } from '@rainbow-me/rainbowkit' ;
const App = ( ) => {
return (
< RainbowKitProvider
theme = { darkTheme ( {
borderRadius: 'none' ,
} ) }
{ ... etc}
>
{ }
</ RainbowKitProvider >
) ;
} ;
अनुस्मारक: उपलब्ध बॉर्डर रेडियस मान हैं: large
(डिफ़ॉल्ट), medium
, small
और none
।
डिफ़ॉल्ट रूप से, fontStack
को rounded
पर सेट किया गया है। लेकिन यहाँ बताया गया है कि आप fontStack
कॉन्फ़िग को कैसे उपयोग कर सकते हैं।
फ़ॉन्ट स्टैक को system
पर सेट करें।
import { RainbowKitProvider , darkTheme } from '@rainbow-me/rainbowkit' ;
const App = ( ) => {
return (
< RainbowKitProvider
theme = { darkTheme ( {
fontStack: 'system' ,
} ) }
{ ... etc}
>
{ }
</ RainbowKitProvider >
) ;
} ;
डिफ़ॉल्ट रूप से, overlayBlur
को none
पर सेट किया गया है। लेकिन यहाँ बताया गया है कि आप overlayBlur
कॉन्फ़िग को कैसे उपयोग कर सकते हैं।
ओवरले ब्लर को small
पर सेट करें।
import { RainbowKitProvider , darkTheme } from '@rainbow-me/rainbowkit' ;
const App = ( ) => {
return (
< RainbowKitProvider
theme = { darkTheme ( {
overlayBlur: 'small' ,
} ) }
{ ... etc}
>
{ }
</ RainbowKitProvider >
) ;
} ;
यहां कुछ अलग-अलग तरीके हैं जिन्हें आप विभिन्न थीम्स का उपयोग कर सकते हैं, accentColor
, borderRadius
और fontStack
props के साथ।
lightTheme
थीम का उपयोग करें
एक्सेंट कलर को कस्टम पर्पल वैल्यू पर सेट करें
बॉर्डर रेडियस को medium
पर सेट करें
फ़ॉन्ट स्टैक को system
पर सेट करें
import { RainbowKitProvider , lightTheme } from '@rainbow-me/rainbowkit' ;
const App = ( ) => {
return (
< RainbowKitProvider
theme = { lightTheme ( {
accentColor: '#7b3fe4' ,
accentColorForeground: 'white' ,
borderRadius: 'medium' ,
fontStack: 'system' ,
} ) }
{ ... etc}
>
{ }
</ RainbowKitProvider >
) ;
} ;
midnightTheme
थीम का उपयोग करें
एक्सेंट कलर को बिल्ट-इन pink
प्रीसेट पर सेट करें।
बॉर्डर रेडियस को small
पर सेट करें
फ़ॉन्ट स्टैक को system
पर सेट करें
import {
RainbowKitProvider ,
midnightTheme,
} from '@rainbow-me/rainbowkit' ;
const App = ( ) => {
return (
< RainbowKitProvider
theme = { midnightTheme ( {
... midnightTheme. accentColors . pink ,
borderRadius: 'small' ,
fontStack: 'system' ,
} ) }
{ ... etc}
>
{ }
</ RainbowKitProvider >
) ;
} ;
अगर आपका ऐप स्टैंडर्ड prefers-color-scheme: dark
मीडिया क्वेरी का उपयोग करता है तो स्वॉप करने के लिए लाइट और डार्क मोड्स, आप वैकल्पिक रूप से एक डायनामिक थीम ऑब्जेक्ट प्रदान कर सकते हैं जिसमें lightMode
और darkMode
मूल्य होते हैं।
import {
RainbowKitProvider ,
lightTheme,
darkTheme,
} from '@rainbow-me/rainbowkit' ;
const App = ( ) => (
< RainbowKitProvider
theme = { {
lightMode: lightTheme ( ) ,
darkMode: darkTheme ( ) ,
} }
{ ... etc}
>
{ }
</ RainbowKitProvider >
) ;