Dark Mode

More Examples

Display your site in dark mode.

Play with the example below to see what you can do:

Open this example as a template so you can see how everything works in the Editor. 

What We Built

In this example, site visitors can switch between a default color scheme and “dark mode,” known for improving readability and reducing eye fatigue. The site visitor’s preferred mode is maintained across all pages of the site and from one browsing session to the next.​

How We Built It

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.

Example Code

arrow&v

Example Demonstrates

wix-storage API

Advanced Text Editing

Regular Expressions

Input Element onChange

To start using Corvid:  Go to the Wix Editor > Dev Mode > Turn on Dev Mode