Der Venue Embed bringt sein eigenes Design mit (die Datei venue.css) und soll trotzdem aussehen wie deine Webseite. Dafür brauchst du genau zwei Dinge:
- das Attribut
themeam<venue>-Element: hell oder dunkel, - ein paar CSS-Variablen für Farben, Rundungen und Abstände.
Mehr ist nicht nötig. Du musst nichts über den inneren Aufbau des Embeds wissen.
Schnellstart
Schritt 1: Theme am Embed setzen.
<venue id="XYZ" token="XYZXYZXYZXYZ" theme="dark"></venue>Schritt 2: Zwei Variablen in dein Stylesheet schreiben.
:root {
--flyo-venue-color-primary: #b8112c; /* deine Markenfarbe */
--flyo-venue-radius: 12px; /* deine Eckenrundung */
}Das war es. Für die meisten Webseiten sieht der Embed damit schon richtig aus, weil Schrift und Textfarbe automatisch von deiner Seite kommen.
Kurz erklärt: was ist eine CSS-Variable?
Eine CSS-Variable ist ein Wert mit Namen. Alle Namen von Venue beginnen mit --flyo-venue-. Du schreibst den Namen mit deinem Wert in dein eigenes Stylesheet, und Venue benutzt ihn ab dann überall dort, wo dieser Wert vorkommt. Ein Beispiel: --flyo-venue-radius: 12px rundet Felder, Buttons und Meldungen auf einmal ab.
Was Venue automatisch von deiner Seite übernimmt
Der Embed wird direkt in deine Seite gezeichnet, nicht in einem iframe. Alles, was in CSS «vererbbar» ist, übernimmt Venue deshalb von sich aus an der Stelle, an der du den Embed einbaust. Für die Typografie musst du im Normalfall gar nichts einstellen.
| Was | Verhalten |
|---|---|
| Schriftfamilie | Kommt von deiner Seite. Venue bringt keine eigene Schrift mit und lädt keine Webfonts nach. |
| Schriftgrösse | Die Basisgrösse kommt von deiner Seite, alle Grössen im Embed sind relativ dazu. |
| Textfarbe | Fliesstext und Überschriften übernehmen die Textfarbe deiner Seite. |
Laufweite (letter-spacing) | Kommt von deiner Seite, auch in den Formularfeldern. |
| Icons | Sind direkt im Embed gezeichnet (Inline-SVG) und nehmen die Farbe des umgebenden Textes. Keine Icon-Schrift, kein Nachladen. |
| Zeilenhöhe | Die einzige Ausnahme: sie ist fix bei 1.5, damit Felder und Buttons überall gleich hoch bleiben. Mit --flyo-venue-line-height: inherit erbt auch sie. |
Auch die Formularfelder erben die Schrift. Das ist wichtiger, als es klingt: Browser zeigen <input>, <select>, <textarea> und <button> normalerweise in der System-Schrift, und genau das ist der übliche Grund, weshalb eingebettete Formulare fremd wirken. Venue hebt das im Embed auf, deshalb stehen Felder, Auswahllisten, Datei-Uploads und Buttons in derselben Schrift wie deine Seite.
Nicht geerbt werden die Farben, die Venue selbst zeichnet: Feldhintergründe, Trennlinien und Flächen. Ein halb geerbtes Eingabefeld wäre schnell unlesbar. Dafür gibt es das Theme und die Variablen.
Der ganze Embed skaliert mit der Schriftgrösse
Die Grössen im Embed sind relativ gesetzt (Eingabefelder 1em, Beschriftungen .875em, Hinweistexte .8125em, Titel 1.25em). Willst du nur den Embed kleiner machen, ohne deine Seite anzufassen, genügt eine Zeile:
:root {
--flyo-venue-font-size: 15px;
}Eigene Schrift nur im Embed
Nur nötig, wenn du im Embed bewusst eine andere Schrift willst als auf der Seite:
:root {
--flyo-venue-font-family: "Inter", system-ui, sans-serif;
}Die Schrift selbst musst du auf deiner Seite laden, zum Beispiel per @font-face oder mit einem <link> zu deinem Font-Anbieter.
Schritt 1: Theme wählen
Das Attribut theme am <venue>-Element setzt ein komplettes Farbschema:
<venue id="XYZ" token="XYZXYZXYZXYZ" theme="dark"></venue>| Wert | Wirkung |
|---|---|
light | Standard: weisse Eingabefelder, helle Flächen, dunkler Text in den Feldern. |
dark | Dunkle Eingabefelder, dunkle Flächen, hellere Trennlinien. Für Embeds auf dunklen Seiten. |
auto | Folgt der Systemeinstellung des Besuchers (hell oder dunkel). |
inherit | Venue zeichnet keine eigenen Farben: Hintergründe transparent, Text und Rahmen in der Textfarbe deiner Seite. Sinnvoll, wenn deine Seite Formularfelder schon selbst gestaltet. |
Auf einer dunklen Seite ist theme="dark" fast immer der richtige Startpunkt. Ein Theme setzt nur Standardwerte: jede einzelne Variable kannst du danach weiter anpassen.
Schritt 2: CSS-Variablen setzen
Alle Variablen heissen --flyo-venue-* und dürfen überall im Dokument gesetzt werden: auf :root, auf dem Container um den Embed oder direkt auf dem <venue>-Element. Sie gewinnen immer, unabhängig davon, in welcher Reihenfolge deine Stylesheets geladen werden.
:root {
--flyo-venue-radius: 12px;
--flyo-venue-color-primary: #b8112c;
--flyo-venue-input-bg: #1a2e50;
--flyo-venue-input-color: #edf2fa;
--flyo-venue-input-border-color: rgba(180, 200, 240, 0.18);
}Die wichtigsten acht
Diese acht Variablen decken erfahrungsgemäss die meisten Anpassungen ab:
| Variable | Standard | Bedeutung |
|---|---|---|
--flyo-venue-radius | 6px | Eckenradius für Felder, Buttons, Meldungen. 0 für eckig. |
--flyo-venue-color-primary | #756b6b | Akzentfarbe: Hauptbuttons, Fokusrahmen, Checkboxen, Kalender. |
--flyo-venue-color-text-muted | #667085 | Farbe für Hinweise, Tabellenköpfe, Platzhaltertexte. |
--flyo-venue-input-bg | #fff | Hintergrund von Eingabefeldern, Textareas, Auswahllisten. |
--flyo-venue-input-color | #101828 | Textfarbe in Eingabefeldern. |
--flyo-venue-input-border-color | #d0d5dd | Rahmenfarbe der Eingabefelder. |
--flyo-venue-border-color | #eaecf0 | Trennlinien, Tabellenlinien, Kartenrahmen. |
--flyo-venue-gap | 1rem | Vertikaler Abstand zwischen Feldern und Abschnitten. |
Welche Variable wirkt auf welchen Button
Im Embed gibt es fünf Arten von Buttons. Diese Tabelle zeigt, welche Variablen welchen davon einfärben:
| Buttons im Embed | Variablen |
|---|---|
| Hauptbuttons: «Anmelden», «Neu erfassen», Kalender | --flyo-venue-button-primary-bg / -color / -border-color / -hover-bg |
| Speichern | --flyo-venue-button-success-bg / -color / -border-color / -hover-bg |
| Neutrale Buttons: «Zurück», «Bearbeiten», «Kopieren», «Löschen», Blättern | --flyo-venue-button-outline-bg / -color / -border-color / -hover-bg / -hover-color / -hover-border-color |
| Unauffällige Buttons: «Abmelden», «Aktualisieren», Benutzer-Menü | --flyo-venue-button-quiet-bg / -color / -border-color / -hover-bg / -hover-color / -hover-border-color |
| Textlinks: Sprachumschalter, «Passwort vergessen» | --flyo-venue-button-link-color / -hover-color |
Zwei Abkürzungen: Setzt du nur --flyo-venue-color-primary, sind die Hauptbuttons, der Fokusrahmen, die Checkboxen und der Kalender auf einen Schlag in deiner Markenfarbe. Und setzt du bei einer Art nur -bg, rechnet Venue die Hover-Farbe automatisch daraus aus.
Vollständige Referenz
Du brauchst diese Listen nur, wenn du etwas Bestimmtes suchst. Die Standardwerte gelten für das Theme light.
Grundlagen, Farben, Abstände
| Variable | Standard |
|---|---|
--flyo-venue-font-family | inherit |
--flyo-venue-font-size | inherit |
--flyo-venue-line-height | 1.5 |
--flyo-venue-color-scheme | light |
--flyo-venue-color-text | inherit |
--flyo-venue-color-heading | inherit |
--flyo-venue-color-text-muted | #667085 |
--flyo-venue-space | .25rem |
--flyo-venue-gap | 1rem |
--flyo-venue-radius | 6px |
--flyo-venue-radius-sm | 4px |
--flyo-venue-radius-lg | 10px |
--flyo-venue-transition | 120ms ease |
--flyo-venue-bg | transparent |
--flyo-venue-border-color | #eaecf0 |
--flyo-venue-border-width | 1px |
--flyo-venue-surface-bg | #f9fafb |
--flyo-venue-surface-color | #101828 |
--flyo-venue-shadow | dezenter Schatten |
--flyo-venue-shadow-lg | Schatten für Dropdowns |
--flyo-venue-focus-ring-width | 3px |
--flyo-venue-focus-ring-color | Primärfarbe, 30 % |
--flyo-venue-color-primary | #756b6b |
--flyo-venue-color-primary-contrast | #fff |
--flyo-venue-color-secondary | #475467 |
--flyo-venue-color-secondary-contrast | #fff |
--flyo-venue-color-success | #079455 |
--flyo-venue-color-success-contrast | #fff |
--flyo-venue-color-danger | #d92d20 |
--flyo-venue-color-danger-contrast | #fff |
--flyo-venue-color-link | Primärfarbe |
--flyo-venue-color-link-hover | wie color-link |
--flyo-venue-link-decoration | underline |
Formulare: Beschriftungen, Felder, Checkboxen
Die --flyo-venue-input-*-Variablen gelten für Textfelder, Textareas, Auswahllisten und Datei-Uploads.
| Variable | Standard |
|---|---|
--flyo-venue-label-color | inherit |
--flyo-venue-label-font-size | .875em |
--flyo-venue-label-font-weight | 500 |
--flyo-venue-label-gap | .375rem |
--flyo-venue-hint-color | wie color-text-muted |
--flyo-venue-hint-font-size | .8125em |
--flyo-venue-input-bg | #fff |
--flyo-venue-input-color | #101828 |
--flyo-venue-input-border-color | #d0d5dd |
--flyo-venue-input-border-width | 1px |
--flyo-venue-input-radius | wie radius |
--flyo-venue-input-padding-y | .5rem |
--flyo-venue-input-padding-x | .75rem |
--flyo-venue-input-font-size | 1em |
--flyo-venue-input-placeholder-color | #98a2b3 |
--flyo-venue-input-shadow | wie shadow |
--flyo-venue-input-hover-border-color | #98a2b3 |
--flyo-venue-input-focus-bg | wie input-bg |
--flyo-venue-input-focus-color | wie input-color |
--flyo-venue-input-focus-border-color | Primärfarbe |
--flyo-venue-input-disabled-bg | #f2f4f7 |
--flyo-venue-input-disabled-color | #667085 |
--flyo-venue-select-indicator | url(...) mit dem Pfeil-Icon |
--flyo-venue-check-size | 1rem |
--flyo-venue-check-accent-color | Primärfarbe |
Buttons
| Variable | Standard |
|---|---|
--flyo-venue-button-radius | wie radius |
--flyo-venue-button-padding-y | .5rem |
--flyo-venue-button-padding-x | 1rem |
--flyo-venue-button-font-size | 1em |
--flyo-venue-button-font-weight | 500 |
--flyo-venue-button-border-width | 1px |
--flyo-venue-button-gap | .375rem |
--flyo-venue-button-shadow | wie shadow |
--flyo-venue-button-sm-padding-y | .25rem |
--flyo-venue-button-sm-padding-x | .625rem |
--flyo-venue-button-sm-font-size | .875em |
Die Farben pro Button-Art stehen in der Tabelle oben. Dazu kommt der reine Icon-Button zum Löschen (bei Dateien und wiederholbaren Zeilen): --flyo-venue-remove-color im Ruhezustand, standardmässig wie color-text-muted, und --flyo-venue-remove-hover-color bei Hover, standardmässig wie color-danger.
Meldungen, Badges, Flächen, Navigation, Tabellen
| Variable | Standard |
|---|---|
--flyo-venue-alert-radius | wie radius |
--flyo-venue-alert-padding-y | .75rem |
--flyo-venue-alert-padding-x | 1rem |
--flyo-venue-alert-border-width | 1px |
--flyo-venue-alert-danger-bg / -color / -border-color | rote Töne |
--flyo-venue-alert-success-bg / -color / -border-color | grüne Töne |
--flyo-venue-alert-warning-bg / -color / -border-color | orange Töne |
--flyo-venue-alert-info-bg / -color / -border-color | blaue Töne |
--flyo-venue-badge-radius | 999px |
--flyo-venue-badge-padding-y / -padding-x | .125rem / .5rem |
--flyo-venue-badge-font-size / -font-weight | .75em / 500 |
--flyo-venue-badge-online-bg / -color | grün |
--flyo-venue-badge-offline-bg / -color | grau |
--flyo-venue-notification-bg / -color | rot / weiss |
--flyo-venue-panel-bg / -color / -radius / -padding | Flächen wie das Benutzerkonto |
--flyo-venue-card-bg / -color / -border-color / -radius / -padding | Karten wie die Öffnungszeiten |
--flyo-venue-nav-bg | Hintergrund der Navigationsleiste |
--flyo-venue-nav-padding / -radius / -gap | .25rem / radius + .25rem / .25rem |
--flyo-venue-nav-link-color / -bg / -radius / -font-weight | Reiter im Ruhezustand |
--flyo-venue-nav-link-padding-y / -padding-x | .5rem / .75rem |
--flyo-venue-nav-link-hover-color / -hover-bg | Reiter bei Hover |
--flyo-venue-nav-link-active-color / -active-bg | aktiver Reiter |
--flyo-venue-nav-link-active-shadow | Schatten des aktiven Reiters |
--flyo-venue-account-menu-width | 26rem, Breite des Benutzerkonto-Panels |
--flyo-venue-search-width | 18rem, maximale Breite des Suchfelds |
--flyo-venue-table-color / -bg / -border-color | Tabelle |
--flyo-venue-table-head-color / -head-bg / -head-font-size / -head-font-weight | Tabellenkopf |
--flyo-venue-table-stripe-bg | Zebrastreifen, standardmässig aus |
--flyo-venue-table-hover-bg | Zeile bei Hover |
--flyo-venue-table-cell-padding-y / -cell-padding-x | .625rem / .75rem |
Dropdowns, Tags, Bilder, Editor
| Variable | Standard |
|---|---|
--flyo-venue-dropdown-bg / -color / -border-color / -radius / -shadow | Vorschlagsliste |
--flyo-venue-dropdown-max-height | 16rem |
--flyo-venue-dropdown-item-color / -item-hover-bg / -item-hover-color | Einträge der Liste |
--flyo-venue-tag-bg / -color / -radius | gewählte Verknüpfungen |
--flyo-venue-media-width | 300px, Breite der Bildkarte |
--flyo-venue-media-radius | wie radius-lg |
--flyo-venue-editor-min-height | 8rem |
--flyo-venue-spinner-size | 1em |
--flyo-venue-icon-size | 1.125em |
--flyo-venue-icon-stroke-width | 1.75 |
Häufige Fälle
Alles eckig statt abgerundet
:root { --flyo-venue-radius: 0; }Eigene Schrift im Embed
Normalerweise nicht nötig, siehe Was Venue automatisch übernimmt.
:root { --flyo-venue-font-family: "Inter", system-ui, sans-serif; }Auswahllisten und Datumsfelder erscheinen hell, obwohl der Embed dunkel ist
Diese Aufklapplisten zeichnet das Betriebssystem, nicht CSS. Setze das Theme auf dark oder direkt:
:root { --flyo-venue-color-scheme: dark; }Zebrastreifen in der Eintragsliste
:root { --flyo-venue-table-stripe-bg: #f9fafb; }Schatten und Fokusrahmen abschalten
:root {
--flyo-venue-shadow: none;
--flyo-venue-focus-ring-width: 0;
}Feinere oder kleinere Icons
:root {
--flyo-venue-icon-size: 1rem; /* feste Grösse statt mitskalierend */
--flyo-venue-icon-stroke-width: 1.5; /* dünnere Linien */
}Navigation flach, mit Unterstrich statt Leiste
Standardmässig ist die Navigation eine Leiste, auf der der aktive Reiter als erhöhtes Feld sitzt. Flach wird sie so:
:root {
--flyo-venue-nav-bg: transparent;
--flyo-venue-nav-padding: 0;
--flyo-venue-nav-link-active-bg: transparent;
--flyo-venue-nav-link-active-shadow: inset 0 -2px 0 0 currentColor;
}Bildvorschau schmaler
:root {
--flyo-venue-media-width: 200px;
--flyo-venue-media-radius: 0;
}Beispiel: Embed auf einer dunklen Seite
Ein vollständiges Beispiel: Theme dunkel, dazu die Markenfarbe und die Felder passend zur Seite.
<venue id="XYZ" token="XYZXYZXYZXYZ" theme="dark"></venue>:root {
--flyo-venue-radius: 12px;
--flyo-venue-color-primary: #c8a96e;
--flyo-venue-color-primary-contrast: #112238;
--flyo-venue-input-bg: rgba(17, 34, 56, 0.6);
--flyo-venue-input-border-color: rgba(180, 200, 240, 0.18);
--flyo-venue-surface-bg: rgba(30, 52, 96, 0.88);
--flyo-venue-nav-link-active-bg: rgba(200, 169, 110, 0.16);
--flyo-venue-nav-link-active-color: #c8a96e;
}Beispiel: Tailwind CSS
Es gibt keinen Sonderfall: die Variablen kommen in eine gewöhnliche :root-Regel (oder, bei Tailwind 4, in einen @theme-Block). Beides funktioniert, egal in welcher Reihenfolge deine Dateien geladen werden.
@import "tailwindcss";
:root {
--flyo-venue-radius: 12px;
--flyo-venue-color-primary: #b8112c;
--flyo-venue-input-bg: #1a2e50;
--flyo-venue-input-color: #edf2fa;
--flyo-venue-input-border-color: rgba(180, 200, 240, 0.18);
}Bei Tailwind 3 ist es dasselbe, nur der obere Teil der Datei sieht anders aus (@tailwind base; @tailwind components; @tailwind utilities;).
TIP
Tailwinds Basis-Styles greifen nicht in den Embed ein, und Venue greift nie auf Elemente ausserhalb des Embeds zu. Du kannst Tailwind also ganz normal weiterbenutzen.
Beispiel: Next.js oder React
Der Embed ist eine Vue-App. In React lädst du Vue und das Venue-Bundle im Client und startest die App in einem Container.
'use client';
import { useEffect, useRef } from 'react';
const VENUE_ID = 'XYZ';
const VENUE_TOKEN = 'XYZXYZXYZXYZ';
export function VenueEmbed() {
const ref = useRef<HTMLDivElement>(null);
const mounted = useRef(false);
useEffect(() => {
if (mounted.current) return;
mounted.current = true;
const css = document.createElement('link');
css.rel = 'stylesheet';
css.href = 'https://venue.flyo.cloud/venue.css';
document.head.appendChild(css);
const load = (src: string) =>
new Promise<void>((resolve, reject) => {
const s = document.createElement('script');
s.src = src;
s.async = false;
s.onload = () => resolve();
s.onerror = () => reject(new Error(src));
document.body.appendChild(s);
});
(async () => {
await load('https://unpkg.com/vue@3/dist/vue.global.prod.js');
await load('https://venue.flyo.cloud/venue.umd.min.js');
const { Vue, venue } = window as any;
if (ref.current && Vue && venue) {
Vue.createApp({ components: { venue } }).mount(ref.current);
}
})();
}, []);
return (
<div
ref={ref}
dangerouslySetInnerHTML={{
__html: `<venue id="${VENUE_ID}" token="${VENUE_TOKEN}" theme="dark"></venue>`,
}}
/>
);
}Das Design machst du danach wie überall sonst über die --flyo-venue-*-Variablen in deinem globalen Stylesheet. Ein zusätzlicher Container mit eigenen Farbregeln ist nicht nötig.
Gut zu wissen
Die Eintragsliste richtet sich nach ihrer eigenen Breite, nicht nach der Fenstergrösse, weil ein Embed auch in einer schmalen Spalte stehen kann. Wird sie schmal, zeigen «Bearbeiten» und «Kopieren» nur noch ihr Icon, bei ganz schmalen Spalten auch die Blätter-Buttons. Die Beschriftungen bleiben für Screenreader erhalten.
Bilder zeigt Venue in einer quadratischen Vorschau. Es lädt dazu die 300x300-Variante vom Storage, zugeschnitten auf den Fokuspunkt des Bildes (siehe Assets Bilder).
Umstieg von der Bootstrap-Version
Frühere Versionen des Venue Embeds basierten auf Bootstrap 5. Diese Abhängigkeit ist entfallen: der Embed bringt jetzt ein eigenes, deutlich kleineres Stylesheet mit (81 KB statt 219 KB) und lädt weder Bootstrap noch Popper.
Hast du früher Bootstrap-Klassen im Embed überschrieben (.form-control, .btn, .card und so weiter), greifen diese Regeln nicht mehr. Lösche sie und setze stattdessen die --flyo-venue-*-Variablen. In der Regel wird deine CSS-Datei dabei deutlich kürzer: das ganze !important-Gefecht gegen Bootstrap entfällt, und für die meisten Seiten genügen das Theme plus eine Handvoll Variablen.
Weiterführend
- Venue Integration: Einrichtung, Embed Code, API
- Venue Oberfläche: wie Content-Administratoren arbeiten