कस्टम थीम

एक कस्टम थीम बनाना

ध्यान दें: यह API अस्थिर है और निकट भविष्य में बदल सकता है। हम अभी के लिए बिल्ट-इन थीम्स के साथ रहना सुझाव देते हैं।

हालांकि बिल्ट-इन थीम्स कुछ स्तर की कस्टमाइजेशन की सुविधा प्रदान करती हैं, Theme प्रकार आपके अपने कस्टम थीम्स को परिभाषित करने में मदद करता है, जिससे आप परोक्ष थीम वेरिएबल्स तक निम्न-स्तरीय पहुँच प्राप्त कर सकते हैं।

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

एक बिल्ट-इन थीम का विस्तार करना

आप बिल्ट-इन थीम का पूरा परिभाषण किए बिना इसे विस्तारित कर सकते हैं। यह तब उपयोगी होता है जब आप केवल विशेष थीम टोकन को ओवरराइड करना चाहते हैं।

इसके लिए, lodash.merge (या इसके समकक्ष) इंस्टॉल करें:

npm install lodash.merge

इसे इम्पोर्ट करें, साथ ही उस थीम को जिसे आप विस्तारित करना चाहते हैं (उदा: darkTheme) और TypeScript के Theme प्रकार को।

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

फिर, बिल्ट-इन थीम को उन थीम टोकन के साथ मर्ज करें जिन्हें आप ओवरराइड करना चाहते हैं। इस उदाहरण में, मैं अपने ब्रांड के एक्सेंट रंग से मिलाने के लिए accentColor टोकन को ओवरराइड कर रहा हूँ।

const myTheme = merge(darkTheme(), {
  colors: {
    accentColor: '#07296d',
  },
} as Theme);

अंत में, आप अब अपने कस्टम थीम को RainbowKitProvider के theme प्रॉप के लिए भेज सकते हैं।

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

कस्टम थीम चयनकर्ता बनाना

यदि आपका ऐप सर्वर/स्थैतिक रेंडर है और उपयोगकर्ताओं को विषयों के बीच मैन्युअली टॉगल करने की अनुमति देता है, तो RainbowKit की थीमिंग प्रणाली कस्टम CSS चयनकर्ताओं के लिए निम्नलिखित कार्यों के साथ जोड़ी जा सकती है, जिन्हें किसी भी CSS-in-JS प्रणाली के साथ उपयोग में लाया जा सकता है:

cssStringFromTheme
cssObjectFromTheme

ये फंक्शंस सभी आवश्यक थीम वेरिएबल्स को सेट करने वाला CSS लौटाते हैं। चूंकि दोनों स्ट्रिंग्स और ऑब्जेक्ट्स समर्थित हैं, इसे किसी भी CSS-in-JS प्रणाली के साथ एकीकृत किया जा सकता है।

एक बुनियादी उदाहरण के रूप में, आप प्रत्येक थीम के लिए कस्टम चयनकर्ताओं के साथ अपने style तत्व को रेंडर कर सकते हैं। चूंकि हम थीम के CSS को रेंडर करने का नियंत्रण ले रहे हैं, हम theme प्रॉप के लिए null पास कर रहे हैं ताकि RainbowKitProvider हमारे लिए कोई शैली नहीं बनाये। cssStringFromTheme फंक्शन पर विस्तार विकल्प का उपयोग करने का भी ध्यान दें जो बेस थीम के समान किसी भी थीम वेरिएबल्स को छोड़ देता है।

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

अवलोकन

आरंभ कैसे करें

उन्नत

कस्टम थीम

एक कस्टम थीम बनाना

एक बिल्ट-इन थीम का विस्तार करना

कस्टम थीम चयनकर्ता बनाना