Benutzerdefiniertes Design

Erstellen eines benutzerdefinierten Designs

Hinweis: Diese API ist instabil und wird sich wahrscheinlich in naher Zukunft ändern. Es wird empfohlen, vorerst die integrierten Designs zu verwenden.

Während die integrierten Designs ein gewisses Maß an Anpassung bieten, wird der Theme-Typ bereitgestellt, um Ihnen zu helfen, Ihre eigenen benutzerdefinierten Designs mit einem niedrigerem Zugriff auf die zugrunde liegenden Designvariablen zu definieren.

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

const myCustomTheme: Theme = {
  blurs: {
    modalOverlay: '...',
  },
  colors: {
    accentColor: '...',
    accentColorForeground: '...',
    actionButtonBorder: '...',
    actionButtonBorderMobile: '...',
    actionButtonSecondaryBackground: '...',
    closeButton: '...',
    closeButtonBackground: '...',
    connectButtonBackground: '...',
    connectButtonBackgroundError: '...',
    connectButtonInnerBackground: '...',
    connectButtonText: '...',
    connectButtonTextError: '...',
    connectionIndicator: '...',
    downloadBottomCardBackground: '...',
    downloadTopCardBackground: '...',
    error: '...',
    generalBorder: '...',
    generalBorderDim: '...',
    menuItemBackground: '...',
    modalBackdrop: '...',
    modalBackground: '...',
    modalBorder: '...',
    modalText: '...',
    modalTextDim: '...',
    modalTextSecondary: '...',
    profileAction: '...',
    profileActionHover: '...',
    profileForeground: '...',
    selectedOptionBorder: '...',
    standby: '...',
  },
  fonts: {
    body: '...',
  },
  radii: {
    actionButton: '...',
    connectButton: '...',
    menuButton: '...',
    modal: '...',
    modalMobile: '...',
  },
  shadows: {
    connectButton: '...',
    dialog: '...',
    profileDetailsAction: '...',
    selectedOption: '...',
    selectedWallet: '...',
    walletLogo: '...',
  },
};

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

Erweitern eines integrierten Designs

Sie können ein integriertes Design erweitern, ohne das gesamte Design neu definieren zu müssen. Dies ist nützlich, wenn Sie nur bestimmte Design-Token überschreiben möchten.

Um dies zu tun, installieren Sie lodash.merge (oder Ähnliches):

npm install lodash.merge

Importieren Sie es zusammen mit dem Design, das Sie erweitern möchten (z. B. darkTheme) und dem Theme-Typ von TypeScript:

import merge from 'lodash.merge';
import {
  RainbowKitProvider,
  darkTheme,
  Theme,
} from '@rainbow-me/rainbowkit';

Dann kombinieren Sie das integrierte Design mit den Design-Token, die Sie überschreiben möchten. In diesem Beispiel überschreibe ich das accentColor-Token, um es an die Akzentfarbe meiner Marke anzupassen.

const myTheme = merge(darkTheme(), {
  colors: {
    accentColor: '#07296d',
  },
} as Theme);

Schließlich können Sie jetzt Ihr benutzerdefiniertes Design an die theme-Eigenschaft des RainbowKitProvider übergeben.

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

Erstellen von benutzerdefinierten Design-Selektoren

Wenn Ihre App server-/statisch gerendert ist und es den Benutzern ermöglicht, manuell zwischen Designs umzuschalten, kann das Designsystem von RainbowKit mit benutzerdefinierten CSS-Selektoren verbunden werden, mit den folgenden Funktionen, die mit jedem CSS-in-JS-System verwendet werden können:

cssStringFromTheme
cssObjectFromTheme

Diese Funktionen liefern CSS, das alle erforderlichen Designvariablen setzt. Da sowohl Zeichenfolgen als auch Objekte unterstützt werden, kann dies in jedes CSS-in-JS-System integriert werden.

Als einfaches Beispiel können Sie Ihr eigenes style-Element mit benutzerdefinierten Selektoren für jedes Design rendern. Da wir die Kontrolle über das Rendern des Design-CSS übernehmen, übergeben wir null an die theme-Eigenschaft, damit RainbowKitProvider keine Stile für uns rendert. Beachten Sie auch die Verwendung der extends-Option bei der Funktion cssStringFromTheme, die alle Designvariablen, die mit dem Basisthema übereinstimmen, ausschließt.

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

const App = () => {
  return (
    <RainbowKitProvider theme={null} {...etc}>
      <style
        dangerouslySetInnerHTML={{
          __html: `
            :root {
              ${cssStringFromTheme(lightTheme)}
            }

            html[data-dark] {
              ${cssStringFromTheme(darkTheme, {
                extends: lightTheme,
              })}
            }
          `,
        }}
      />

      {/* ... */}
    </RainbowKitProvider>
  );
};

Übersicht

Erste Schritte

Erweitert

Benutzerdefiniertes Design

Erstellen eines benutzerdefinierten Designs

Erweitern eines integrierten Designs

Erstellen von benutzerdefinierten Design-Selektoren