التنسيق

استخدام وتخصيص الثيمات

يمكنك تعديل واجهة RainbowKit لتتناسب مع علامتك التجارية. يمكنك اختيار ألوان تمييز وتهيئات نصف القطر للحواف محددة مسبقًا.

توجد ثلاث وظائف ثيم مدمجة:

lightTheme (الافتراضي)
darkTheme
midnightTheme

وظيفة الثيم تعيد كائن الثيم. يمكنك تمرير الكائن إلى خاصية theme في RainbowKitProvider.

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.

استخدام الثيم 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>
);

نظرة عامة

بدء الاستخدام

متقدم