Temalandırma

Temaları kullanma ve özelleştirme

RainbowKit UI'ı markanızla uyumlu hale getirebilirsiniz. Önceden tanımlanmış birkaç vurgu rengi ve kenar yarıçapı yapılandırmasından seçim yapabilirsiniz.

3 yerleşik tema işlevi vardır:

lightTheme (varsayılan)
darkTheme
midnightTheme

Bir tema işlevi bir tema nesnesi döndürür. Nesneyi RainbowKitProvider'ın theme prop'una 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 ayarlarını özelleştirebilirsiniz.

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ın özelleştirilmesi

Yerleşik tema işlevleri ayrıca bir seçenekler nesnesi kabul eder ve birkaç farklı görsel stil seçmenize olanak tanır.

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

Örneğin, koyu temayı mor vurgu rengi ve orta 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 aynı zamanda birkaç vurgu rengi ön ayarı (mavi, yeşil, turuncu, pembe, mor, kırmızı) sağlar ve bu ayarları seçenekler nesnesine yayabilirsiniz. Örneğin, pembe vurgu 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 işlevi

İşte theme prop'unu kullanabileceğiniz birkaç farklı yol.

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

İşte accentColor ayarını kullanabileceğiniz birkaç farklı yol.

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 yerleşik yeşil ö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 ayarını kullanabileceğiniz birkaç farklı yol burada.

Kenar yarıçapını orta 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ı yok 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: büyük (varsayılan), orta, küçük ve yok.

Font kümesi

Varsayılan olarak, fontStack yuvarlak olarak ayarlanmış durumda. Ancak fontStack ayarını nasıl kullanabileceğiniz burada.

Font kümesini sistem olarak ayarlayın.

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

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

Arka plan bulanıklığı

Varsayılan olarak, overlayBlur yok olarak ayarlanmış durumda. Ancak overlayBlur ayarını nasıl kullanabileceğiniz burada.

Arka plan bulanıklığını küçük 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

Farklı temaları accentColor, borderRadius ve fontStack özellikleriyle birlikte nasıl kullanabileceğiniz bazı yollar burada.

lightTheme temasını kullanın
Vurgu rengini özel bir mor değere ayarlayın
Kenar yarıçapını orta olarak ayarlayın
Font kümesini sistem 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 pembe ön ayarına ayarlayın.
Kenar yarıçapını küçük olarak ayarlayın
Font kümesini sistem 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>
  );
};

Koyu mod desteği

Uygulamanız, açık ve koyu modlar arasında geçiş yapmak için standart prefers-color-scheme: dark medya sorgusunu kullanıyorsa, lightMode ve darkMode değerlerini içeren dinamik bir tema nesnesi sağlamayı tercih edebilirsiniz.

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ş