# App.vue & DashboardPage.vue - Dark/Light Mode Integration Test

## Quick Test Instructions

### 1. **Manual Theme Toggle Test**

```
1. Start the app:
   pnpm dev

2. Navigate to app (after login)

3. Click "Thème" (Theme) button in top-right navbar

4. Expected behavior:
   ✅ Dropdown menu appears
   ✅ Shows 3 options: "Automatique", "Clair", "Sombre"
   ✅ Current theme has checkmark indicator
   ✅ Icons update (sun/moon/auto)

5. Click "Clair" (Light Mode):
   ✅ Entire app turns light
   ✅ Navbar background changes
   ✅ Hero section on Dashboard updates
   ✅ Text becomes dark
   ✅ Colors are readable

6. Click "Sombre" (Dark Mode):
   ✅ Entire app turns dark
   ✅ Navbar background darkens
   ✅ Hero section on Dashboard darkens
   ✅ Text becomes light
   ✅ Glows and shadows visible

7. Click "Automatique" (Auto):
   ✅ App respects system dark mode setting
   ✅ If OS is in dark mode → app is dark
   ✅ If OS is in light mode → app is light
```

### 2. **Accent Color Test**

```
1. Keep theme menu open

2. Scroll to "Couleur d'accent" section

3. Expected: 6 colored swatches (blue, purple, pink, green, orange, red)

4. Click each color:
   ✅ Primary button color changes
   ✅ Accents throughout UI update
   ✅ Quasar components reflect new color
   ✅ Badge colors update

5. Verify contrast is readable in both light & dark modes
```

### 3. **Persistence Test**

```
1. Set theme to "Sombre" (Dark)
2. Select accent color "orange"
3. Reload the page (Cmd+R)
4. Expected: 
   ✅ App loads in dark mode immediately (no flash)
   ✅ Orange accent color is still active

5. Close browser tab
6. Reopen app
7. Expected:
   ✅ Dark mode + orange accent restored
   ✅ Settings persisted in localStorage

8. Check localStorage:
   Open DevTools → Application → LocalStorage
   ✅ Key "my-roadtrip-theme" = "dark"
   ✅ Key "my-roadtrip-accent" = "orange"
```

### 4. **System Preference Test**

```
1. Set app to "Automatique" (Auto)

2. macOS:
   System Preferences → General → Appearance
   Toggle between "Light" and "Dark"
   → App should switch automatically

3. Windows:
   Settings → Personalization → Colors
   Toggle "Light" and "Dark"
   → App should switch automatically

4. Linux:
   gsettings set org.gnome.desktop.interface gtk-application-prefer-dark-theme true
   gsettings set org.gnome.desktop.interface gtk-application-prefer-dark-theme false
   → App should switch automatically
```

### 5. **Dashboard Page Test**

```
1. Log in and navigate to Dashboard

2. In Light Mode:
   ✅ Hero section has light background
   ✅ Title and text are dark/readable
   ✅ "New Plan" button is visible
   ✅ Spotlight card is light
   ✅ Metrics section readable

3. Switch to Dark Mode:
   ✅ Hero section has dark background
   ✅ Title and text are light/readable
   ✅ "New Plan" button contrasts well
   ✅ Spotlight card is darker
   ✅ Metrics section readable

4. Switch accent colors while on Dashboard:
   ✅ Primary button color changes
   ✅ Icons and accents update
   ✅ No refresh needed (instant update)
```

### 6. **CSS Variables Verification**

```javascript
// Open DevTools → Console and run:

// Check current theme
const html = document.documentElement;
console.log('Current theme:', html.dataset.theme);
console.log('Current theme class:', html.className);

// Check CSS variables are applied
const styles = getComputedStyle(html);
console.log('Primary color:', styles.getPropertyValue('--color-primary'));
console.log('BG color:', styles.getPropertyValue('--color-bg-base'));
console.log('Text color:', styles.getPropertyValue('--color-text-primary'));

// Check localStorage
console.log('Theme saved:', localStorage.getItem('my-roadtrip-theme'));
console.log('Accent saved:', localStorage.getItem('my-roadtrip-accent'));
```

### 7. **Navbar Components Test**

```
1. Toggle theme multiple times:
   ✅ Navbar background updates smoothly
   ✅ Buttons change style
   ✅ Badges (sync, notifications) remain visible
   ✅ No flickering or color flashes

2. Check Navbar in all states:
   ✅ Online: Cloud icon visible
   ✅ Offline: WiFi-off icon, badge shows queue count
   ✅ Syncing: Spinning sync icon

3. Check buttons:
   ✅ Theme button icon matches current mode
   ✅ Account menu button visible
   ✅ Notifications button with red badge
   ✅ All buttons have proper hover effects
```

### 8. **Mobile Responsiveness**

```
1. Open DevTools → Device Toolbar (mobile view)

2. Toggle theme:
   ✅ Works on mobile
   ✅ Menu doesn't break layout
   ✅ Text is readable
   ✅ Buttons are tappable

3. Rotate device:
   ✅ Theme is maintained
   ✅ Layout adapts properly
```

---

## Expected Results

### ✅ All Tests Pass If:

1. **Theme persists** across page reloads
2. **System preference is detected** in auto mode
3. **All colors update** when theme changes
4. **No hardcoded colors** are visible
5. **Contrast is readable** in both modes
6. **Accent colors work** as expected
7. **Quasar components respond** to dark mode
8. **Navigation works** in all themes
9. **Dashboard page updates** properly
10. **No console errors** related to theming

---

## Common Issues & Fixes

### Issue: Theme doesn't persist
**Fix:** Check localStorage is not blocked
```javascript
// In DevTools console:
localStorage.setItem('test', 'value')
localStorage.getItem('test')  // Should return 'value'
```

### Issue: Hardcoded colors still visible
**Fix:** Clear browser cache and reload
- Windows: Ctrl+Shift+Delete
- Mac: Cmd+Shift+Delete
- or use `pnpm dev` --force rebuild

### Issue: System preference not detected
**Fix:** Ensure app is in "auto" mode
```javascript
const { currentTheme } = useTheme()
console.log(currentTheme.value)  // Should be 'auto'
```

### Issue: Colors look washed out
**Fix:** Check contrast ratios
- Light mode text should be dark
- Dark mode text should be light
- If unreadable, verify CSS variables are loaded

### Issue: Navbar flickers on load
**Fix:** Verify useTheme() is initialized on mount
- Check App.vue line ~321: `const { ... } = useTheme()`
- Verify onMounted hooks are firing

---

## CSS Variables Checklist

Verify these CSS variables exist and update properly:

- [ ] `--color-primary` (changes with theme)
- [ ] `--color-bg-base` (changes with theme)
- [ ] `--color-bg-elevated` (changes with theme)
- [ ] `--color-text-primary` (changes with theme)
- [ ] `--color-text-secondary` (changes with theme)
- [ ] `--color-border-primary` (changes with theme)
- [ ] `--color-border-secondary` (changes with theme)
- [ ] `--shadow-lg` (changes with theme)
- [ ] `--shadow-glow` (changes with theme)
- [ ] `--color-success` (green, consistent)
- [ ] `--color-error` (red, consistent)
- [ ] `--color-warning` (yellow, consistent)

---

## Browser DevTools Inspection

### Check Navbar in Inspector

```html
<!-- Light mode -->
<q-header 
  class="navbar-futuristic"
  style="data-theme: light"
  style="color-scheme: light"
>

<!-- Dark mode -->
<q-header 
  class="navbar-futuristic"
  style="data-theme: dark"
  style="color-scheme: dark"
>
```

### Check Computed Styles

1. Right-click navbar
2. Select "Inspect"
3. Check "Styles" panel:
   - Should show CSS variables from `themes.css`
   - Colors should match current theme
   - Gradients should use CSS variables

---

## Performance Verification

```javascript
// Check for layout thrashing
performance.mark('theme-change-start')
setTheme('dark')
performance.mark('theme-change-end')
performance.measure('theme-change', 'theme-change-start', 'theme-change-end')
console.log(performance.getEntriesByName('theme-change')[0].duration) // Should be < 16ms
```

**Expected:** Theme change completes in < 50ms

---

## Accessibility Verification

```javascript
// Check contrast ratios (WCAG AA standard is 4.5:1 for text)

// Light mode text on light background
const lightText = getComputedStyle(element);
// Verify contrast ≥ 4.5:1

// Dark mode text on dark background
const darkText = getComputedStyle(element);
// Verify contrast ≥ 4.5:1
```

Use tools: https://webaim.org/resources/contrastchecker/

---

## Success Criteria

✅ **Task Complete If:**

1. Theme toggle works in navbar
2. Both light and dark modes are readable
3. Accent colors update properly
4. System preference is detected
5. Theme persists across reloads
6. DashboardPage updates with theme
7. No hardcoded colors visible
8. All CSS variables are used
9. Quasar components theme correctly
10. No console errors

---

**Last Updated:** October 31, 2025  
**Status:** ✅ Ready for Testing
