Themes, Tokens, Tailwind und Dark Mode

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 behandelt Lite.

#Der CSS-Vertrag

Importieren Sie das Stylesheet einmal, neben dem eigenen CSS Ihrer Anwendung:

@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.

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"]):

• 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:

.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.

.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:

: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:

.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);
}

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<SchedulerProps['onBeforeEventRender']> = (args) => {
  const job = args.data as SuperScheduler.EventRenderData<Job>
  args.data.cssClass = `job job--${job.status}`
}

export function BrandedPlanner(props: {
  theme: 'light' | 'dark'
  resources: SuperScheduler.ResourceData[]
  jobs: SuperScheduler.EventData<Job>[]
}) {
  const events = useMemo(() => props.jobs.slice(), [props.jobs])
  return (
    <SuperSchedulerComponent
      // Extra class on the control root: the brand CSS targets `.brand[data-color-scheme=...]`.
      cssClass="brand"
      // Follows the application's own theme switch.
      colorScheme={props.theme}
      density="compact"
      classNames={CLASS_NAMES}
      styles={STYLES}
      onBeforeEventRender={statusClass}
      startDate="2026-10-01"
      days={31}
      scale="Day"
      resources={props.resources}
      events={events}
    />
  )
}

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).

#Farbschema und Dark Mode

colorScheme wird als data-color-scheme an die Wurzel geschrieben:

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 (<html class="dark">) 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). 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:

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.

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:

@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.

@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:

.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

Platzbuchung im SportclubAm Vormittag reißt ein Padel-Netz. Kurs verschieben, Platz sperren und jeden Coach in seinem Dienst lassen. Bühnenplanung für ein FestivalEin Linecheck ragt in den Puffer vor einem Auftritt. Auf fünf Minuten zoomen, kürzen und sehen, welche Räume und Crews am Act hängen. Zimmerplanung im HotelIn Zimmer 104 tropft die Dusche. Buchen Sie den nächsten Gast um, sperren Sie das Zimmer für den Installateur und finden Sie die ausgebuchten Nächte.

• Tastatur, Barrierefreiheit und Touch zu reduzierter Bewegung, hohem Kontrast und erzwungenen Farben.
• React-Render-Slots und Hover-Karten zu den Tokens der Hover-Karten.