ZardUI implements a robust dark mode system using @custom-variant dark from TailwindCSS v4 combined with an Angular Dark Mode Service 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.
Dark Mode Service
The core of the system is an Angular service that manages theme state, persistence, and CSS class application. To install it, use CLI:
npx @ngzard/ui add dark-modepnpm dlx @ngzard/ui add dark-modeyarn @ngzard/ui add dark-modebunx @ngzard/ui add dark-modeIt will also update index.html to set appropriate dark mode theme before Angular is initialized and rendered.
Usage in Application
The service is initialized within index.html . The HeaderComponent contains an example of how to use the service for toggle control.
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.