fix(theming): allow three states in useTheme#656
fix(theming): allow three states in useTheme#656AugustinMauroy wants to merge 2 commits intomainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #656 +/- ##
=======================================
Coverage 75.90% 75.90%
=======================================
Files 145 145
Lines 13735 13735
Branches 992 992
=======================================
Hits 10426 10426
Misses 3303 3303
Partials 6 6 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
| File | Base | Head | Diff |
|---|---|---|---|
orama-db.json |
8.05 MB | 8.05 MB | +3.00 B (+0.00%) |
There was a problem hiding this comment.
Pull request overview
Refactors the web generator UI theming to track a theme preference (including system) and keep the applied document theme synced with OS color-scheme changes, updating the NavBar integration accordingly.
Changes:
- Reworked
useThemeto supportsystem | light | darkpreferences, with localStorage persistence and system-change listeners. - Updated
NavBarto pass the new theme preference API through toThemeToggle.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
src/generators/web/ui/hooks/useTheme.mjs |
Introduces theme preference model (system/light/dark), storage helpers, and OS theme change syncing. |
src/generators/web/ui/components/NavBar.jsx |
Switches NavBar theme toggle wiring to the new useTheme return values/props. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Could you please elaborate more why this PR is necessary? Why does it need to be refactored? Is this fixing any specific bug? 👀 |
In the linked issue we realize that on safari theme didn't change on web generator when using the dropdown so after some thinkering I found this solution |
| if ('addEventListener' in mediaQueryList) { | ||
| mediaQueryList.addEventListener('change', handleSystemThemeChange); | ||
| return () => { | ||
| mediaQueryList.removeEventListener('change', handleSystemThemeChange); | ||
| }; | ||
| } | ||
|
|
||
| mediaQueryList.addListener(handleSystemThemeChange); | ||
| return () => { | ||
| mediaQueryList.removeListener(handleSystemThemeChange); | ||
| }; |
There was a problem hiding this comment.
addEventListener is standard, is it not? We don't need a backup check
There was a problem hiding this comment.
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList
so we can remove the back-up change
There was a problem hiding this comment.
I'd be careful about Safari support here, esp. on iOS: https://caniuse.com/mdn-api_mediaquerylist_change_event. Support only landed in late 2020.
| if (!THEME_PREFERENCES.has(nextPreference)) { | ||
| return; | ||
| } |
There was a problem hiding this comment.
no we can remove it
avivkeller
changed the title
| const getStoredThemePreference = () => { | ||
| try { | ||
| const storedTheme = localStorage.getItem(THEME_STORAGE_KEY); | ||
| return THEME_PREFERENCES.has(storedTheme) ? storedTheme : null; | ||
| } catch { | ||
| return null; | ||
| } | ||
| }; |
There was a problem hiding this comment.
I think we can just assume that the theme preference is correct, no need for the ternary or catch.
There was a problem hiding this comment.
you are proposing to just return localStorage.getItem ?
Description
refracto the way that we handle theming
Validation
Manual test on safari & chrome
Related Issues
Close #642
Check List
node --run testand all tests passed.node --run format&node --run lint.