अनुकूलित थीम

एक अनुकूलित थीम बनाना

ध्यान दें: यह 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-in-JS सिस्टम के साथ उपयोग करने के लिए निम्नलिखित कार्यों से अनुकूलित CSS चयनकर्ताओं के साथ स्थापित कर सकते हैं:

cssStringFromTheme
cssObjectFromTheme

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

एक बुनियादी उदाहरण के रूप में, आप प्रत्येक थीम के लिए अनुकूलित चयनकर्ताओं के साथ अपने खुद के style तत्व को रेंडर कर सकते हैं। चूंकि हम थीम के CSS को रेंडर करने का नियंत्रण ले रहे हैं, हम फीम प्रॉप को 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>
  );
};

अवलोकन

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

उन्नत

अनुकूलित थीम

एक अनुकूलित थीम बनाना

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

अनुकूलित थीम चयनकर्ताओं का निर्माण करना