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 of 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

Web Design Trends that are going to Rule 2020

Well, you just can’t deny the fact that the web has dramatically changed the world over the years since its inception. Giving us the power to craft some fantastic experiences, the web has turned out to change our reality.

A well-designed professional website is an asset for business owners. Apart from being an important part of online marketing, a website acts like a mirror of the brand.
It creates the first impression in the minds of potential customers, so make sure to make the most out of it.

So, in this complete guide, we’ll be focusing on the trends that are going to dominate the web design industry.

It is a common saying that change is the only constant. Design trends prove that in many ways.

Web design trends never stop evolving and in this article, we’re going to discuss the ones that can help businesses grow and thrive.

So let’s shed some light on a few of the innovative web design trends that are going to rule 2020:

Dark Mode

The dark mode trend took 2019 by storm and it’s all set to rule 2020.

The clear bold fonts on the dark themes improve all designs. Not only does it look stunning, but it also makes different elements of the design more appealing. The right kind of colour combination plays an important role in making your website catch your users’ eye.

This low light user interface helps to reduce eye-strain by adjusting the brightness as well.

“Designing the Truth”

You might be thinking, what does this even mean? Well, our present reality has introduced the concept of “post-truth” into mainstream culture, making us doubt ourselves and our perceptions. Framing and portraying unrealistic lifestyles for gaining viral traction is something that many internet users are doing in this highly competitive world.

But that’s not how it should be. The real beauty lies in true life, in all its ugliness. True life might not be as perfect as it is portrayed on your Instagram timeline, but it is the only thing we can hold on to.

In 2020, one of the most interesting trends is that post-truth is crumbling. People are interested in those who “serve realness”, not some other fake fairytale life.

3D Elements

There is no doubt that 3-D visuals can delight the viewers. But the only thing that was holding this trend from taking the market by storm was its costly price tag. But that’s not an issue anymore. Web devs can now easily employ 3-D rendering design to improve effects and to make the whole look more appealing and satisfying.

This makes complete sense, especially in the era of virtual reality. Stepping away from traditional design and landing into the land of 3-D illustrated artwork is something that can help brands stand out in a reality in which 300 new websites are created every minute.

The year 2020 is expected to witness even more immersive 3-D design.

The Spark of Split Content

This split design technique looks quite clear and has the power to showcase the message in a well-organised way.

Mix-matching the image along with text in a smart way can make a strictly business website look appealing.

Being a traditional yet smart way of portraying a message, this design trend is going to continue to draw attention. Splitting the screen by separating text and image can work wonders for you.

The Beauty of Abstract Illustrations

It is certainly true that illustrations bring life to any website design.

Smart and interactive illustrations are now basking in the spotlight. Along with having the power to showcase emotions, abstract illusions never fail to wow users.

In 2019 we’ve experienced a boom of illustrations and in the near future, it’s definitely going to stay in the up and coming design trends.

Personalisation is KEY

Personalisation is the main key to success! Anything that works well for a particular website can ruin another one. Well, that’s why customisation is something you should always consider.

From customising graphics to picking up smart colour schemes, the “one size fits all” approach is going to dissipate in 2020 and this new year is going to be all about bringing a personalised experience to every single website.

The effect of Parallax scrolling

With time, the Parallax scrolling effect is becoming quite famous among web designers and developers.

Under this design, a particular animation is adjusted in multiple layers, but with some smart variations in speed. To develop a pleasing visual experience, the image in the background moves a little slower than the front image. Combined with the other trends, parallax scrolling is going to make beautiful websites happen in 2020.

MASSIVE FONT SIZE

This typography-based trend is not something to be overlooked. Over-sized lettering gathers all the attention that your brand deserves.

Bold typography is going to help your business message to be reflected in the best possible way. Font size and style definitely plays an important role in grabbing the ever-slipping user attention.

Conclusion

Well, the bottom line is that with all these smart trends, diversity will fully take web design to the next level.

Web design is now embracing futurism at a much higher pace. And there is more to come in the near future as tastes, expectations, and preferences of web users slowly change over time. But, for now, these are our predictions about what is going to dominate the web design landscape in 2020.

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 of 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