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

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

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

1.8 KiB Raw Blame History Unescape Escape