ธีม

การใช้และปรับแต่งธีม

คุณสามารถปรับ UI ของ RainbowKit ให้ตรงกับแบรนด์ของคุณ. คุณสามารถเลือกสีเน้นและการตั้งค่ารัศมีขอบจากที่กำหนดไว้ล่วงหน้า.

มีฟังก์ชันธีมในตัว 3 ฟังก์ชัน:

lightTheme (ค่าเริ่มต้น)
darkTheme
midnightTheme

ฟังก์ชันธีมจะส่งคืนวัตถุธีม. คุณสามารถส่งวัตถุไปยัง RainbowKitProvider's theme prop.

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

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

ถ้าคุณต้องการ, คุณสามารถส่ง accentColor, accentColorForeground, borderRadius, fontStack และ overlayBlur เพื่อปรับแต่ง.

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

การปรับแต่งธีมที่สร้างไว้แล้ว

ฟังก์ชันธีมที่มีอยู่ภายในยังยอมรับอ็อบเจ็กต์ตัวเลือก, ทำให้คุณสามารถเลือกจากหลายสไตล์ทางตาซึ่งแตกต่างกันได้

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

ตัวอย่างเช่น การปรับแต่งธีมสีเข้มด้วยสีแอคเซนท์สีม่วงและสเกลรัศมีขอบ medium:

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

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

แต่ละธีมยังให้คำประกอบสีเฉพาะ (blue, green, orange, pink, purple, red) ที่สามารถแพร่ไปในวัตถุตัวเลือก ตัวอย่างเช่น การใช้คำประกอบสี pink: ตัวอย่างเช่น การใช้คำประกอบสี pink: ตัวอย่างเช่น การใช้คำประกอบสี pink: ตัวอย่างเช่น การใช้คำประกอบสี pink: ตัวอย่างเช่น การใช้คำประกอบสี pink: ตัวอย่างเช่น การใช้คำประกอบสี pink: ตัวอย่างเช่น การใช้คำประกอบสี pink: ตัวอย่างเช่น การใช้คำประกอบสี pink: ตัวอย่างเช่น การใช้คำประกอบสี pink: ตัวอย่างเช่น การใช้คำประกอบสี pink:

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

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

ตัวอย่าง

ฟังก์ชั่นของธีม

นี่คือบางวิธีที่คุณสามารถใช้ prop theme

ใช้ธีม darkTheme

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

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

ใช้ธีม midnightTheme

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

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

สีเน้น

นี่คือวิธีการที่แตกต่างกันสองสามวิธีที่คุณสามารถใช้ accentColor config.

ตั้งค่าสีเน้นเป็นค่าสีม่วงที่กำหนดเอง.

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

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

ตั้งค่าสีเน้นเป็น green ที่ตั้งค่าไว้แล้ว.

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

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

รัศมีขอบ

นี่คือวิธีการที่แตกต่างกันสองสามวิธีที่คุณสามารถใช้ borderRadius config.

ตั้งค่ารัศมีขอบเป็น medium.

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

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

ตั้งค่ารัศมีขอบเป็น none.

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

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

เตือนความทรงจำ: ค่ารัศมีขอบที่มีให้คือ: large (ค่าเริ่มต้น), medium, small และ none.

ฟอนต์สแต็ก

โดยค่าเริ่มต้น, fontStack ถูกตั้งเป็น rounded. แต่นี่คือวิธีที่คุณสามารถใช้การตั้งค่า fontStack.

ตั้งค่า stack ของฟอนต์เป็น system.

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

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

เบลอซ้อนทับ

โดยค่าเริ่มต้น, overlayBlur ถูกตั้งเป็น none. แต่นี่คือวิธีที่คุณสามารถใช้การตั้งค่า overlayBlur.

ตั้งค่าเบลอโอเวอเลย์เป็น small.

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

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

ผสมและจับคู่

นี่คือวิธีที่แตกต่างๆที่คุณสามารถใช้ธีมต่างๆ, กับ accentColor, borderRadius และ fontStack props ร่วมกัน.

ใช้ธีม lightTheme
ตั้งค่าสีเน้นบนค่าสีม่วงที่กำหนดเอง
ตั้งค่ารัศมีขอบเป็น medium
ตั้งค่า stack ของฟอนต์เป็น 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>
  );
};

ใช้ธีม midnightTheme
ตั้งค่าสีเน้นเป็นพรีเซ็ต pink ที่สร้างไว้ล่วงหน้า
ตั้งค่ารัศมีขอบเป็น small
ตั้งค่า stack ของฟอนต์เป็น 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>
  );
};

สนับสนุนโหมดมืด

หากแอพของคุณใช้คิวรีมีเดีย prefers-color-scheme: dark มาตรฐานในการสลับระหว่างโหมดสว่างและมืด คุณสามารถให้ theme object ที่มีค่า lightMode และ darkMode ในการใช้งานเพิ่มเติม

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

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

ภาพรวม

เริ่มต้นใช้งาน

ขั้นสูง

ธีม