An overview of how to implement a colour toggle function in your web applications (dark / light mode)

Introduction:

In modern web development, it's very necessary to allow users to customize the color scheme in which they explore your site. This improves the UX and can increase your audience.
In this article we'll try to demonstrate how this feature can be implemented using the programming languages you already know (javascript, HTML and CSS).

HTML Structure

To begin, we need to set up the HTML structure for our color switch feature. We'll use radio buttons to represent different color modes. Here's an example of the HTML code:

<input type="radio" name="color-mode" id="color-mode-light" value="light" checked>
<label for="color-mode-light">Light Mode</label>

<input type="radio" name="color-mode" id="color-mode-dark" value="dark">
<label for="color-mode-dark">Dark Mode</label>

<div class="element" color-mode="light">Content</div>

In the code snippet above, we have two radio buttons. Each radio button has a unique ID and an associated label. Users can toggle between light and dark mode using these radio buttons. We also have a <div> element with the class "element", which represents the content area affected by the colour change.

CSS Styling

Now, let's apply CSS styling to achieve the desired visual effects and handle the color changes. Here's an example of the CSS code:

:root {
  --primary-color: #333;
  --secondary-color: #fff;
}

[color-mode="light"] {
  --primary-color: #333;
  --secondary-color: #fff;
}

[color-mode="dark"] {
  --primary-color: #fff;
  --secondary-color: #333;
}

.element {
  display: grid;
  place-items: center;
  height: 100vh;
  color: var(--primary-color);
  background-color: var(--secondary-color);
}

In the CSS snippet above, we are using the :root selector to define CSS variables to set up the initial colour scheme. The --primary-color and --secondary-color variables are set to their default values, which represent the colour for the light mode.

When the colour mode attribute is set to light or dark, we use attribute selectors to customise the colour scheme. By updating the CSS variable values, we can adjust the primary and secondary colours.

The .element selector applies the colour scheme to the content area using the var() function to reference the CSS variables. We also added styles to centre the content vertically and horizontally, and to ensure that the element fills the entire height of the viewport.

JavaScript functionality

To make the colour change feature interactive, we'll include JavaScript to dynamically update the colour mode attribute based on the user's selection. Here's an example of the JavaScript code:

const radioButtons = document.querySelectorAll('input[name="color-mode"]');
const element = document.querySelector('.element');

radioButtons.forEach(radioButton => {
  radioButton.addEventListener('change', function() {
    element.setAttribute('color-mode', this.value);
  });
});

In the JavaScript code above, we select all the radio buttons with the name "colour-mode" using the querySelectorAll() method. We also select the content area element with the class "element".

We then iterate through each radio button using the forEach() method and add an event listener for the 'change' event. When a radio button changes state, the event listener updates the colour mode attribute of the content area element to reflect the selected colour mode. Web developers typically store this user value in browser-based storage, such as localstorage, to preserve this customisation beyond tab refresh.

Conclusion

By adding colour switching to your website, you can provide users with a personalised browsing experience. By allowing them to choose their preferred colour scheme, you can increase engagement and cater to their individual preferences. Implementation is straightforward with HTML, CSS and JavaScript. Create a visually appealing website that stands out by experimenting with different colour schemes. Empower your visitors and make their browsing experience more enjoyable by adding colour switching to your website.

Note that many front-end libraries already have this feature implemented for you, example : starting Bootstrap 5.3, developers can implement colour modes switch with ease, read more here.

In fact, you can access a demo for the code that we have made above by going here.