Themen

Verwenden und Anpassen der Themen

Du kannst die RainbowKit-Benutzeroberfläche anpassen, um sie an dein Branding anzupassen. Du kannst aus einigen vordefinierten Akzentfarben und Konfigurationen des Randradius wählen.

Es gibt 3 eingebaute Themenfunktionen:

lightTheme (Standard)
darkTheme
midnightTheme

Eine Themenfunktion gibt ein Themenobjekt zurück. Sie können das Objekt der theme-Eigenschaft von 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>
);

Anpassen der eingebauten Themen

Die eingebauten Themenfunktionen akzeptieren auch ein Optionsobjekt, das Ihnen ermöglicht, aus mehreren verschiedenen visuellen Stilen auszuwählen.

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

Zum Beispiel, um das dunkle Thema mit einer lila Akzentfarbe und einer medium 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 Akzentfarben-Voreinstellungen (blau, grün, orange, rosa, lila, rot), die in das Optionsobjekt übernommen werden können. Zum Beispiel, um die Akzentfarben-Voreinstellung rosa 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 lila 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 das eingebaute green-Preset.

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 medium.

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

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

Setzen Sie den Rahmenradius auf none.

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: large (Standard), medium, small und none.

Schriftstapel

Standardmäßig ist der fontStack auf rounded gesetzt. Aber 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>
  );
};

Overlay-Unschärfe

Standardmäßig ist overlayBlur auf none gesetzt. Aber so können Sie die overlayBlur-Konfiguration verwenden.

Setzen Sie die Overlay-Unschärfe auf small.

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

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

Kombinieren und Anpassen

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

Verwenden Sie das lightTheme-Thema
Setzen Sie die Akzentfarbe auf einen benutzerdefinierten lila Wert
Setzen Sie den Rahmenradius auf medium
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 das eingebaute pink-Preset.
Setzen Sie den Rahmenradius auf small
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>
  );
};

Unterstützung für Dunkelmodus

Wenn Ihre App die standardmäßige prefers-color-scheme: dark-Medienabfrage verwendet, um zwischen hellen und dunklen Modi zu wechseln, können Sie optional ein dynamisches Themenobjekt bereitstellen, das Werte für lightMode und darkMode enthält.

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

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

Übersicht

Erste Schritte

Erweitert