Testing Dark Mode feature on settings

[DarrellRoberts]

Supports #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

[jimchamp]

Thanks @DarrellRoberts! This seems to be working pretty smoothly. I've changed the base branch from master to dark-mode, as we'll still need to update the stylesheets after the final designs and color scheme have been created and approved.

I've added a number of suggested JS changes. Once those are merged, I'll merge this into the dark-mode branch.

[jimchamp]

Suggested change

	if (darkMode) {
	module.initDarkMode();
	}
	module.initDarkMode(darkMode);

We can be sure that darkMode is true at this point.
Add event listeners to darkMode in initDarkMode function.

[jimchamp]

darkMode may be null at this point (it only exists on the settings page). It would be better to pass darkMode as a parameter of initDarkMode, and add the event listener in the body of initDarkMode.

[jimchamp]

Suggested change

	const dm = 'dm'
	const darkModeValue ='True';
	const cookieStr = `${dm}=${encodeURIComponent(darkModeValue)}`;
	document.cookie = cookieStr;
	document.cookie = 'dm=True;';

I don't think that encodeURIComponent is needed here. This function is more useful for modifying URLs.