fix(ui): persist light/dark mode preference across page reloads #19

Merged
casper-stevens merged 1 commit from development_fix_theme_persistence into development 2026-04-14 22:30:46 +00:00
Member

Summary

  • Removes hard-coded data-bs-theme="dark" from the <html> tag
  • Adds a blocking inline script as the first element in <head> that reads localStorage.getItem('heroSlidesTheme') and sets data-bs-theme before any CSS is parsed, preventing a flash of the wrong theme
  • Adds localStorage.setItem in the existing toggle click handler to persist the selection
  • Syncs the toggle button icon to the restored theme on initial load

Closes #17

Changes

  • crates/hero_slides_ui/templates/base.html — removed hard-coded theme attribute; added blocking localStorage init script in <head>
  • crates/hero_slides_ui/static/js/dashboard.js — persist theme on toggle; sync icon on load

Test Results

75 tests run, 74 passed, 0 failed (1 ignored — requires live AI service)

## Summary - Removes hard-coded `data-bs-theme="dark"` from the `<html>` tag - Adds a blocking inline script as the first element in `<head>` that reads `localStorage.getItem('heroSlidesTheme')` and sets `data-bs-theme` before any CSS is parsed, preventing a flash of the wrong theme - Adds `localStorage.setItem` in the existing toggle click handler to persist the selection - Syncs the toggle button icon to the restored theme on initial load ## Related Issue Closes https://forge.ourworld.tf/lhumina_code/hero_slides/issues/17 ## Changes - `crates/hero_slides_ui/templates/base.html` — removed hard-coded theme attribute; added blocking localStorage init script in `<head>` - `crates/hero_slides_ui/static/js/dashboard.js` — persist theme on toggle; sync icon on load ## Test Results 75 tests run, 74 passed, 0 failed (1 ignored — requires live AI service)
fix(ui): persist light/dark mode preference across page reloads
Some checks failed
Test / test (push) Failing after 1m4s
Test / test (pull_request) Failing after 1m24s
cea7d4170d
Writes the selected theme to localStorage on toggle and applies the
stored value immediately in <head> before first paint, eliminating
the flash of the wrong theme on reload. The toggle icon is also synced
to the restored theme on initial load.

#17
casper-stevens merged commit 87e5d0aecb into development 2026-04-14 22:30:46 +00:00
Sign in to join this conversation.
No reviewers
No labels
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
lhumina_code/hero_slides!19
No description provided.