การตกแต่งธีม

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

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

มีฟังก์ชันธีมในตัว 3 รูปแบบ:

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

ฟังก์ชันธีมจะคืนค่าเป็นวัตถุธีม คุณสามารถส่งวัตถุนี้ไปยัง RainbowKitProvider ตำแหน่ง theme ได้

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:

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

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

ตัวอย่าง

ฟังก์ชันธีม

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

ใช้ธีม 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 ได้

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

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 ได้

ตั้งค่ารัศมีขอบเป็น 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

ตั้งค่าสแต็กฟอนต์เป็น 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

ใช้ธีม lightTheme
ตั้งค่าสีเน้นเป็นค่าสีม่วงที่กำหนดเอง
ตั้งค่ารัศมีขอบเป็น medium
ตั้งค่าสแต็กฟอนต์เป็น 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
ตั้งค่าสแต็กฟอนต์เป็น 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 มาตรฐานเพื่อสลับระหว่างโหมดสว่างและโหมดเข้ม คุณสามารถกำหนดวัตถุธีมไดนามิกที่มีค่า lightMode และ darkMode ได้ตามต้องการ

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

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

ภาพรวม

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

ขั้นสูง