Styling & Themes

Vordefinierte Themes

Theme	Beschreibung
db-theme	Deutsche Bahn (rot)
ovag-theme	OVAG (blau)
vag-theme	VAG (grün)
mvg-theme	MVG (dunkelblau)

<bc-auskunft widget-config='{"ui":{"theme":"db-theme"}}'></bc-auskunft>

widget.setTheme("db-theme");

Eigenes Theme mit CSS-Variablen

bc-auskunft::part(container) {
  --widget-primary: #1d4ed8;   /* Ihre Primärfarbe */
  --widget-primary-dark: #1e40af;
}

Verfügbare CSS-Variablen

/* Primärfarben */
--widget-primary: #d82d28;
--widget-primary-dark: #b91c1c;
--widget-primary-light: #f87171;

/* Hintergrund */
--widget-bg-primary: #ffffff;
--widget-bg-secondary: #f9fafb;
--widget-bg-tertiary: #f3f4f6;

/* Rahmen */
--widget-border-primary: #e5e7eb;
--widget-border-secondary: #d1d5db;
--widget-border-focus: var(--widget-primary);

/* Text */
--widget-text-primary: #111827;
--widget-text-secondary: #6b7280;
--widget-text-tertiary: #9ca3af;
--widget-text-inverse: #ffffff;

Anpassung mit ::part

Bestimmte Bereiche des Widgets können über ::part gestylt werden:

/* Root-Container */
bc-auskunft::part(container) {
  border: 1px dashed #cbd5e1;
  padding: 16px;
  border-radius: 12px;
}

/* Eingabefelder */
bc-auskunft::part(input) {
  font-weight: 500;
}

/* Swap-Button */
bc-auskunft::part(swap-button) {
  background: #f1f5f9;
}

/* Zeit-Modal */
bc-auskunft::part(time-modal) {
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

/* Suchbutton */
bc-auskunft::part(search-button) {
  letter-spacing: 0.02em;
}

/* Via-Toggle */
bc-auskunft::part(via-toggle-button) {
  background: #f8f9fa;
}

/* Produkt-Filter */
bc-auskunft::part(product-filter) {
  background: #f8f9fa;
  border-radius: 8px;
}