julienb86
commented
1 year ago Il faudrait prendre en compte le dev fait côté back sur les prefs, il faut voir avec Whitedog pour qu'il te donne les éléments.. aussi attention tu allais faire ta pr sur main . Les devs donc les pr se font sur la branche dev. J ai redirigé ta pr
Jerome-Marichez
The Feature
Our app supports toggling between dark and light themes, and it takes into account the user's browser/OS preferences to determine which theme to display when local storage is not available. The custom hook is designed to run only once when the 'Header' component is loaded or when the setDarkMode function is called. It does not re-run with every render, ensuring optimal performance.
About useDarkMode.ts
Created a Hook so it return the darkMode value as a boolean.
True if it's a dark theme false otherwise
darkMode will check for localstorage and look at "theme" value to return true for darkMode value.
If no localstorage then darkMode value will be set depend of Theme/OS Prefs.
The hook return too a setDarkMode to directly enable darkMode.
About Header.tsx/DarkModeSwitch.tsx
Maked DarkModeSwitch more short & clear
DarkModeSwitch accepts "darkMode" as a boolean prop and "setDarkMode" as a SetState function prop. (In our example, we pass the state and setState values obtained from our custom hook useDarkMode.)
This approach allows DarkModeSwitch to function as a PureComponent, avoiding re-running the hook every time an onChange event occurs."