Dark Mode

Page Elements

​

On each page in our site we added the following elements:

• Switch input: To toggle between the default mode and dark mode. Make sure the switch’s ID is the same on each page.

• Container box: Holds all the elements on the page. Box.style.backgroundColor changes when dark mode is enabled.

• Custom menu: (Only on Home page) Built from several buttons with a transparent background. Button.style.color (text color) changes when dark mode is enabled.

• Text elements: Several text elements for title, description, footer, etc. Text.html changes color when dark mode is enabled.

Code

​

Then we added the following code to the site tab so it will run for every page in the site:

1. Import functionality for working with local storage. Local storage allows us to “remember” the visitor’s mode choice when navigating to a different page and between browsing sessions.

2. Define global objects to store page elements defined by type, dark mode color styles, and default color styles. Default styles are extracted from the page elements when the page loads.

3. When the page loads, do the following:

   1. Select text, boxes, and buttons by type and save their default styles.

   2. Check local storage to see if dark mode was enabled in the most recent browser session. If so, enable dark mode and turn on the switch. If not, enable default mode and turn off the switch.

   3. Use an onChange event handler to switch from the current mode to the other mode anytime the switch is toggled.

4. Function for switching to default mode:
   Note that we use template literals for handling variables and expressions in strings.

   1. Tag dark mode as disabled in both our global variable and local storage.

   2. For each text element, box, and button, replace the current style with the default mode styles.

5. Function for switching to dark mode:

   1. Tag dark mode as enabled in both our global variable and local storage.

   2. For text elements, we use a regular expression cleaner to help us insert a new HTML tag for the dark mode text color. The regex cleaner extracts the plain text from inside the HTML tags. In the Text.html property, we replace the plain text with plain text + dark mode HTML tag.

   3. For each box and button, replace the current style with the dark mode style.