🎨 Theme System Demo

Demonstrating light and dark theme capabilities

Theme Switcher

☀️

Light Theme Active

Click the button to switch

Color Palette

Primary Colors

Status Colors

Buttons

Alerts

✓ Success message
⚠ Warning message
✗ Danger message
ℹ Info message

Badges

Primary Secondary
Success Warning
Danger Info

Form Elements

Table Example

Name Status Risk Level Date
Assessment 1 Completed Low 2026-01-09
Assessment 2 Pending Medium 2026-01-08
Assessment 3 Overdue High 2026-01-07

Typography

Heading 1

Heading 2

Heading 3

Heading 4

This is primary text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is secondary text. Sed do eiusmod tempor incididunt ut labore.

This is muted text. Ut enim ad minim veniam, quis nostrud exercitation.

This is a link This is inline code

Stats Grid

247
Total Assessments
18
Pending Actions
5
High Risk Items
42
Active Locations

JavaScript API

The theme system provides a JavaScript API:

toggleTheme() | setTheme('dark') | getTheme() | isDarkTheme()