التخصيص

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

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

هناك 3 وظائف مضمنة للسمة:

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) التي يمكن نشرها في كائن الخيارات. على سبيل المثال، لاستخدام اللون الوردي كلون مميز:

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

نظرة عامة

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

متقدم