Tema

Menggunakan dan menyesuaikan tema

Anda dapat menyesuaikan UI RainbowKit agar sesuai dengan merek Anda. Anda dapat memilih dari beberapa warna aksen yang telah ditentukan dan konfigurasi radius batas.

Ada 3 fungsi tema bawaan:

temaCerah (default)
temaGelap
temaTengahMalam

Fungsi tema mengembalikan objek tema. Anda dapat meneruskan objek ke properti tema dari RainbowKitProvider.

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

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

Jika Anda mau, Anda dapat memasukkan accentColor, accentColorForeground, borderRadius, fontStack dan overlayBlur untuk menyesuaikannya.

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

Menyesuaikan tema bawaan

Fungsi tema bawaan juga menerima objek opsi, memungkinkan Anda memilih dari beberapa gaya visual yang berbeda.

Prop	Type	Default
`accentColor`	`string`	`"#0E76FD"`
`accentColorForeground`	`string`	`"white"`
`borderRadius`	`enum`	`large`
`fontStack`	`enum`	`rounded`
`overlayBlur`	`enum`	`none`

Misalnya, untuk menyesuaikan tema gelap dengan warna aksen ungu dan skala radius batas sedang:

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        accentColor: '#7b3fe4',
        accentColorForeground: 'white',
        borderRadius: 'medium',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};

Setiap tema juga menyediakan beberapa preset warna aksen (biru, hijau, oranye, merah muda, ungu, merah) yang dapat disebarkan ke dalam objek opsi. Misalnya, untuk menggunakan preset warna aksen merah muda:

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        ...darkTheme.accentColors.pink,
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};

Contoh

Fungsi tema

Berikut adalah beberapa cara berbeda Anda dapat menggunakan properti tema.

Gunakan tema temaGelap.

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

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

Gunakan tema temaTengahMalam.

import {
  RainbowKitProvider,
  midnightTheme,
} from '@rainbow-me/rainbowkit';

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

Warna aksen

Berikut adalah beberapa cara berbeda Anda dapat menggunakan konfigurasi warnaAksen.

Tetapkan warna aksen ke nilai ungu kustom.

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

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

Tetapkan warna aksen ke preset hijau bawaan.

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        ...darkTheme.accentColors.green,
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};

Radius batas

Berikut adalah beberapa cara berbeda Anda dapat menggunakan konfigurasi radiusBatas.

Tetapkan radius batas menjadi sedang.

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        borderRadius: 'medium',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};

Tetapkan radius batas menjadi tidak ada.

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        borderRadius: 'none',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};

Pengingat: nilai radius batas yang tersedia adalah: besar (default), sedang, kecil dan tidak ada.

Tumpukan font

Secara default, fontStack diatur ke bulat. Tetapi inilah cara Anda dapat menggunakan konfigurasi fontStack.

Tetapkan tumpukan font ke sistem.

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        fontStack: 'system',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};

Keburaman overlay

Secara default, overlayBlur diatur ke tidak ada. Tetapi inilah cara Anda dapat menggunakan konfigurasi overlayBlur.

Tetapkan keburaman overlay ke kecil.

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        overlayBlur: 'small',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};

Kombinasi dan pencocokan

Berikut adalah beberapa cara berbeda Anda dapat menggunakan tema yang berbeda, dengan properti warnaAksen, radiusBatas dan fontStack bersama-sama.

Gunakan tema temaCerah
Tetapkan warna aksen menjadi nilai ungu kustom
Tetapkan radius batas menjadi sedang
Tetapkan tumpukan font ke sistem

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

Gunakan tema temaTengahMalam
Tetapkan warna aksen ke preset merah muda bawaan.
Tetapkan radius batas menjadi kecil
Tetapkan tumpukan font ke sistem

import {
  RainbowKitProvider,
  midnightTheme,
} from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={midnightTheme({
        ...midnightTheme.accentColors.pink,
        borderRadius: 'small',
        fontStack: 'system',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};

Dukungan mode gelap

Jika aplikasi Anda menggunakan kueri media standar prefers-color-scheme: dark untuk beralih antara mode terang dan gelap, Anda dapat menyediakan objek tema dinamis yang berisi nilai modeTerang dan modeGelap secara opsional.

import {
  RainbowKitProvider,
  lightTheme,
  darkTheme,
} from '@rainbow-me/rainbowkit';

const App = () => (
  <RainbowKitProvider
    theme={{
      lightMode: lightTheme(),
      darkMode: darkTheme(),
    }}
    {...etc}
  >
    {/* Your App */}
  </RainbowKitProvider>
);

Ikhtisar

Memulai

Lanjutan