थीमिंग
थीमिंग
थीम्स का उपयोग करना और उन्हें अनुकूलित करना
आप अपने ब्रांडिंग के साथ मिलान करने के लिए RainbowKit UI को समायोजित कर सकते हैं। आप कुछ पहले से निर्धारित एक्सेंट रंगों और सीमा त्रिज्या कॉन्फ़िगरेशन में से चुन सकते हैं।
तीन बिल्ट-इन थीम फंक्शन्स हैं:
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 accentColorInformation string "#0E76FD"accentColorForegroundInformation string "white"borderRadiusInformation enum Information largefontStackInformation enum Information roundedoverlayBlurInformation enum Information none
उदाहरण के लिए, गहरे विषय को एक बैंगनी एक्सेंट रंग और एक मध्यम सीमा त्रिज्या पैमाना के साथ अनुकूलित करने के लिए:
import { RainbowKitProvider , darkTheme } from '@rainbow-me/rainbowkit' ;
const App = ( ) => {
return (
< RainbowKitProvider
theme = { darkTheme ( {
accentColor: '#7b3fe4' ,
accentColorForeground: 'white' ,
borderRadius: 'medium' ,
} ) }
{ ... etc}
>
{ }
</ RainbowKitProvider >
) ;
} ;
हर थीम कई एक्सेंट रंग प्रीसेट्स (नीला, हरा, नारंगी, गुलाबी, बैंगनी, लाल) भी प्रदान करती है, जिन्हें विकल्प ऑब्जेक्ट में शामिल किया जा सकता है। उदाहरण के लिए, गुलाबी एक्सेंट रंग प्रीसेट का उपयोग करने के लिए:
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 कॉन्फ़िग का उपयोग कर सकते हैं।
एक्सेंट रंग को एक कस्टम बैंगनी मूल्य पर सेट करें।
import { RainbowKitProvider , darkTheme } from '@rainbow-me/rainbowkit' ;
const App = ( ) => {
return (
< RainbowKitProvider
theme = { darkTheme ( {
accentColor: '#7b3fe4' ,
accentColorForeground: 'white' ,
} ) }
{ ... etc}
>
{ }
</ RainbowKitProvider >
) ;
} ;
एक्सेंट रंग को बिल्ट-इन हरा प्रीसेट पर सेट करें।
import { RainbowKitProvider , darkTheme } from '@rainbow-me/rainbowkit' ;
const App = ( ) => {
return (
< RainbowKitProvider
theme = { darkTheme ( {
... darkTheme. accentColors . green ,
} ) }
{ ... etc}
>
{ }
</ RainbowKitProvider >
) ;
} ;
यहाँ कुछ अलग-अलग तरीके हैं जिनसे आप borderRadius कॉन्फिग का उपयोग कर सकते हैं।
बॉर्डर रेडियस को मध्यम पर सेट करें।
import { RainbowKitProvider , darkTheme } from '@rainbow-me/rainbowkit' ;
const App = ( ) => {
return (
< RainbowKitProvider
theme = { darkTheme ( {
borderRadius: 'medium' ,
} ) }
{ ... etc}
>
{ }
</ RainbowKitProvider >
) ;
} ;
बॉर्डर रेडियस को कोई नहीं पर सेट करें।
import { RainbowKitProvider , darkTheme } from '@rainbow-me/rainbowkit' ;
const App = ( ) => {
return (
< RainbowKitProvider
theme = { darkTheme ( {
borderRadius: 'none' ,
} ) }
{ ... etc}
>
{ }
</ RainbowKitProvider >
) ;
} ;
अनुस्मारक: उपलब्ध बॉर्डर रेडियस मान हैं: बड़ा (डिफ़ॉल्ट), मध्यम, छोटा और कोई नहीं।
डिफ़ॉल्ट रूप से, fontStack को rounded पर सेट किया गया है। लेकिन यहाँ आप fontStack कॉन्फिग का उपयोग कैसे कर सकते हैं।
फॉन्ट स्टैक को सिस्टम पर सेट करें।
import { RainbowKitProvider , darkTheme } from '@rainbow-me/rainbowkit' ;
const App = ( ) => {
return (
< RainbowKitProvider
theme = { darkTheme ( {
fontStack: 'system' ,
} ) }
{ ... etc}
>
{ }
</ RainbowKitProvider >
) ;
} ;
डिफ़ॉल्ट रूप से, overlayBlur को कोई नहीं पर सेट किया गया है। लेकिन यहाँ आप overlayBlur कॉन्फिग का उपयोग कैसे कर सकते हैं।
ओवरले ब्लर को छोटा पर सेट करें।
import { RainbowKitProvider , darkTheme } from '@rainbow-me/rainbowkit' ;
const App = ( ) => {
return (
< RainbowKitProvider
theme = { darkTheme ( {
overlayBlur: 'small' ,
} ) }
{ ... etc}
>
{ }
</ RainbowKitProvider >
) ;
} ;
यहाँ कुछ अलग-अलग तरीके हैं जिनसे आप विभिन्न थीम्स, साथ ही accentColor, borderRadius और fontStack प्रॉप्स का उपयोग कर सकते हैं।
lightTheme थीम का उपयोग करें।
एक्सेंट रंग को एक कस्टम बैंगनी मूल्य पर सेट करें।
बॉर्डर रेडियस को मध्यम पर सेट करें।
फॉन्ट स्टैक को सिस्टम पर सेट करें।
import { RainbowKitProvider , lightTheme } from '@rainbow-me/rainbowkit' ;
const App = ( ) => {
return (
< RainbowKitProvider
theme = { lightTheme ( {
accentColor: '#7b3fe4' ,
accentColorForeground: 'white' ,
borderRadius: 'medium' ,
fontStack: 'system' ,
} ) }
{ ... etc}
>
{ }
</ RainbowKitProvider >
) ;
} ;
midnightTheme थीम का उपयोग करें।
एक्सेंट रंग को बिल्ट-इन गुलाबी प्रीसेट पर सेट करें।
बॉर्डर रेडियस को छोटा पर सेट करें।
फॉन्ट स्टैक को सिस्टम पर सेट करें।
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 >
) ;