fix: stale dark class theme bootstrap#2006
Conversation
Purpose of the change: - Make the web theme bootstrap remove stale dark classes when the server only provides --theme-dark-mode: 0. How behavior was before: - When --theme-name was unavailable, bootstrap only added dark if dark mode was detected. - A stale html/body dark class could remain even while --theme-dark-mode was 0. Why that was a problem: - Light Unraid themes could still render Tailwind dark styles after a stale class survived on the page root. What the new change accomplishes: - Treats the computed dark-mode state as authoritative in the fallback path and reconciles both add and remove cases. - Adds regression coverage for a light CSS variable with stale dark classes. How it works: - Reuses applyDarkClass(isDarkModeActive(), darkMode) when --theme-name is missing so the existing sync path updates html, body, .unapi, and the store state together.
WalkthroughThis PR refactors dark-mode initialization in the theme store by removing an internal helper function and directly calling ChangesDark Mode Initialization
🎯 2 (Simple) | ⏱️ ~10 minutes
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #2006 +/- ##
==========================================
- Coverage 52.59% 52.58% -0.01%
==========================================
Files 1033 1033
Lines 71682 71676 -6
Branches 8181 8176 -5
==========================================
- Hits 37698 37688 -10
- Misses 33858 33862 +4
Partials 126 126 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
This plugin has been deployed to Cloudflare R2 and is available for testing. |
Summary
.darkclasses from the computed dark-mode state when--theme-nameis unavailable.--theme-dark-mode: 0is present but staledarkclasses remain.Root Cause
The previous fallback bootstrap path only added
darkwhen dark mode was detected. If--theme-namewas missing and the DOM already had staledarkclasses,--theme-dark-mode: 0was not enough to actively remove them.Impact
Light Unraid themes can no longer keep Tailwind dark styles active just because a stale
darkclass survived on<html>,<body>, or.unapicontainers.Verification
pnpm exec eslint src/store/theme.ts __test__/store/theme.test.tsNote:
pnpm exec vitest run __test__/store/theme.test.tsis currently blocked before test collection by the existing Vue devtools / localStorage test-environment failure:localStorage.getItem is not a function.Summary by CodeRabbit
Tests
Refactor