Tema Kustom

Membuat tema kustom

Catatan: API ini tidak stabil dan kemungkinan akan berubah di masa depan. Kami merekomendasikan untuk tetap menggunakan tema bawaan untuk sementara.

Sementara tema bawaan menyediakan beberapa tingkat kustomisasi, tipe Theme disediakan untuk membantu Anda mendefinisikan tema kustom sendiri dengan akses tingkat rendah ke variabel tema yang mendasarinya.

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

Memperluas tema bawaan

Anda dapat memperluas tema bawaan tanpa perlu mendefinisikan ulang seluruh tema. Ini berguna ketika Anda hanya ingin menimpa token tema tertentu.

Untuk melakukan itu, instal lodash.merge (atau yang setara):

npm install lodash.merge

Import bersama dengan tema yang ingin Anda perluas (misal: darkTheme) dan tipe Theme TypeScript:

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

Kemudian, gabungkan tema bawaan dengan token tema yang ingin Anda timpa. Dalam contoh ini, saya menimpa token accentColor agar sesuai dengan warna aksen merek saya.

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

Akhirnya, Anda dapat meneruskan tema kustom Anda ke prop theme dari RainbowKitProvider.

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

Membuat pemilih tema kustom

Jika aplikasi Anda di-render di server atau secara statis dan memungkinkan pengguna untuk secara manual beralih antara tema, sistem tema RainbowKit dapat dihubungkan ke pemilih CSS kustom dengan fungsi berikut yang dapat digunakan dengan sistem CSS-in-JS mana pun:

cssStringFromTheme
cssObjectFromTheme

Fungsi-fungsi ini mengembalikan CSS yang mengatur semua variabel tema yang diperlukan. Karena mendukung string dan objek, ini dapat diintegrasikan dengan sistem CSS-in-JS mana pun.

Sebagai contoh dasar, Anda dapat merender elemen style sendiri dengan pemilih kustom untuk setiap tema. Karena kita mengendalikan rendering CSS tema, kita melewatkan null ke prop theme sehingga RainbowKitProvider tidak merender gaya apa pun untuk kita. Juga perhatikan penggunaan opsi extends pada fungsi cssStringFromTheme yang menghilangkan variabel tema apa pun yang sama dengan tema dasar.

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

Ikhtisar

Memulai

Lanjutan

Tema Kustom

Membuat tema kustom

Memperluas tema bawaan

Membuat pemilih tema kustom