Mehrere Marken und Dunkelmodus

Multi-Brand & Dark Mode Architecture

Dark mode and multi-brand theming are not achieved by scattering .dark .card { background: #111 } overrides across hundreds of component files. Build theming on semantic token remapping so components remain completely theme-agnostic.

1. Semantic Token Remapping (Single Component Stylesheet)

A component should reference background: var(--bg-surface-raised); color: var(--text-primary); border-color: var(--border-subtle); once, while theme scopes (:root, [data-theme="dark"], @media (prefers-color-scheme: dark), [data-brand="..."]) redefine the semantic token values:

• Elevation in Dark Mode vs. Light Mode:
  • In light mode, elevation is primarily communicated through drop shadows against a light canvas.
  • In dark mode, black drop shadows are nearly invisible against a dark canvas; communicate elevation by making higher surfaces progressively lighter (--bg-canvas: #0b0d12 -> --bg-surface: #12161f -> --bg-surface-raised: #1a202c -> --bg-surface-overlay: #222938) paired with a subtle top/inner border highlight (--border-subtle).
• Desaturate Accent & Status Colors for Dark Surfaces:
  • A saturated #dc2626 red or #2563eb blue that passes contrast on white often vibrates harshly and fails 4.5:1 contrast as text on dark backgrounds. Map --status-danger-text, --status-success-text and --accent-text to lighter, slightly desaturated ramps in dark mode.

2. Native Browser Integration (color-scheme)

Always set the CSS color-scheme property (color-scheme: light dark, or color-scheme: dark on [data-theme="dark"]):

• Ensures native browser scrollbars, form controls (<input type="date">, <select> dropdowns, checkboxes), autofill backgrounds and system fallback backgrounds match the active theme.
• Prevent Flash of Unstyled/Wrong Theme (FOUC): resolve the persisted theme preference (localStorage) + window.matchMedia('(prefers-color-scheme: dark)') synchronously in <head> before first paint so dark-mode users never see a blinding white flash on reload.

3. Images, Icons, Shadows & Forced-Colors Resilience

• Icons & SVGs: use fill="currentColor" / stroke="currentColor" on monochrome icons so they inherit semantic text tokens automatically across themes.
• Logos & illustrations: provide theme-aware variants (<picture> with media="(prefers-color-scheme: dark)" or CSS token variables inside inline SVGs) so dark logos never disappear against dark surfaces.
• Windows High Contrast / forced-colors: active:
  • Because forced-colors strips box-shadow and background color fills, ensure cards, modals, inputs, toggle switches and active tabs retain a real CSS border or outline (border: 1px solid transparent in standard themes becomes visible automatically in forced-colors mode).