# Permanent Dark Mode Fix — 4-Page Web App

## Context from session (May 31, 2026)

A static web app with 4 pages (Dashboard, Repair Orders, Customers, Appointments) using Tailwind CSS with `darkMode: 'class'` config. The user wanted to permanently remove light mode and the dark mode toggle.

## Files Modified

### JS Files (9 toggle points → `classList.add('dark')`)

| File | Line | What Changed |
|------|------|-------------|
| `ui.js` | handleDarkModeToggle | Changed entire function to always add dark class |
| `ui.js` | initializeDarkMode else branch | Changed from remove dark to add dark |
| `shared/header-functionality.js` | Lines 123, 145 (×2) | `toggle('dark', e.target.checked)` → `add('dark')` |
| `dashboard.js` | Line 236 | `toggle('dark', dark)` → `add('dark')` |
| `customers.js` | Line 63 | `toggle('dark', val)` → `add('dark')` |
| `settings.js` | applyDarkModeLocally | `toggle('dark', isDark)` → `add('dark')` |
| `settings.js` | site-dark-mode change handler | `toggle('dark', checked)` → `add('dark')` |
| `settings.js` | remote settings sync | `toggle('dark', dark)` → `add('dark')` |

### HTML Files (toggle removal)

| File | Changes |
|------|---------|
| `index.html` | Removed header toggle + mobile dropdown toggle |
| `repair-orders.html` | Same |
| `customers.html` | Same |
| `appointments.html` | Same |

### CSS Files

`style.css` had aggressive override rules added at the top (body background, .bg-white, .text-gray-*, .border-gray-*, etc.) but these were ultimately not needed once all JS toggle points were patched. They were left in as a safety net but the real fix was the JS patches.

### Search Pattern for Finding All Toggle Points

```bash
grep -rn "classList.*toggle.*dark\|classList.*remove.*dark" *.js shared/*.js
```

Result showed 9 hits across 5 files (see table above).