# 🌓 Mobility-IT Theme Toggle System

Experience the power of dynamic dark and light mode switching

### 🎯 How to Use:

- Click the theme toggle button in the top navigation bar to switch between themes
- Keyboard shortcut: Press Ctrl/Cmd + T to toggle themes
- Auto-detection: The system automatically detects your OS theme preference
- Persistent: Your theme choice is saved and remembered across sessions
- Responsive: On mobile, the toggle appears as an icon-only button

## 🧭 Navigation Bar Integration

The theme toggle button is now integrated into the top navigation bar with enhanced borders and shadows for better visibility.

## ✨ Theme Features

🎨

### Dynamic Color System

CSS custom properties automatically adjust all colors, backgrounds, and borders based on the selected theme.

🔄

### Smooth Transitions

Beautiful 300ms transitions when switching between themes for a polished user experience.

💾

### Persistent Storage

Your theme preference is automatically saved in localStorage and restored on page reload.

🌐

### System Integration

Automatically detects and follows your operating system's dark/light mode preference.

📱

### Responsive Design

Theme toggle button automatically repositions based on sidebar state and screen size.

♿

### Accessibility

Full keyboard support, ARIA labels, and screen reader compatibility.

## 🎨 Theme Color Palette

Primary Background
var(--bg-primary)
Secondary Background
var(--bg-secondary)
Accent Color
var(--accent-primary)
Success Color
var(--success-color)
Warning Color
var(--warning-color)
Danger Color
var(--danger-color)

## 📊 Table Component Demo

## Sample Data Table

ID | Name | Status | Category | Value
--- | --- | --- | --- | ---
001 | MacBook Pro 13" | Ready to Deploy | Laptops | $1,299
002 | Dell XPS 15 | Deployed | Laptops | $1,599
003 | iPhone 14 Pro | Ready to Deploy | Mobile Devices | $999
004 | Samsung Galaxy S23 | Deployed | Mobile Devices | $799
005 | iPad Air | Ready to Deploy | Tablets | $599

## 📈 Dashboard Cards Demo

### 2,547

Total Assets

View Details

### 156

Licenses

View Details

### 89

Accessories

View Details

## 📊 Dashboard Panels Demo

## Recent Activity

Date | Admin | Action | Item
--- | --- | --- | ---
2025-08-15 03:26 AM | Admin User | checkout | Macbook Pro 13"
2025-08-15 02:32 AM | Admin User | checkout | XPS 13

## Assets by Status

📊 Pie Chart Placeholder
Ready to Deploy: 2,498
Pending: 49

## 🔧 Technical Implementation

⚡

### CSS Custom Properties

Uses CSS variables for dynamic theming with fallback support for older browsers.

🔄

### JavaScript Class

ES6 class-based ThemeManager handles all theme operations and state management.

🎯

### Event-Driven

Custom events allow other components to react to theme changes seamlessly.

📱

### Responsive Logic

Automatic positioning adjustments based on sidebar state and viewport changes.