How to add a Dark Mode Toggle to your Website

In today’s tutorial, we are going to show you how to create a toggle switch to change your website from ‘light’ mode to ‘dark’ mode.

In recent times, more and more devices start to support dark mode. With that in mind, we will have to create our website with dark mode capability support in mind.

There are many ways to achieve this but with our method, we are going to be using the :root CSS pseudo-class which matches the root element of a tree representing the document. In HTML, :root represents the <HTML> element and is identical to the selector html, except that its specificity is higher.

If you just want to skip to the CodePen, then click here, otherwise, let’s commence!

Let’s go!

Let’s say we have the following markup, we are going to add the color-switch above the navigation menu which will be our toggle for the mode switch:

HTML CODE


<div class="container">
  <div class="color-switch">
    <div class="switch"></div>
  </div>
  <div class="navigation">
    <ul>
      <a href="https://silvawebdesigns.com/" class="active" target="_blank" rel="noopener noreferrer">Home</a>
      <a href="https://silvawebdesigns.com/#about">About</a>
      <a href="https://www.instagram.com/silvawebdesigns/" target="_blank" rel="noopener noreferrer">Instagram</a>
      <a href="https://twitter.com/SilvaWebDesigns" target="_blank" rel="noopener noreferrer">Twitter</a>
    </ul>
  </div>
</div>

CSS CODE


@import url('https://fonts.googleapis.com/css2?family=Montserrat:[email protected]&display=swap');

 :root {
	 --background: #FFF;
	 --text: #000;
	 --highlight: #ff6564;
}
 body {
	 background: var(--background);
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 height: 100vh;
	 overflow: hidden;
	 transition: 0.5s background ease;
}
 .container {
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 flex-direction: column;
}
 .color-switch {
	 --background: #fff;
	 --text: #000;
	 color: var(--text);
	 width: 70px;
	 height: 30px;
	 background: var(--highlight);
	 border-radius: 50px;
	 position: relative;
   cursor: pointer;
}
 .color-switch .switch {
	 background: white;
	 width: 24px;
	 height: 24px;
	 background: var(--background);
	 border-radius: 100%;
	 position: absolute;
	 top: 3px;
	 left: 4px;
	 transition: 0.5s all ease;
}
 .dark-theme {
	 --background: #000;
	 --text: #FFF;
   --highlight: #ff6564;
	 background: var(--background);
}
 .dark-theme .color-switch {
	 background: var(--highlight);
}
 .dark-theme .color-switch .switch {
	 transform: translateX(37px);
}
 .dark-theme a {
	 color: var(--text);
}
 .navigation {
	 display: flex;
	 justify-content: center;
}
 ul {
	 display: flex;
	 list-style-type: none;
}
 ul a {
	 margin: 10px 30px;
	 position: relative;
	 color: var(--text);
	 font-family: 'Montserrat', sans-serif;
	 font-size: 20px;
	 text-transform: uppercase;
	 text-decoration: none;
}
 ul a:before {
	 position: absolute;
	 bottom: -2px;
	 content: '';
	 width: 100%;
	 height: 3px;
	 background: var(--highlight);
	 transform: translateX(-100%);
	 opacity: 0;
}
 ul a:hover:before {
	 opacity: 1;
	 transition: 0.5s transform ease, 0.8s opacity ease;
	 transform: translateX(0);
}
 ul .active {
	 color: var(--highlight);
}
 ul .active:hover:before {
	 opacity: 0;
}

With the CSS code above, you will notice that we have defined three variables within :root which is our light theme. We have then defined the colours in which we want to use for the dark version using the class .dark-theme. Within here, we are just simply replacing the background and text colour. There will be a lot more cases in which you need to change colours, but this is a simple example to get you started with the setup.

jQuery Code


$(".color-switch").on("click", () => {
  $("body").toggleClass("dark-theme");
});

This simple snippet of jQuery is simply adding the toggling the class dark-theme on click. On page load, body will not contain the class dark-theme, on click of our color-switch class, dark-theme will be added as a body class and will add the light theme styles to your website. On secondary click, it will simply revert back to the initial state.

This example we have provided today is just a start on how you could achieve a dark mode and light mode version of your website, however, there are other design considerations you need to take into place.

Design Considerations

Okay, so we already know the basic tasks of switching between light and dark mode. However, there are some UI elements and enhancements that do require more attention, lets dig into those.

Dark Mode Images

In general, a good rule of thumb is to decrease the brightness/contrast of images whilst in ‘dark mode’ so it looks comfortable to the eyes. An extremely bright image on a dark background can give a negative impact so dimming the image reduces the heavy contrast.

The CSS filter() function is more than capable of handling this type of situation as follows:


body.dark-theme img {
  filter: brightness(.8) contrast(1.2);
}

The list goes between the variations between ‘dark mode’ and ‘light mode’, these will include items such as:

  • Dark Mode Typography
  • Dark Mode Icons
  • Dark Mode Colours
  • Dark Mode Colour Palettes

and so on… it’s all about finding the right balance as to what is pleasing on the eye for both versions.

So, should I add Dark Mode to my website?

There are many perfectly valid reasons for either side and really, it’s up to you!

Here are reasons why you might want to implement ‘dark mode’:

  • It’s pretty cool and trendy (though this isn’t really a valid reason on its own!)
  • It enhances accessibility by supporting users who are sensitive to eye strain (yes, valid reason!)
  • It gives website visitors the decision to decide which version of your site is most comfortable for them to use
  • It helps to preserve battery life for devices with OLED screen where brighter colours consume more energy.
  • It’s becoming normality to have this on modern websites. It’s possible that your users who prefer a dark mode will expect your site to have one, so we might as well be ready for it then right?

 

As you may have noticed, we haven’t yet added this feature to our website, well, it’s pretty dark anyway but we could potentially change this in the future. As we’ve mentioned, we’ll simply be replacing white backgrounds with darker variants, changing the image brightness and contrast across the site then just going through page by page to see what other changes we can make to make it more pleasing to the eyes of ‘dark mode’ users. What needs to be done depends on the contents of your site, but with everything we have gone through on today’s tutorial, we’re sure you’ll be making awesome ‘dark mode’ versions of your website in no time!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Diving Further Into WordPress Website Accessibility

So you know a bit about WordPress accessibility, but still, you want to learn. Great!

The WordPress community is dedicated to Core Accessibility.

Accessibility Coding Standards Promise: Any new or revised code released in WordPress will conform with WCAG 2.0 guidelines at Level AA.

The accessibility of a WordPress website depends on 3 factors:

  • Theme
  • Plugins
  • Content

 

Designers, creators, and site owners also influence if the end product is accessible.

Developers play a significant part in the accessibility mix. The issues can not be found until someone reports they can’t see or do anything on the website.

What Can WordPress Developers Do To Make The Sites They Build More Accessible?

The right method is improving accessibility from the start. Rectifying accessibility problems with a site is often more time-consuming and difficult to do (though it might happen often).

So, this is what you should do:

  • 1. Choose An Accessibility Ready Theme
  • 2. Use Plugins to produce Accessible Content
  • 3. Teach Customers to Add Accessible Content

 

Tota11y, a Khan Academy developed usability visualisation toolkit, is an awesome developer tool. Simply attach their JS file to your site to allow the accessibility feature, which appears in the shape of a tiny glasses icon tab.

1. Choosing an Accessible Theme for WordPress

The first step on a fully accessible website is to select an accessible theme. Many theme developers take the time to implement the instructions in the WordPress theme accessibility guide, so it is best to ask the author whether a particular topic is accessible or not.

WordPress also includes free themes. Find the submenu under the “Function Filter” heading and click on the cog icon.

There are many options you can choose to filter your search. In the Features section, click the feature above that is reliable readiness.

You can then select any number of filters. On the left, you will see a Filter button that shows the number of filters applied. Click Apply filters. Then, select a topic.

It is important to note that the fact that a theme is labelled Accessibility Ready does not mean that it is “fully” accessible. However, if a theme developer marks their theme as accessible, they probably made some effort into making it accessible. If you encounter any issues, let them know so they can update it for other users.

2. WordPress Free Plugin Solutions For Accessibility

You may be creating your own WordPress theme, or you using any theme you want. One of the amazing things in WordPress is the availability of tens of thousands of add-ons. Whenever you need something, there is usually an add-on that can fit into your website.

My personal choice is WP Publishing, which comes with a variety of tools to help you find and fix the most common problems you find when using WordPress. It requires very little expertise and minimal setup.

WP Accessibility Helper (WHA) is another option in a range of options that include several useful features for skipping links, changing font size, scanning domains, contrast mode, and more. The features you want to include can meet more specific accessibility requirements.

Fonts: Create a font size widget for your sidebars. This makes it easy for readers on your site to resize text according to their needs.

Another easy-to-read option is the Zeno Font Resizer. The plugin allows webmasters to set the font size as well as the font size options. So when users return to your site, they’ll see the font size as they specified before.

Text-to-speech: For readers with visual impairment, text-to-speech features offer audio options for the blind. 190 WordPress add-ons offer a voice of human quality, support over 30 languages, and work with most topics.

G-speech text-to-speech solution is a free alternative for accessible audio. It works with any text on your site and adds an audio block to your site. You can then use these options to change the colour, speaker sound, and more.

Forms: You can easily access your contact forms through the Contact Form 7 plugin. This allows you to set default values for forms and formations, such as WCAG form fields, or readily available forms, such as add-ons.

3. Testing Your Website Accessibility

Once you’ve created your website, it’s a good idea to review your changes. There are many methods and software that you can use to make the experience enjoyable, but there are a few that make testing easier.

One that we mentioned earlier in this article is the Tota11y. Along with this, you can use WAVE Web Accessibility Diagnostic Chrome extension. This auxiliary device displays all errors, warnings, features, structural features, ARIA labels so that you can edit them accordingly.

Once you’ve created your website, it’s a good idea to review your changes. There are many methods and software that you can use to make the experience enjoyable, but there are a few that make testing easier.

Apart from Tota11y, the WAVE Web Accessibility Diagnostic Chrome Extension helps auxiliary device displays all errors, warnings, features, structural features and ARIA labels so that you can edit them accordingly.

Conclusion

Website accessibility is just as important, if not more essential than directing traffic to your website. You should make sure anyone who lands at your website will completely understand and navigate through all the information available there.

That’s why we recommend these accessibility features and the right plug-ins to make them work. If you want to make your website fully accessible, these tips should give you a head start.

If you want us to look at your website and suggest/implement ways in which we can improve your accessibility, feel free to drop us an email at [email protected] and we’d love to help you! Alternatively, you can get in touch with MangoMatter Media and they would be very happy to assist you.

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share