Themening

Verwendung und Anpassung der Themen

Sie können die RainbowKit-Benutzeroberfläche an Ihr Branding anpassen. Sie können aus einigen vordefinierten Akzentfarben und Rahmenradius-Konfigurationen wählen.

Es gibt 3 eingebaute Themenfunktionen:

lightTheme (Standard)
darkTheme
midnightTheme

Eine Themenfunktion gibt ein Themenobjekt zurück. Sie können das Objekt an die theme-Eigenschaft des RainbowKitProvider übergeben.

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

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

Wenn Sie möchten, können Sie accentColor, accentColorForeground, borderRadius, fontStack und overlayBlur übergeben, um sie anzupassen.

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

Anpassung der integrierten Themen

Die integrierten Themenfunktionen akzeptieren auch ein Optionsobjekt, das die Auswahl mehrerer visueller Stile ermöglicht.

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

Um beispielsweise das Dunkel-Thema mit einer violetten Akzentfarbe und einer mittleren Rahmenradius-Skala anzupassen:

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

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

Jedes Thema bietet auch mehrere Akzentfarb-Voreinstellungen (blau, grün, orange, rosa, violett, rot), die in das Optionsobjekt eingefügt werden können. Um beispielsweise die rosa Akzentfarb-Voreinstellung zu verwenden:

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

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

Beispiele

Themenfunktion

Hier sind einige verschiedene Möglichkeiten, wie Sie die theme-Eigenschaft verwenden können.

Verwenden Sie das darkTheme-Thema.

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

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

Verwenden Sie das midnightTheme-Thema.

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

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

Akzentfarbe

Hier sind einige verschiedene Möglichkeiten, wie Sie die accentColor-Konfiguration verwenden können.

Setzen Sie die Akzentfarbe auf einen benutzerdefinierten violetten Wert.

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

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

Setzen Sie die Akzentfarbe auf die eingebaute grün-Voreinstellung.

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

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

Rahmenradius

Hier sind einige verschiedene Möglichkeiten, wie Sie die borderRadius-Konfiguration verwenden können.

Setzen Sie den Rahmenradius auf mittel.

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

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

Setzen Sie den Rahmenradius auf keinen.

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

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

Erinnerung: Die verfügbaren Rahmenradius-Werte sind: groß (Standard), mittel, klein und keiner.

Schriftstapel

Standardmäßig ist der fontStack auf abgerundet eingestellt. So können Sie die fontStack-Konfiguration verwenden.

Setzen Sie den Schriftstapel auf System.

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

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

Überblendungsunschärfe

Standardmäßig ist die overlayBlur auf keine eingestellt. So können Sie die overlayBlur-Konfiguration verwenden.

Setzen Sie die Überblendungsunschärfe auf klein.

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

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

Mix und Match

Hier sind einige verschiedene Möglichkeiten, wie Sie verschiedene Themen mit accentColor, borderRadius und fontStack-Eigenschaften kombinieren können.

Verwenden Sie das lightTheme-Thema
Setzen Sie die Akzentfarbe auf einen benutzerdefinierten violetten Wert
Setzen Sie den Rahmenradius auf mittel
Setzen Sie den Schriftstapel auf 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>
  );
};

Verwenden Sie das midnightTheme-Thema
Setzen Sie die Akzentfarbe auf die eingebaute rosa-Voreinstellung.
Setzen Sie den Rahmenradius auf klein
Setzen Sie den Schriftstapel auf 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>
  );
};

Dunkelmodus-Unterstützung

Wenn Ihre App die standardmäßige prefers-color-scheme: dark-Mediabfrage verwendet, um zwischen hellen und dunklen Modi zu wechseln, können Sie optional ein dynamisches Themenobjekt mit lightMode und darkMode Werten bereitstellen.

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

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

Übersicht

Erste Schritte

Erweitert