ZardUI implements a robust dark mode system using @custom-variant dark from TailwindCSS v4 combined with an Angular DarkModeService for state management and persistence.
Current Implementation
The current system works by applying the .dark class to the root HTML element, activating all dark style variations defined in the components.
DarkMode Service
The core of the system is an Angular service that manages theme state, persistence, and CSS class application.
Usage in Application
See how the service is used in the AppComponent for initialization and in the HeaderComponent for toggle control.
App Component
Header Component
Interactive Demo
Test the dark mode system in action and see how components react to theme changes.
Theme Control
Current theme: system
Card Example
This card automatically changes with the theme.
Muted Background
Background with responsive opacity.
Primary Colors
Primary colors adapted to theme.