Dark Mode
SlateUI provides built-in dark mode support through the @slateui/theme package. This package offers automatic dark mode detection, theme switching, and persistent theme preferences.
Package Information
The dark mode functionality is provided by the @slateui/theme package:
@slateui/theme
Theme management and dark mode support for SlateUI
Basic Setup
Configure the theme service in your Angular application by importing provideSlateUiTheme from @slateui/theme and adding it to your app providers.
Theme Strategies
SlateUI supports multiple theme strategies:
Class Strategy (Recommended)
Uses CSS classes to control theme switching. This gives you full control over when and how themes change.
Media Strategy
Automatically follows the system preference without user control.
Basic Usage
Inject the ThemeService in your components to control theme switching. Use methods like setTheme(), isDark(), and isLight() to manage themes.
Available Methods
| Method | Description |
|---|---|
| setTheme(theme) | Set theme to 'light', 'dark', or 'system' |
| getTheme() | Get current theme setting |
| isDark() | Check if dark mode is active |
| isLight() | Check if light mode is active |
CSS Variables
SlateUI automatically manages CSS custom properties for theming. The system provides variables for:
- Background and foreground colors
- Primary, secondary, and accent colors
- Muted and destructive colors
- Border, input, and ring colors
Tailwind CSS Integration
Use theme-aware colors in your Tailwind classes like bg-background, text-foreground, text-primary, etc.
Learn More
For more advanced usage and configuration options:
Built with ❤️ by @immohammadjaved • Source code available on GitHub