Dark Mode mit CSS Custom Properties
Veröffentlicht am 15. März 2026 von Xanweb
Dark Mode muss nicht komplex sein. Replica Modern zeigt wie es elegant geht.
Statt JavaScript-Klassen-Toggling setzt Replica Modern auf einen einzigen HTML-Attribut-Wechsel: data-theme="dark" auf dem <html>-Tag. Die gesamte visuelle Transformation passiert dann rein in CSS.
/* Im Skin definiert */
[data-theme="dark"] {
--rp-bg: #0A0B10;
--rp-text-1: #F0F0F5;
}Das Ergebnis: keine JavaScript-Abhängigkeit für das visuelle Rendering, kein Flash of Unstyled Content, perfekte Performance.