Rainbow logo
RainbowKit
2.2.8

थीमिंग

थीमिंग

थीम्स का उपयोग करना और कस्टमाइज़ करना

आप रेनबोकिट UI को अपने ब्रांडिंग के अनुसार समायोजित कर सकते हैं। आप कुछ पूर्व-परिभाषित एक्सेंट रंगों और बॉर्डर रेडियस कॉन्फ़िगरेशन में से चुन सकते हैं।

3 बिल्ट-इन थीम फ़ंक्शन हैं:

  • lightTheme   (डिफॉल्ट)
  • darkTheme
  • midnightTheme

एक थीम फ़ंक्शन एक थीम ऑब्जेक्ट को लौटाता है। आप ऑब्जेक्ट को RainbowKitProvider के theme प्रॉप में पास कर सकते हैं।

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
export const App = () => (
<RainbowKitProvider theme={darkTheme()} {...etc}>
{/* Your App */}
</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} >
{/* Your App */}
</RainbowKitProvider>
);

बिल्ट-इन थीम फ़ंक्शंस भी एक विकल्प ऑब्जेक्ट को स्वीकार करते हैं, जिससे आप कई अलग-अलग दृश्य शैलियों में से चुन सकते हैं।

PropTypeDefault
accentColorstring "#0E76FD"
accentColorForegroundstring "white"
borderRadiusenum large
fontStackenum rounded
overlayBlurenum none

उदाहरण के लिए, डार्क थीम को एक बैंगनी एक्सेंट रंग और 'मध्यम' सीमा त्रिज्या स्केल के साथ अनुकूलित करने के लिए:

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
const App = () => {
return (
<RainbowKitProvider theme={darkTheme({ accentColor: '#7b3fe4', accentColorForeground: 'white', borderRadius: 'medium', })} {...etc} >
{/* Your App */}
</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} >
{/* Your App */}
</RainbowKitProvider>
);
};

यहाँ theme प्रॉप का उपयोग करने के कुछ अलग-अलग तरीके हैं।

darkTheme थीम का उपयोग करें।

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
export const App = () => (
<RainbowKitProvider theme={darkTheme()} {...etc}>
{/* Your App */}
</RainbowKitProvider>
);

midnightTheme थीम का उपयोग करें।

import { RainbowKitProvider, midnightTheme, } from '@rainbow-me/rainbowkit';
export const App = () => (
<RainbowKitProvider theme={midnightTheme()} {...etc}>
{/* Your App */}
</RainbowKitProvider>
);

यहाँ accentColor config का उपयोग करने के कुछ अलग-अलग तरीके हैं।

एक्सेंट रंग को कस्टम पर्पल वैल्यू पर सेट करें।

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
const App = () => {
return (
<RainbowKitProvider theme={darkTheme({ accentColor: '#7b3fe4', accentColorForeground: 'white', })} {...etc} >
{/* Your App */}
</RainbowKitProvider>
);
};

एक्सेंट रंग को बिल्ट-इन green preset पर सेट करें।

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
const App = () => {
return (
<RainbowKitProvider theme={darkTheme({ ...darkTheme.accentColors.green, })} {...etc} >
{/* Your App */}
</RainbowKitProvider>
);
};

यहाँ borderRadius config का उपयोग करने के कुछ अलग-अलग तरीके हैं।

बॉर्डर रेडियस को medium पर सेट करें।

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
const App = () => {
return (
<RainbowKitProvider theme={darkTheme({ borderRadius: 'medium', })} {...etc} >
{/* Your App */}
</RainbowKitProvider>
);
};

बॉर्डर रेडियस को none पर सेट करें।

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
const App = () => {
return (
<RainbowKitProvider theme={darkTheme({ borderRadius: 'none', })} {...etc} >
{/* Your App */}
</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} >
{/* Your App */}
</RainbowKitProvider>
);
};

डिफ़ॉल्ट रूप से, overlayBlur को none पर सेट किया गया है। लेकिन यहाँ बताया गया है कि आप overlayBlur कॉन्फ़िग को कैसे उपयोग कर सकते हैं।

ओवरले ब्लर को small पर सेट करें।

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
const App = () => {
return (
<RainbowKitProvider theme={darkTheme({ overlayBlur: 'small', })} {...etc} >
{/* Your App */}
</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} >
{/* Your App */}
</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} >
{/* Your App */}
</RainbowKitProvider>
);
};

अगर आपका ऐप स्टैंडर्ड prefers-color-scheme: dark मीडिया क्वेरी का उपयोग करता है तो स्वॉप करने के लिए लाइट और डार्क मोड्स, आप वैकल्पिक रूप से एक डायनामिक थीम ऑब्जेक्ट प्रदान कर सकते हैं जिसमें lightMode और darkMode मूल्य होते हैं।

import { RainbowKitProvider, lightTheme, darkTheme, } from '@rainbow-me/rainbowkit';
const App = () => (
<RainbowKitProvider theme={{ lightMode: lightTheme(), darkMode: darkTheme(), }} {...etc} >
{/* Your App */}
</RainbowKitProvider>
);