Add dark mode toggle #354 #355
Conversation
Codecov Report
@@ Coverage Diff @@
## master #355 +/- ##
==========================================
+ Coverage 98.61% 98.89% +0.28%
==========================================
Files 32 33 +1
Lines 866 906 +40
Branches 189 195 +6
==========================================
+ Hits 854 896 +42
+ Misses 11 9 -2
Partials 1 1
Continue to review full report at Codecov.
|
There was a problem hiding this comment.
The top bar goes black when in dark mode - surely this should remain coloured? It doesn't present as much as a focus point as light mode does.
Additionally, we see a "flash" of light mode when loading the page - I wonder if we can prevent this by doing the dark mode loading first thing before rendering anything.
| // load dark mode preference from local storage into store | ||
| // otherwise, intial state is false | ||
| const darkModeLocalStorage = localStorage.getItem('darkMode'); | ||
| if (darkModeLocalStorage) { | ||
| const preference = darkModeLocalStorage === 'true' ? true : false; | ||
| dispatch(loadDarkModePreference(preference)); | ||
| } | ||
|
|
There was a problem hiding this comment.
This should probably either be moved to the top of the settings loading, or before even doing the settings.json request to prevent the light theme "flash" if a user has a preference for dark mode. Additionally, it might also be worth using prefers-color-scheme if there is no local storage set: see https://blog.bitsrc.io/how-to-sync-your-react-app-with-the-system-color-scheme-78c0ad00074b for info on how to use this
| const darkModeLocalStorage = localStorage.getItem('darkMode'); | ||
| const darkModePreference = darkModeLocalStorage === 'true' ? true : false; |
There was a problem hiding this comment.
Same as before, might want to use prefers-color-scheme - perhaps this tiny bit of common code could be refactored out? Or, if the prefers-color-scheme change is tiny perhaps it's not worth it
| const darkModeLocalStorage = localStorage.getItem('darkMode'); | ||
| const darkModePreference = darkModeLocalStorage === 'true' ? true : false; | ||
| const theme = buildTheme(darkModePreference); |
There was a problem hiding this comment.
Surely if the action is of type LoadDarkModePreferenceType you can just get the preference from action.payload.preference rather than querying localstorage?
| const loadDarkModePreferenceAction = { | ||
| type: LoadDarkModePreferenceType, | ||
| payload: { | ||
| preference: false, |
There was a problem hiding this comment.
I thought the type of LoadDarkModePreferencePayload means this should be darkMode: false? Or am I misunderstanding
@louise-davies , I was following material-ui.com on this (they change to to black). It's quite bright otherwise, but I can change it if you think the focus point is needed? |
|
To do
|
|
@tswinb now checking accessibility standards |
…ilty-#355 Increase toast functionailty #355
Description
Adds ability for user to switch in and out of a dark mode theme.
Run with ral-facilities/datagateway#357
Testing instructions
Agile board tracking
connect to #354