# Global Theme Mode System ## Overview The CRM admin panel now supports a global Dark/Light theme mode that applies to all Filament pages, including the Dashboard (chat workspace), all resource pages, and all custom pages. ## How It Works ### localStorage Key - `crm-theme` — stores the user's selected theme - Allowed values: `dark` (default), `light` ### CSS Classes on `` - `crm-theme-dark` — dark mode variables applied - `crm-theme-light` — light mode variables applied - `dark` — Filament's built-in dark mode class (also toggled to support Tailwind `dark:` classes) ### Theme Script - **File**: `public/js/crm-theme.js` - Loaded globally on all admin pages via `AdminPanelProvider` render hooks - Inline script in `` prevents flash of wrong theme - Exposes `window.crmTheme` API: `getTheme()`, `setTheme(theme)`, `toggle()`, `updateToggleButton()` ### Theme CSS - **File**: `public/css/crm-theme.css` - Loaded globally on all admin pages - Defines CSS variables for both `crm-theme-dark` and `crm-theme-light` on `` - All components use these CSS variables instead of fixed colors ## Files Changed | File | Change | |------|--------| | `app/Providers/Filament/AdminPanelProvider.php` | Changed `darkMode(true, true)` to `darkMode(true)` to remove Filament's built-in toggle | | `public/js/crm-theme.js` | Global theme manager with localStorage persistence and class toggling | | `public/css/crm-theme.css` | Complete dark/light CSS variable system for all Filament components | | `public/css/chat-workspace.css` | Changed `body.light` selectors to `html.crm-theme-light` for global compatibility | | `resources/views/filament/pages/chat-workspace.blade.php` | Theme toggle now uses `window.crmTheme.toggle()` instead of `document.body.classList.toggle('light')` | ## How to Test 1. Open `/admin` (Dashboard) 2. Click the theme toggle button next to the role box 3. Verify the workspace switches between dark and light modes 4. Navigate to `/admin/conversations` — verify theme persists 5. Navigate to `/admin/waiting-list` — verify theme persists 6. Navigate to `/admin/users` — verify theme persists 7. Refresh the browser — verify theme persists 8. Switch to the other mode — verify all pages respond 9. Verify sidebar stays on the right in both modes 10. Verify role display remains separate from theme mode ## CSS Variable Reference ### Dark Mode (`crm-theme-dark`) | Variable | Value | |----------|-------| | `--crm-bg` | `#0f172a` | | `--crm-bg-deep` | `#020617` | | `--crm-panel` | `#1e293b` | | `--crm-text` | `#f8fafc` | | `--crm-accent` | `#22c55e` | ### Light Mode (`crm-theme-light`) | Variable | Value | |----------|-------| | `--crm-bg` | `#f8fafc` | | `--crm-bg-deep` | `#ffffff` | | `--crm-panel` | `#ffffff` | | `--crm-text` | `#0f172a` | | `--crm-accent` | `#16a34a` |