Anmelden

AI-Kit für WordPress mit CSS-Variablen gestalten

Die Oberflächenkomponenten von AI-Kit (AI-Kit Feature und Chatbot) stellen CSS-Design-Tokens bereit, die Sie im Theme oder in eigenem CSS überschreiben können.

Die meisten Variablen sind auf diesen Wurzelelementen definiert:

  • #ai-kit-inline-root — Inline-Oberflächen von Feature und der Chatbot
  • #ai-kit-portal-root — modale Feature-Oberflächen

Wenn Sie nicht wissen, welches Wurzelelement Ihre Seite verwendet, können Sie die Tokens bedenkenlos auf beiden überschreiben.

Schnellstart​

Fügen Sie Folgendes Ihrem Theme-CSS hinzu (oder unter Design → Customizer → Zusätzliches CSS):

/* Global tweaks */
#ai-kit-inline-root,
#ai-kit-portal-root {
  --ai-kit-font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --ai-kit-radius: 8px;                 /* Feature panel corners */
  --ai-kit-chat-border-radius: 12px;    /* Chat window corners */
  --ai-kit-chat-width: 520px;
}

/* Make the launcher match your brand */
#ai-kit-portal-root {
  --ai-kit-launcher-bg: #0ea5e9;
  --ai-kit-launcher-bg-hover: #0284c7;
  --ai-kit-user-bubble-bg: #0ea5e9;
}

Token-Referenz​

Nachfolgend finden Sie einen praktischen Überblick über die verfügbaren Tokens.

Typografie​

  • --ai-kit-font-family
  • --ai-kit-font-size
  • --ai-kit-font-size-sm
  • --ai-kit-font-size-xs
  • --ai-kit-font-size-title
  • --ai-kit-line-height

Abstände​

  • --ai-kit-space-1 … --ai-kit-space-5
  • --ai-kit-spacing-sm / --ai-kit-spacing-md / --ai-kit-spacing-lg (back‑compat aliases)

Radien​

  • --ai-kit-radius — Standardradius für Feature-Oberflächen (standardmäßig eckige Kanten)
  • --ai-kit-radius-sm — üblicher Radius für sekundäre Oberflächen
  • --ai-kit-radius-pill
  • --ai-kit-radius-round
  • --ai-kit-launcher-radius — Radius der Startschaltfläche (kann unabhängig von --ai-kit-radius sein)

Semantische Farben​

Diese Farben verwendet AI-Kit intern entsprechend ihrer Bedeutung. Viele greifen standardmäßig auf vorhandene Mantine-Variablen zurück:

  • --ai-kit-color-text
  • --ai-kit-color-text-muted
  • --ai-kit-color-border
  • --ai-kit-color-border-muted
  • --ai-kit-color-surface / --ai-kit-color-surface-2 / --ai-kit-color-surface-3
  • --ai-kit-color-danger / --ai-kit-color-warning / --ai-kit-color-success
  • --ai-kit-color-primary
  • --ai-kit-color-primary-hover
  • --ai-kit-color-primary-contrast

Schatten​

  • --ai-kit-shadow-sm
  • --ai-kit-shadow-sm-hover

Animation des Feature-Rahmens​

Diese Tokens steuern den animierten Feature-Rahmen, sofern er in Ihrem Oberflächen-Build aktiviert ist:

  • --ai-kit-border-width
  • --ai-kit-border-color
  • --ai-kit-border-thickness
  • --ai-kit-border-speed
  • --ai-kit-border-angle
  • --ai-kit-border-gradient

Position, Größe und Ebenen​

  • --ai-kit-position-z-index
  • --ai-kit-open-button-offset-x
  • --ai-kit-open-button-offset-y
  • --ai-kit-chat-launcher-size
  • --ai-kit-chat-width
  • --ai-kit-chat-height-min
  • --ai-kit-chat-height-max
  • --ai-kit-chat-height-cap

Startschaltfläche und Chat-Oberfläche​

  • --ai-kit-launcher-bg

  • --ai-kit-launcher-color

  • --ai-kit-launcher-bg-hover

  • --ai-kit-launcher-shadow

  • --ai-kit-launcher-shadow-hover

  • --ai-kit-chat-surface

  • --ai-kit-chat-surface-subtle

  • --ai-kit-chat-border-color

  • --ai-kit-chat-border-radius

  • --ai-kit-chat-icon-color

Chatstatus, Sprechblasen und Markdown​

  • --ai-kit-chat-status-bg

  • --ai-kit-chat-status-fg

  • --ai-kit-user-bubble-bg

  • --ai-kit-user-bubble-color

  • --ai-kit-assistant-bubble-bg

  • --ai-kit-assistant-bubble-color

  • --ai-kit-chat-code-bg

  • --ai-kit-chat-pre-bg

Chat-Schaltflächen und Feedback​

  • --ai-kit-chat-close-bg

  • --ai-kit-chat-close-bg-hover

  • --ai-kit-chat-typing-dot-color

  • --ai-kit-chat-feedback-bg

  • --ai-kit-chat-feedback-border

  • --ai-kit-chat-feedback-active-bg