# Themes, Tokens, Tailwind und Dark Mode > Den Planer mit --super-scheduler-*-Tokens gestalten, den Akzent so umfärben, dass jede Tönung folgt, zum eigenen Dark Mode passen und Tailwind v3 oder v4 einrichten. Source: https://superscheduler.org/de/docs/theming/ Reviewed: 2026-10-07 Importieren Sie das Stylesheet einmal: Es liegt in @layer super-scheduler mit Selektoren ohne Spezifität, sodass Ihr CSS außerhalb von Layern ohne !important gewinnt. Gestalten Sie mit --super-scheduler-*-Tokens um; Komponenten-Tokens wirken überall, die Akzentfamilie aber muss auf :root und .dark gesetzt werden (seitenweit, Standard colorScheme 'inherit') oder auf der Wurzel des Controls mit einem expliziten colorScheme. Der Dark Mode folgt standardmäßig einer Klasse .dark oder einem Attribut data-theme an einem Vorfahren, dem Betriebssystem nur mit colorScheme: 'auto'. SuperScheduler wird vollständig über CSS Custom Properties, Klassen und Data-Attribute gestaltet. Sie können ihn an Ihr Produkt anpassen, ohne das Stylesheet zu forken und ohne `!important`. Dieser Leitfaden beschreibt den Vertrag, die Rezepte, die zuverlässig jede Farbe erreichen, den Dark Mode, Klassen pro Slot, die Dichte, den ungestylten Modus und Tailwind. Das meiste gilt für Pro; der [letzte Abschnitt](#lite) behandelt Lite. ## Der CSS-Vertrag Importieren Sie das Stylesheet einmal, neben dem eigenen CSS Ihrer Anwendung: ```css @import 'super-scheduler/styles.css'; ``` (In einem Bundler können Sie auch `import 'super-scheduler/styles.css'` in einem Modul schreiben.) Die Datei ist ein einziger `@layer super-scheduler`-Block aus `:where()`-Selektoren ohne Spezifität. Jede Ihrer Regeln außerhalb eines Layers gewinnt dagegen, unabhängig von ihrer Spezifität. | Oberfläche | Selektor oder Präfix | |---|---| | Wurzel | `.super-scheduler`, mit `data-color-scheme`, `data-density`, `data-lod` und `data-unstyled` | | Teile | Klassen `.super-scheduler__*` (`__event`, `__event-inner`, `__event-bar`, `__cell`, `__row-header-cell`, `__link`, ...) | | Teilmarkierungen | `[data-super-scheduler-part="event"]`, `"cell"`, `"event-meta"`, `"now-line"`, `"minimap"`, `"pane"`, ... | | Zustand | `data-selected`, `data-hovered`, `data-dragging`, `data-conflict`, `data-today`, `data-weekend`, `data-disabled`, `data-expanded`, ... | | React-Inhalte | `data-super-scheduler-slot`, `data-super-scheduler-slot-ready`, `data-super-scheduler-fallback` | | Tokens | `--super-scheduler-*` | Verlassen Sie sich nicht auf Namen von Chunk-Dateien oder generierte Bezeichner. Geometrie-Tokens wie `--super-scheduler-cell-width`, `-row-height` und `-row-header-width` schreibt die Engine: Ändern Sie Größen über Optionen (`cellWidth`, `eventHeight`, `rowHeaderWidth`), nicht über CSS. ## Tokens Es gibt drei Arten von Tokens, und wo sie deklariert sind, entscheidet darüber, wo Sie sie überschreiben können. - **Primitive**, deklariert auf `:root`: `--super-scheduler-white`, `neutral-50` bis `neutral-950`, `accent-50` bis `accent-950`, `danger-400/600`, `warning-400/600`, `success-400/600`, `duration`, `ease`, `ease-spring`. - **Semantische Tokens**, für jedes Farbschema deklariert (helle Werte auf `:root` und hellen Geltungsbereichen, dunkle Werte auf `.dark`, `[data-theme="dark"]` und `[data-color-scheme="dark"]`): | Gruppe | Tokens (alle mit dem Präfix `--super-scheduler-`) | |---|---| | Flächen und Text | `surface`, `surface-raised`, `text`, `text-muted`, `on-accent` | | Linien | `border`, `border-strong`, `grid-line`, `grid-break`, `row-line` | | Akzent | `accent-rgb`, `accent`, `accent-emphasis`, `accent-soft`, `accent-text`, `accent-border` | | Status | `danger`, `danger-soft`, `warning`, `warning-soft`, `success` | | Kalenderschattierung | `today-bg`, `weekend-bg`, `non-business-bg`, `group`, `group-row`, `hatch` | | Interaktion | `hover-row`, `hover-cell`, `selection`, `selection-border`, `focus-ring`, `micro-bar`, `duration-bar` | | Overlays und Laden | `overlay`, `overlay-text`, `overlay-muted`, `overlay-subtle`, `overlay-border`, `skeleton-base`, `skeleton-highlight`, `shadow-1` bis `shadow-3` | - **Komponenten-Tokens**, nie deklariert: Sie werden dort, wo sie verwendet werden, mit einem Fallback gelesen; Sie können sie also an jedem Vorfahren setzen. Beispiele: `--super-scheduler-radius`, `-event-radius`, `-event-padding`, `-event-bg`, `-event-text`, `-event-border`, `-event-bar`, `-link`, `-link-hover`, `-now-line`, `-handle-target`, `-hover-*`, `-minimap-*`, `-pane-splitter`, `-zoom-hud-bg`. ## Rezepte zum Umgestalten, die funktionieren Da semantische Tokens pro Farbschema deklariert sind und einige auf der Wurzel des Controls erneut deklariert werden, erreicht nicht jede Überschreibung jede Tönung. Diese vier Rezepte wurden im Browser gegen das Stylesheet von 0.1.0 geprüft. ### Komponenten-Tokens überall Komponenten-Tokens wirken an jedem Vorfahren, in jedem Farbschema-Modus: ```css .planning { --super-scheduler-radius: 8px; --super-scheduler-event-radius: 6px; --super-scheduler-event-padding: 2px 6px; --super-scheduler-link: #8b5cf6; --super-scheduler-now-line: #e11d48; } ``` ### Neutrale Farben an einem umschließenden Element Mit dem Standard `colorScheme: 'inherit'` lassen sich die meisten semantischen Tokens an einem umschließenden Element überschreiben: Flächen, Text, Linien, Schattierung und Auswahltönungen. ```css .planning { --super-scheduler-surface: #fbfaf7; --super-scheduler-border: #e6e1d6; --super-scheduler-weekend-bg: rgb(120 100 60 / 0.05); } .dark .planning { --super-scheduler-surface: #16140f; --super-scheduler-border: rgb(255 255 255 / 0.08); } ``` Zwei Grenzen: Mit einem expliziten `colorScheme` (`'light'`, `'dark'` oder `'auto'`) deklariert die Wurzel des Controls die semantischen Tokens selbst, und ein umschließendes Element erreicht sie nicht mehr (verwenden Sie dann das letzte Rezept). Und `accent`, `duration-bar`, `grid-break`, `hatch`, `overlay-text`, `overlay-muted`, `overlay-subtle` sowie die Farbe der Scrollleiste sind immer auf der Wurzel deklariert. ### Ein Marken-Akzent für die ganze Website Die Akzentfamilie wird aus einem einzigen Kanal-Token berechnet, `--super-scheduler-accent-rgb` (drei durch Leerzeichen getrennte Zahlen), plus einigen Primitiven für die weichen Füllungen und den Text. Deklarieren Sie sie außerhalb eines Layers auf `:root` und auf dem dunklen Geltungsbereich, den Ihre Website verwendet: ```css :root { --super-scheduler-accent-rgb: 10 140 80; --super-scheduler-accent-100: #e0f2e9; /* accent-soft: event fills */ --super-scheduler-accent-200: #c9e6d6; /* border in light mode */ --super-scheduler-accent-800: #04361f; /* accent-text, accent-emphasis */ } :root.dark { --super-scheduler-accent-rgb: 80 200 140; --super-scheduler-accent-950: #0c2a1b; /* accent-soft in dark mode */ --super-scheduler-accent-100: #d8f5e6; /* accent-text in dark mode */ } ``` Auswahl, heutiger Tag, Fokusring, Hover-Tönungen und Mikrobalken folgen alle, in beiden Farbschemata. Dieses Rezept erfordert den Standard `colorScheme: 'inherit'`. ### Ein Marken-Akzent für einen einzelnen Planer Um einen einzelnen Planer zu branden oder ein explizites `colorScheme` zu verwenden, setzen Sie mit `cssClass` eine Klasse auf die Wurzel des Controls und sprechen sie zusammen mit dem Farbschema-Attribut an: ```css .brand[data-color-scheme='light'] { --super-scheduler-accent-rgb: 10 140 80; --super-scheduler-accent-100: #e0f2e9; --super-scheduler-accent-200: #c9e6d6; --super-scheduler-accent-800: #04361f; } .brand[data-color-scheme='dark'] { --super-scheduler-accent-rgb: 80 200 140; --super-scheduler-accent-950: #0c2a1b; --super-scheduler-accent-100: #d8f5e6; } .job--late { --super-scheduler-event-bg: var(--super-scheduler-danger-soft); --super-scheduler-event-border: var(--super-scheduler-danger); --super-scheduler-event-text: var(--super-scheduler-danger); } ``` ```tsx // src/BrandedPlanner.tsx import { useMemo } from 'react' import { SuperSchedulerComponent } from 'super-scheduler' import type { SchedulerProps, SuperScheduler } from 'super-scheduler' import 'super-scheduler/styles.css' type Job = { status: 'planned' | 'late' | 'done' } // Stable objects: a new classNames or styles object is applied again on every render. const CLASS_NAMES: SuperScheduler.SchedulerClassNames = { event: 'planning-event', rowHeaderCell: 'planning-row-header', } const STYLES: SuperScheduler.SchedulerStyles = { timeHeaderCell: { fontVariantNumeric: 'tabular-nums' }, } // A class per state; the colors live in CSS, so they follow light and dark mode. const statusClass: NonNullable = (args) => { const job = args.data as SuperScheduler.EventRenderData args.data.cssClass = `job job--${job.status}` } export function BrandedPlanner(props: { theme: 'light' | 'dark' resources: SuperScheduler.ResourceData[] jobs: SuperScheduler.EventData[] }) { const events = useMemo(() => props.jobs.slice(), [props.jobs]) return ( ) } ``` Sie sollten im hellen Modus grüne Auswahl- und Ereignisfüllungen sehen, ihre dunklen Gegenstücke, wenn `theme` `'dark'` ist, und verspätete Aufträge in den Warnfarben des jeweiligen Farbschemas. Mit `colorScheme: 'auto'` schreiben Sie dieselben Regeln auf `.brand` und auf `.brand` innerhalb von `@media (prefers-color-scheme: dark)`. > **Behavior:** > Drei Überschreibungen sehen richtig aus, funktionieren aber nicht. `--super-scheduler-accent` an einem Vorfahren zu setzen, wird von der eigenen Deklaration der Wurzel verdeckt. `--super-scheduler-accent-rgb` an einem umschließenden Element zu setzen, ändert zwar den Akzent selbst, aber keine der daraus berechneten Tönungen. Primitive wie `--super-scheduler-accent-100` an einem umschließenden Element zu setzen, ändert nichts, weil die semantischen Tokens sie bereits auf `:root` aufgelöst haben. ## Farbschema und Dark Mode `colorScheme` wird als `data-color-scheme` an die Wurzel geschrieben: | Wert | Folgt | |---|---| | `'inherit'` (Standard) | Dem nächsten Vorfahren mit der Klasse `dark` oder einem Attribut `data-theme="dark"` / `data-theme="light"` | | `'light'`, `'dark'` | Erzwungen; hat Vorrang vor jedem Vorfahren | | `'auto'` | `prefers-color-scheme` des Betriebssystems | Nur `'auto'` liest das Betriebssystem. Eine helle Website auf einem dunklen System bleibt im Standardmodus hell; das ist meist genau das, was ein Produkt mit eigenem Theme-Umschalter will. Der klassenbasierte Dark Mode von Tailwind (``) funktioniert mit `'inherit'` ohne Weiteres. Menüs, Blasen und Hover-Karten werden in `document.body` gemountet, außerhalb des Planers. Sie tragen Farbschema und Tokens des Planers und passen daher zu ihm. ## Farben und Zustände pro Ereignis Einfache Farben brauchen kein CSS: `backColor`, `fontColor`, `borderColor`, `barColor` und `barBackColor` in den Ereignisdaten oder gesetzt in `onBeforeEventRender`. `SuperScheduler.ColorUtil.contrasting(color)` wählt eine gut lesbare Textfarbe. Für Farben, die dem Dark Mode folgen sollen, verwenden Sie besser eine Klasse pro Zustand und Komponenten-Tokens, wie im Rezept oben: `cssClass` am Ereignis, dann `--super-scheduler-event-bg`, `-event-text`, `-event-border` und `-event-bar` im CSS. Ereignisse stellen ihren Interaktionszustand außerdem als Attribute bereit: `data-hovered`, `data-dragging` und `data-resizing` am Ereignis, das gerade geändert wird, und `data-conflict` mit `conflictHighlight`. Ausgewählte Ereignisse brauchen in 0.1.0 eine eigene Klasse (siehe [Ereignisse auswählen](https://superscheduler.org/de/docs/trees-columns-selection/#event-selection)). Der dünne Dauerbalken verwendet global `--super-scheduler-duration-bar` oder pro Ereignis `--super-scheduler-event-bar`; `durationBarVisible: false` entfernt ihn. ## classNames und styles `classNames` und `styles` ergänzen benannte Teile um Klassen oder Inline-Styles. Die Slots sind `root`, `scroll`, `corner`, `timeHeader`, `timeHeaderCell`, `rowHeader`, `rowHeaderCell`, `treeToggle`, `grid`, `row`, `cell`, `event`, `eventInner`, `eventBar`, `area`, `separator`, `link`, `selection`, `shadow`, `rectangle`, `crosshair`, `dragCard`, `tooltip`, `skeleton`, `empty`, `error` und `message`. Sie akzeptieren Tailwind-Utilities ebenso wie eigene Klassennamen. Definieren Sie beide Objekte auf Modulebene oder memoisieren Sie sie, und überlassen Sie Position, Größe, Overflow und z-index der Engine: Änderungen daran stören die Trefferprüfung, die fixierten Köpfe und die Virtualisierung. `cssClass` ist eine Abkürzung für eine zusätzliche Klasse auf der Wurzel. ## Dichte `density` ändert die Standardgrößen, ohne Ihre Optionen anzutasten: | Preset | Ereignishöhe | Kopfhöhe | Außerdem | |---|---|---|---| | `'comfortable'` | 35 px | 30 px | Standardaussehen | | `'compact'` | 28 px | 26 px | `2px 4px` Innenabstand der Ereignisse, 11 px Ereignistext | | `'dense'` | 20 px | 22 px | `0 4px` Innenabstand, 10 px Text, blendet `[data-super-scheduler-part="event-meta"]` aus | Die Größen des Presets gelten nur, solange `eventHeight` und `headerHeight` ihre Standardwerte behalten; explizite Werte haben Vorrang. `control.update({ density: 'dense' })` ordnet das Layout neu an, ohne neu zu mounten. Dichte Zeilen sind auf Touchscreens schwer zu treffen; bieten Sie sie auf Smartphones als Option an, nicht als Standard. ## Ungestylter Modus Für ein vollständig eigenes Aussehen setzen Sie `unstyled` und importieren das Stylesheet nicht. Die Wurzel erhält `data-unstyled`, die Engine schreibt nur noch strukturelle Inline-Styles (Positionen, Größen, Stapelung, fixierte Köpfe), und die Live-Region für Ansagen bleibt visuell verborgen. Alles andere liegt bei Ihnen, einschließlich Fokusindikatoren, Auswahl, Hover und Unterstützung für erzwungene Farben. ## Tailwind Die Tokens sind der Vertrag; Tailwind ist eine Möglichkeit, sie zu nutzen. ### Tailwind v3 `super-scheduler/tailwind` ist ein v3-Preset. Es ergänzt Farben (`bg-super-scheduler-surface`, `text-super-scheduler-text-muted`, `bg-super-scheduler-accent/20`, `text-super-scheduler-ink/60`, ...), Radien (`rounded-super-scheduler`, `rounded-super-scheduler-event`), Schatten (`shadow-super-scheduler-1` bis `-3`) sowie `duration-super-scheduler` / `ease-super-scheduler`. ```ts // tailwind.config.ts import superSchedulerPreset from 'super-scheduler/tailwind' // Tailwind v3. The preset adds colors, radii, shadows and easing utilities that read the // --super-scheduler-* tokens (bg-super-scheduler-surface, rounded-super-scheduler-event...), // so they follow the scheduler's light and dark values. // In a CommonJS config: presets: [require('super-scheduler/tailwind')]. export default { content: ['./index.html', './src/**/*.{ts,tsx}'], darkMode: 'class', presets: [superSchedulerPreset], } ``` Das Preflight von Tailwind v3 liegt außerhalb jedes Layers und würde daher die Rahmen der Bibliothek in ihrem Layer überstimmen. Legen Sie das Preflight in einen Layer unterhalb der Bibliothek: ```css @layer tw-base, super-scheduler; @import 'super-scheduler/styles.css'; @layer tw-base { @tailwind base; } @tailwind components; @tailwind utilities; ``` ### Tailwind v4 Tailwind v4 hat keine Presets: Ordnen Sie die Tokens in `@theme inline` zu, nachdem Sie die Reihenfolge der Layer deklariert haben. Inline-Zuordnungen lesen den nächstgelegenen Token-Wert, sodass verschachtelte dunkle Themes funktionieren, und auch Deckkraft-Modifikatoren wie `bg-super-scheduler-accent/20` funktionieren. ```css @layer theme, base, super-scheduler, components, utilities; @import 'tailwindcss'; @import 'super-scheduler/styles.css'; @custom-variant dark (&:where(.dark, .dark *)); @theme inline { --color-super-scheduler-surface: var(--super-scheduler-surface); --color-super-scheduler-surface-raised: var(--super-scheduler-surface-raised); --color-super-scheduler-text: var(--super-scheduler-text); --color-super-scheduler-text-muted: var(--super-scheduler-text-muted); --color-super-scheduler-border: var(--super-scheduler-border); --color-super-scheduler-border-strong: var(--super-scheduler-border-strong); --color-super-scheduler-grid-line: var(--super-scheduler-grid-line); --color-super-scheduler-grid-break: var(--super-scheduler-grid-break); --color-super-scheduler-row-line: var(--super-scheduler-row-line); --color-super-scheduler-accent: var(--super-scheduler-accent); --color-super-scheduler-accent-emphasis: var(--super-scheduler-accent-emphasis); --color-super-scheduler-accent-soft: var(--super-scheduler-accent-soft); --color-super-scheduler-accent-text: var(--super-scheduler-accent-text); --color-super-scheduler-accent-border: var(--super-scheduler-accent-border); --color-super-scheduler-on-accent: var(--super-scheduler-on-accent); --color-super-scheduler-ink: rgb(var(--super-scheduler-ink-rgb)); --color-super-scheduler-danger: var(--super-scheduler-danger); --color-super-scheduler-danger-soft: var(--super-scheduler-danger-soft); --color-super-scheduler-warning: var(--super-scheduler-warning); --color-super-scheduler-warning-soft: var(--super-scheduler-warning-soft); --color-super-scheduler-success: var(--super-scheduler-success); --color-super-scheduler-today-bg: var(--super-scheduler-today-bg); --color-super-scheduler-weekend-bg: var(--super-scheduler-weekend-bg); --color-super-scheduler-non-business-bg: var(--super-scheduler-non-business-bg); --color-super-scheduler-group: var(--super-scheduler-group); --color-super-scheduler-group-row: var(--super-scheduler-group-row); --color-super-scheduler-hover-row: var(--super-scheduler-hover-row); --color-super-scheduler-hover-cell: var(--super-scheduler-hover-cell); --color-super-scheduler-selection: var(--super-scheduler-selection); --color-super-scheduler-selection-border: var(--super-scheduler-selection-border); --color-super-scheduler-focus-ring: var(--super-scheduler-focus-ring); --color-super-scheduler-micro-bar: var(--super-scheduler-micro-bar); --color-super-scheduler-duration-bar: var(--super-scheduler-duration-bar); --color-super-scheduler-hatch: var(--super-scheduler-hatch); --color-super-scheduler-overlay: var(--super-scheduler-overlay); --color-super-scheduler-overlay-text: var(--super-scheduler-overlay-text); --color-super-scheduler-overlay-muted: var(--super-scheduler-overlay-muted); --color-super-scheduler-overlay-subtle: var(--super-scheduler-overlay-subtle); --color-super-scheduler-overlay-border: var(--super-scheduler-overlay-border); --color-super-scheduler-skeleton-base: var(--super-scheduler-skeleton-base); --color-super-scheduler-skeleton-highlight: var(--super-scheduler-skeleton-highlight); --radius-super-scheduler: var(--super-scheduler-radius, 12px); --radius-super-scheduler-event: var(--super-scheduler-event-radius, 8px); --shadow-super-scheduler-1: var(--super-scheduler-shadow-1); --shadow-super-scheduler-2: var(--super-scheduler-shadow-2); --shadow-super-scheduler-3: var(--super-scheduler-shadow-3); --ease-super-scheduler: var(--super-scheduler-ease); --ease-super-scheduler-spring: var(--super-scheduler-ease-spring); } ``` ## Themes in Lite Lite (`super-scheduler-lite/styles.css`) hat sechs Tokens: `--super-scheduler-background`, `-text`, `-border`, `-header`, `-event` und `-focus`. Sie sind auf dem Element `.super-scheduler-lite` selbst deklariert; setzen Sie sie also auf diesem Element, nicht an einem Vorfahren: ```css .bookings .super-scheduler-lite { --super-scheduler-event: #dcfce7; --super-scheduler-focus: #15803d; } .dark .bookings .super-scheduler-lite { --super-scheduler-background: #111827; --super-scheduler-text: #f3f4f6; --super-scheduler-border: #374151; --super-scheduler-header: #1f2937; --super-scheduler-event: #14532d; } ``` Lite hat kein eingebautes dunkles Farbschema; die dunklen Werte deklarieren Sie also selbst. Auch sein Stylesheet liegt in einem Layer, und es passt Rahmen und Fokus an erzwungene Farben an. Pro Ereignis akzeptiert Lite `backColor`, `fontColor` und `cssClass`. ## Was Ihrer Anwendung gehört - Der Kontrast jeder Farbe, die Sie einführen, im hellen, dunklen und kontrastreichen Modus. - Der Theme-Umschalter selbst: wohin die Klasse `dark` oder `data-theme` kommt oder welches `colorScheme` Sie übergeben. - Styles für eigene Inhalte (HTML aus Hooks, React-Slots, Hover-Karten): Verwenden Sie die Tokens, damit sie dem Farbschema folgen. - Die Prüfung Ihrer Überschreibungen nach Updates. Tokens und Teil-Selektoren sind der stabile Vertrag; die interne Reihenfolge der Klassen und das Markup zwischen den Teilen sind es nicht. ## Siehe auch → https://superscheduler.org/de/examples/sports-club-courts/ → https://superscheduler.org/de/examples/festival-stages/ → https://superscheduler.org/de/examples/hotel-rooms/ - [Tastatur, Barrierefreiheit und Touch](https://superscheduler.org/de/docs/keyboard-accessibility-touch/#motion-contrast) zu reduzierter Bewegung, hohem Kontrast und erzwungenen Farben. - [React-Render-Slots und Hover-Karten](https://superscheduler.org/de/docs/react-render-slots/) zu den Tokens der Hover-Karten.