Pewarnaan Tema

Menggunakan dan menyesuaikan tema

Anda dapat mengubah UI RainbowKit agar sesuai dengan branding Anda. Anda dapat memilih dari beberapa warna aksen yang sudah ditentukan dan konfigurasi radius batas.

Ada 3 fungsi tema bawaan:

lightTheme (standar)
darkTheme
midnightTheme

Fungsi tema mengembalikan objek tema. Anda dapat meneruskan objek tersebut ke prop theme dari RainbowKitProvider.

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

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

Jika Anda inginkan, Anda bisa 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 pilihan, yang memungkinkan Anda untuk 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`

Sebagai contoh, untuk menyesuaikan tema gelap dengan warna aksen ungu dan radius batas medium:

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 (blue, green, orange, pink, purple, red) yang dapat dimasukkan ke dalam objek opsi. Sebagai contoh, untuk menggunakan preset warna aksen pink:

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

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

Contoh

Fungsi Tema

Berikut beberapa cara berbeda yang bisa Anda gunakan pada theme prop.

Gunakan tema darkTheme.

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

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

Gunakan tema midnightTheme.

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

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

Warna Aksen

Berikut beberapa cara berbeda yang bisa Anda gunakan pada konfigurasi accentColor.

Atur warna aksen menjadi nilai ungu kustom.

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

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

Atur warna aksen ke preset green yang dibangun.

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

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

Radius Tepi

Berikut beberapa cara berbeda yang bisa Anda gunakan pada konfigurasi borderRadius.

Atur radius tepi ke medium.

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

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

Atur radius tepi ke none.

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

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

Pengingat: nilai radius tepi yang tersedia adalah: large (default), medium, small dan none.

Tumpukan Font

Secara default, fontStack disetel ke rounded. Namun, berikut adalah cara Anda dapat menggunakan konfigurasi fontStack.

Tetapkan font stack ke system.

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

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

Kabur overlay

Secara default, overlayBlur disetel ke none. Tetapi inilah cara Anda dapat menggunakan konfigurasi overlayBlur.

Tetapkan kabur overlay ke small.

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

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

Campur dan cocokkan

Berikut adalah beberapa cara berbeda yang bisa Anda gunakan dengan tema yang berbeda, dengan accentColor, borderRadius dan properti fontStack bersama-sama.

Gunakan tema lightTheme
Atur warna aksen ke nilai ungu kustom
Atur radius tepi ke medium
Atur tumpukan font ke system

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 midnightTheme
Atur warna aksen ke preset pink bawaan.
Atur radius borda menjadi small
Atur tumpukan font ke system

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 query media prefers-color-scheme: dark standar untuk beralih antara mode cahaya dan gelap, Anda dapat secara opsional menyediakan objek tema dinamis yang berisi nilai lightMode dan darkMode.

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

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

Ikhtisar

Memulai

Lanjutan