All Features
Security
UI/UX
System
Content
Business
Marketing
🎨
Admin SettingsUI/UX
Theme System
Light, dark, and system-aware themes with smooth transitions
Overview
Complete theming system with CSS custom properties. Supports light, dark, and system preference modes. User choice persisted in cookies. Beautiful transition animations between modes.
Design Considerations
UX patterns and visual design notes for this feature:
- •Dark mode isn't just inverted colors - it's a whole vibe
- •Test contrast ratios in both modes (WCAG AA minimum)
- •Transition duration: 200-300ms feels natural
- •System mode respects user's OS preference
Key Benefits
What makes this feature stand out:
- ✓Three modes: light, dark, system
- ✓Zero flash on page load
- ✓CSS variables for easy customization
- ✓Multiple widget styles (floating, dropdown, toggle)
Technical Note
ThemeHelper manages state. CSS uses [data-theme="dark"] selector. Widget renders in header via params['header']['widgets']['theme'].
Helpers
ThemeHelperConfiguration
Config Relationship Legend
⚙ DB overrides params.php🔗 DB related setting📋 DB stores value only
params.php Configuration
Config path: params['theme']
params['theme']['default'] => 'system'params['theme']['enableTransition'] => trueparams['theme']['persistChoice'] => trueparams['theme']['widget']['type'] => 'floating'params['theme']['widget']['position'] => 'top-right'Database Settings (system_setting table)
| Key | Type | Description | Relation |
|---|---|---|---|
default_theme | string | Default theme (light/dark/system) | ⚙ |