Chủ đề

Sử dụng và tùy chỉnh các chủ đề

Bạn có thể tùy chỉnh giao diện UI của RainbowKit để phù hợp với thương hiệu của mình. Bạn có thể chọn từ một vài màu sắc nhấn định sẵn và cấu hình các bán kính viền.

Có 3 chức năng chủ đề tích hợp sẵn:

lightTheme (mặc định)
darkTheme
midnightTheme

Một hàm chủ đề trả về một đối tượng chủ đề. Bạn có thể truyền đối tượng này vào thuộc tính theme của RainbowKitProvider.

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

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

Nếu muốn, bạn có thể chuyển các giá trị accentColor, accentColorForeground, borderRadius, fontStack và overlayBlur để tùy chỉnh chúng.

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

Tùy chỉnh các chủ đề tích hợp sẵn

Các chức năng chủ đề tích hợp sẵn cũng chấp nhận một đối tượng tùy chọn, cho phép bạn chọn từ nhiều phong cách hình ảnh khác nhau.

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

Ví dụ, để tùy chỉnh chủ đề tối với màu điểm nhấn tím và thang đo medium cho viền bo góc:

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

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

Mỗi chủ đề cũng cung cấp một số thiết lập màu sắc nhấn (blue, green, orange, pink, purple, red) có thể được đưa vào đối tượng tùy chọn. Ví dụ, để sử dụng thiết lập màu sắc nhấn pink:

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

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

Ví dụ

Chức năng chủ đề

Đây là một vài cách khác nhau bạn có thể sử dụng thuộc tính theme.

Sử dụng chủ đề darkTheme.

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

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

Sử dụng chủ đề midnightTheme.

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

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

Màu điểm nhấn

Đây là một vài cách khác nhau bạn có thể sử dụng cấu hình accentColor.

Đặt màu điểm nhấn thành giá trị tím tùy chỉnh.

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

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

Đặt màu điểm nhấn thành cài đặt sẵn green tích hợp.

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

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

Viền bo góc

Đây là một vài cách khác nhau bạn có thể sử dụng cấu hình borderRadius.

Đặt viền bo góc là medium.

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

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

Đặt viền bo góc là none.

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

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

Nhắc nhở: các giá trị viền bo góc có sẵn là: large (mặc định), medium, small và none.

Font stack

Mặc định, fontStack được đặt là rounded. Nhưng đây là cách bạn có thể sử dụng cấu hình fontStack.

Đặt font stack là system.

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

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

Làm mờ lớp phủ

Mặc định, overlayBlur được đặt là none. Nhưng đây là cách bạn có thể sử dụng cấu hình overlayBlur.

Đặt làm mờ lớp phủ là small.

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

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

Kết hợp và phối hợp

Đây là một vài cách khác nhau bạn có thể sử dụng các chủ đề khác nhau, với các cấu hình accentColor, borderRadius và fontStack cùng nhau.

Sử dụng chủ đề lightTheme
Đặt màu điểm nhấn thành giá trị tím tùy chỉnh
Đặt viền bo góc là medium
Đặt font stack là 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>
  );
};

Sử dụng chủ đề midnightTheme
Đặt màu điểm nhấn thành cài đặt sẵn pink tích hợp.
Đặt viền bo góc là small
Đặt font stack là 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>
  );
};

Nếu ứng dụng của bạn sử dụng truy vấn media tiêu chuẩn prefers-color-scheme: dark để chuyển đổi giữa chế độ sáng và tối, bạn có thể tùy chọn cung cấp đối tượng chủ đề động chứa các giá trị lightMode và darkMode.

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

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

Tổng quan

Bắt đầu

Nâng cao