Tema Oluşturma

Temaları kullanma ve özelleştirme

RainbowKit UI'yi markanıza uyacak şekilde ayarlayabilirsiniz. Birkaç önceden tanımlanmış vurgu rengi ve kenar yarıçapı konfigürasyonlarından seçim yapabilirsiniz.

3 yerleşik tema fonksiyonu bulunmaktadır:

lightTheme (varsayılan)
darkTheme
midnightTheme

Bir tema fonksiyonu bir tema nesnesi döndürür. Nesneyi RainbowKitProvider'ın theme özelliğine geçirebilirsiniz.

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

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

İsterseniz, accentColor, accentColorForeground, borderRadius, fontStack ve overlayBlur'u özelleştirebilmek için içlerine geçirebilirsiniz.

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

Yerleşik temaları özelleştirme

Dahili tema fonksiyonları ayrıca bir seçenekler nesnesini kabul eder, size birkaç farklı görsel stilden seçme imkanı sunar.

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

Örneğin, koyu temayı mor bir aksan rengi ve orta bir kenar yarıçapı ölçeği ile özelleştirmek için:

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

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

Her tema ayrıca (mavi, yeşil, turuncu, pembe, mor, kırmızı) olmak üzere birçok aksan rengi ön ayarını seçenekler nesnesine yayabilir. Örneğin, pembe aksan rengi ön ayarını kullanmak için:

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

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

Örnekler

Tema fonksiyonu

theme prop'unun farklı yollarını kullanabilirsiniz.

darkTheme temasını kullanın.

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

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

midnightTheme temasını kullanın.

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

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

Vurgu rengi

accentColor config'ını çeşitli yollarla kullanabilirsiniz.

Vurgu rengini özel bir mor değere ayarlayın.

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

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

Vurgu rengini dahili green ön ayarına ayarlayın.

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

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

Kenar yarıçapı

borderRadius config'ini farklı şekillerde kullanabilirsiniz.

Kenar yarıçapını medium olarak ayarlayın.

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

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

Kenar yarıçapını none olarak ayarlayın.

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

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

Hatırlatma: mevcut kenar yarıçapı değerleri: large (varsayılan), medium, small ve none.

Yazı tipi yığını

Varsayılan olarak, fontStack rounded olarak ayarlanmıştır. Ama işte fontStack konfigürasyonunu nasıl kullanabileceğiniz.

Font yığınını system olarak ayarlayın.

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

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

Üst örtü bulanıklığı

Varsayılan olarak, overlayBlur none olarak ayarlanmıştır. Ama işte overlayBlur konfigürasyonunu nasıl kullanabileceğiniz.

Üst örtü bulanıklığını small olarak ayarlayın.

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

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

Karıştır ve eşleştir

accentColor, borderRadius ve fontStack propsları ile farklı temaları nasıl kullanabileceğinizin birkaç farklı yolu.

lightTheme temasını kullanın
Vurgu rengini özel mor değeri olarak ayarlayın
Kenar yarıçapını medium olarak ayarlayın
Yazı tipi yığınını system olarak ayarlayın

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 temasını kullanın
Vurgu rengini yerleşik pink ön ayara ayarlayın.
Kenar yuvarlaklığını small olarak ayarlayın
Yazı tipi yığınını system olarak ayarlayın

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

const App = () => {
  return (
    <RainbowKitProvider
      theme={midnightTheme({
        ...midnightTheme.accentColors.pink,
        borderRadius: 'small',
        fontStack: 'system',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};

Karanlık mod desteği

Uygulamanız ışık ve karanlık modlar arasında geçiş yapmak için standart prefers-color-scheme: dark medya sorgusunu kullanıyorsa, seçeneğe bağlı olarak lightMode ve darkMode değerlerini içeren dinamik bir tema nesnesi sağlayabilirsiniz.

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

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

Genel Bakış

Başlarken

Gelişmiş