Özel Tema

Özel bir tema oluşturma

Not: Bu API kararsızdır ve yakın gelecekte değişiklik göstermesi muhtemeldir. Şimdilik yerleşik temalara bağlı kalmanızı öneririz.

Yerleşik temalar bir miktar özelleştirme sağlar, ancak Theme türü, temel tema değişkenlerine daha alt düzeyde erişimle kendi özel temalarınızı tanımlamanıza yardımcı olmak için sağlanmıştır.

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

Yerleşik bir temayı genişletme

Tüm temayı yeniden tanımlamak zorunda kalmadan yerleşik bir temayı genişletebilirsiniz. Bu, yalnızca belirli tema jetonlarını geçersiz kılmak istediğinizde kullanışlıdır.

Bunu yapmak için lodash.merge (veya eşdeğerini) yükleyin:

npm install lodash.merge

Uzantılısı olarak, genişletmek istediğiniz temayı (örneğin: darkTheme) ve TypeScript Theme türünü yükleyin:

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

Daha sonra, yerleşik temayı, geçersiz kılmak istediğiniz tema jetonları ile birleştirin. Bu örnekte, markamın vurgu rengine uydurmak için accentColor jetonunu geçersiz kılıyorum.

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

Son olarak, özel temanızı RainbowKitProvider'ın theme özelliğine geçebilirsiniz.

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

Özel tema seçicileri oluşturma

Eğer uygulamanız sunucu/statik olarak render ediliyorsa ve kullanıcıların temalar arasında manuel olarak geçiş yapmasına izin veriyorsa, RainbowKit'in temalama sistemi, herhangi bir CSS-in-JS sistemiyle kullanılabilecek aşağıdaki işlevlerle özel CSS seçicilerine bağlanabilir:

cssStringFromTheme
cssObjectFromTheme

Bu işlevler, tüm gerekli tema değişkenlerini ayarlayan CSS'i döndürür. Hem dize hem de nesne desteklendiği için, bu herhangi bir CSS-in-JS sistemi ile entegre edilebilir.

Temel bir örnek olarak, her tema için özel seçicilerle kendi style öğenizi render edebilirsiniz. Temanın CSS'sinin render edilmesini kontrol ettiğimiz için, RainbowKitProvider'ın bizim için herhangi bir stil render etmemesi amacıyla theme özelliğine null geçiyoruz. Ayrıca, base tema ile aynı olan herhangi bir tema değişkenini dışarıda bırakan cssStringFromTheme işlevinde extends seçeneğinin kullanımına dikkat edin.

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

Genel Bakış

Başlarken

Gelişmiş

Özel Tema

Özel bir tema oluşturma

Yerleşik bir temayı genişletme

Özel tema seçicileri oluşturma