feat(useSetDocumentColorScheme): set document color scheme css hook #2880
Conversation
Codecov ReportBase: 66.02% // Head: 63.74% // Decreases project coverage by
Additional details and impacted files@@ Coverage Diff @@
## main #2880 +/- ##
==========================================
- Coverage 66.02% 63.74% -2.28%
==========================================
Files 118 125 +7
Lines 1351 1462 +111
Branches 342 363 +21
==========================================
+ Hits 892 932 +40
- Misses 422 490 +68
- Partials 37 40 +3
Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here. ☔ View full report at Codecov. |
| @@ -0,0 +1,10 @@ | |||
| import { useEffect } from 'react'; | |||
|
|
|||
| export function useSetDocumentColorScheme(theme: string | null): void { | |||
There was a problem hiding this comment.
Hmm, I think this should be something like:
export function useSetDocumentColorScheme(): void {
const [currentTheme, setCurrentTheme] = useState();
useEffect(() => {
// This is responsible for setting the color-scheme of the scroll-bars
if (typeof document === 'object' && document.documentElement) {
document.documentElement.style['color-scheme'] = theme;
}
}, [currentTheme]);
return (theme: string | null) => setCurrentTheme(theme);
}
|
@ovflowd Thanks for the feedback :) I've updated the code to match the requirements. It just look a bit odd to have to keep track of two theme states though 👀 |
|
It might sound odd because those two things are separate. One is the actual theme class and other is the color scheme 👀 but they should indeed be separated. |
Description
Introduced a react hook to set document color scheme css.
Related Issues
#2674
Check List
npm run lint:js -- --fixand/ornpm run lint:md -- --fixfor my JavaScript and/or Markdown changes.npm run testto check if all tests are passing, and/ornpm run test -- -uto update snapshots if I created and/or updated React Components.npm run buildwork fine.