top of page
Dark Mode

Dark Mode

Display your site in dark mode.

Intermediate.png

Intermediate

25K

Published:

January 1, 2020

Girl Enjoying her Drink

by

Anchor 1
Hire a Developer

Example Description

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.​

Example Code

Tab 1

.

Tab 2

.

Tab 3

.

This code solution can be complicated.

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.

APIs We Used

Non-code example.

Non-code example.

Related Articles

Article Link

Hire a Developer

Velo solutions are powerful tools, but building them on your own can be challenging. Let an experienced Velo development shop build it for you, so you can keep working on your site or business.

Related Examples

Did this help?

Yes

|

No

Thanks for your feedback!

Gift Quiz

Gift Quiz

Help customers find the perfect gift with a quiz and product recommendations.

Intermediate.png

Intermediate

Image Fit Mode

Image Fit Mode

Experiment with different ways to fit your image in an image element

Intermediate.png

Beginner

Tabs

Tabs

Create tabs using a multi-state box

Intermediate.png

Beginner

Anchor 2
bottom of page