Summary
The current dark mode toggle (added in #19) writes `pm-color-scheme` as either `"dark"` or `"light"` on every click. Once a user clicks the toggle, there is no UI path to return to the `"absent"` state (follow OS `prefers-color-scheme`). Users must manually clear `localStorage` via DevTools to restore system-following behavior.
Current behavior
| localStorage value |
Behavior |
| `"dark"` |
Force dark |
| `"light"` |
Force light |
| absent |
Follow OS |
The toggle cycles between `"dark"` ↔ `"light"` only. `"absent"` is never written.
Proposed behavior
Add a third state to the toggle: light → system → dark → light (or a dedicated reset affordance). Writing `"system"` (or clearing the key) to localStorage would return to OS-following mode.
Scope
- Update `dark-mode.js` to support a three-state cycle or explicit reset
- Update FOUC prevention script to handle a `"system"` stored value (treat as absent)
- Update STYLE.md section 3 localStorage key table and toggle button documentation
- Add tests
References
Summary
The current dark mode toggle (added in #19) writes `pm-color-scheme` as either `"dark"` or `"light"` on every click. Once a user clicks the toggle, there is no UI path to return to the `"absent"` state (follow OS `prefers-color-scheme`). Users must manually clear `localStorage` via DevTools to restore system-following behavior.
Current behavior
The toggle cycles between `"dark"` ↔ `"light"` only. `"absent"` is never written.
Proposed behavior
Add a third state to the toggle: light → system → dark → light (or a dedicated reset affordance). Writing `"system"` (or clearing the key) to localStorage would return to OS-following mode.
Scope
References