Theming

Anpassung des Designs

CaptchaFox kann durch die Anpassung der Design-Optionen an Ihre Markenfarben angepasst werden.
Dies kann über die Einstellungen im Admin-Portal, durch die Auswahl eines vorgefertigten Designs oder durch die Bereitstellung eines eigenen Designs erfolgen.

Beispiel:

Individuelles Design

Designs

Die folgenden Basis-Designs können aktiviert werden, indem das Attribut data-theme auf dem Container-Element oder die Eigenschaft theme über die JavaScript-API angegeben wird.

Hell (Standard)

Helles Design

Dunkel

Dunkles Design

Portal Einstellungen

Das CaptchaFox Admin-Portal ermöglicht es Benutzern mit den entsprechenden Berechtigungen, Farben und Einstellungen schnell und einfach zu aktualisieren, ohne die Hilfe eines Entwicklers in Anspruch nehmen zu müssen.

Die folgenden Designeinstellungen können über das Portal angepasst werden:

  • CaptchaFox Logo ein-/ausblenden (nur im Portal verfügbar)
  • Primär-Farbe
  • Fehler-Farbe
  • Erfolg-Farbe
  • Radius des Rahmens

Individuelles Design (Beta)

Ein benutzerdefiniertes Design kann zum Zeitpunkt des Renderns angegeben werden, um alle Designoptionen außer Kraft zu setzen. Auf diese Weise können Sie das Design vollständig anpassen, um Ihre eigene Marke widerzuspiegeln.

Da das benutzerdefinierte Design eine höhere Priorität hat, werden über die Portal-Benutzeroberfläche vorgenommene Farbänderungen nicht mehr übernommen.

captchafox.render(element, {
  sitekey: 'IHR_SITEKEY',
  theme: {
    // Design Definition
  },
});
Design Definition
{
  general: {
    primary: string;
    success: string;
    error: string;
    borderRadius: number;
  };
  button: {
    background: string;
    backgroundHover: string;
    text: string;
    checkbox: string;
  };
  panel: {
    background: string;
    border: string;
    text: string;
  };
  slider: {
    background: string;
    knob: string;
  };
}