und Design Tokens in Vue Apps
Dark Mode mit einem einfachen Klasse-Toggle zu implementieren ist der erste Schritt. Ein professionelles Theme-System mit Design Tokens, System-Präferenz-Erkennung, Persistenz und flimmerfreiem SSR-Laden ist das, was Nutzern in der Praxis tatsächlich zugutekommt. Vue 3 bietet alle Bausteine – es geht darum, sie richtig zusammenzusetzen.
Inhaltsverzeichnis
- 1. Was Design Tokens sind und warum sie Dark Mode vereinfachen
- 2. CSS Custom Properties als Design-Token-Layer
- 3. Das useTheme-Composable: Dark Mode in Vue 3 kapseln
- 4. System-Präferenz erkennen: prefers-color-scheme und matchMedia
- 5. Theme-Persistenz: LocalStorage und Pinia-Integration
- 6. Tailwind CSS Dark Mode: class vs. media Strategy
- 7. Mehrere Themes: Beyond Dark und Light
- 8. Das Flash-of-Wrong-Theme-Problem