Testing Dark Mode feature on settings #9231
Open
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #4448
This is a proof of concept for the dark mode feature as discussed on issue #4448.
Currently it just changes the body background from its default beige to dark beige. This is also stored in a cookie value, so the state will remain after changes to the web page or a refresh.
Technical
I used JavaScript to set the cookie value when the user clicks the button. This is in a new file called openlibrary/plugins/openlibrary/js/darkMode.js.
Then I retrieve the cookie value with the Python method in openlibrary/plugins/upstream/utils.py and use an if statement in the body in openlibrary/templates/site/body.html.
The button is rendered on the settings page in the file openlibrary/templates/account.html
I used simple images for the light and dark icons, but this is just for the test version and I'm not proposing this for the final design.
Testing
Go to the settings page, click on the button with a crescent moon on it at the bottom. Check that the color of the background changes and try refreshing the page or navigating elsewhere to see if the state remain. Also check the cookies for a cookie called "dm" which should have the value "True" when the button has first been clicked. The button in dark mode should change to a sun icon. On clicking the sun icon, the "dm" cookie value should become empty and the background should return to normal.
Screenshot
Stakeholders
@jimchamp