How to make dark mode for website in HTML CSS JavaScript

Last Updated: 2023-05-27 11:32:46

how to make website dark mode css html javascript example

The dark mode of the website is one of the most popular features nowadays. In this tutorial, we'll explore how to create a dark mode feature for your website using CSS, HTML, and JavaScript. We will also provide you with some tips and Source Code so that you can implement the Dark Mode feature on your own website.

If you are a beginner you can also check our other javascript projects for beginners with source code.

What is website dark mode?

A website dark mode is a design feature that allows users to switch the color scheme of a website from a light background with dark text to a dark background with light text. This feature has become increasingly popular in recent years, as it can reduce eye strain and make it easier to read content, especially in low-light environments. In a dark mode, the colors used for text, backgrounds, and other design elements are inverted, with light colors becoming dark and dark colors becoming light. Some websites offer dark mode as a default option, while others allow users to toggle between light and dark modes based on their preference.

The technique of making the dark mode for the website

If you think carefully you will figure out that a website's dark mode feature is just changing the website background from white to dark. So if you know how to change a website background by clicking a button you can easily make a dark mode feature. But remember you may need to change your website text color also. So to make a dark-mode feature you need to follow the following steps:

Steps of making a dark mode for website

Write two CSS classes: You need to write two CSS classes one is for dark mode and another one is for white mode.
1. dark-mode: Under this class, you need to set the background as black and the text as white.
2. white-mode: Under this class, you need to set the background as white and the text as black.
Use the white-mode class as default: Initially, you need to use the white-mode class for your website body, as it is your default mode.
Change website background in javascript: Now you need to change the website background by changing the website body class. That means you need to change the body's class in the javascript on-click event.
Save setting: This step is optional if you need to store the setting you can use the browser's local storage to keep the website's default class.

Dark mode for website HTML example

< !DOCTYPE html>
< html>
  < head>
    < title>Dark Mode Example< /title>
    < link rel="stylesheet" href="style.css">
  < /head>
  < body class="white-mode"> < !-- Add the white-mode class as the default -->
    < h1>Welcome to my website< /h1>
    < p>This is some sample text that you can use to test out your dark mode toggle button.< /p>
    < button id="toggle-btn" onclick="toggleMode()">Toggle Dark Mode< /button>
  < /body>
< /html>

To implement a dark mode feature on your website first of all you need to make some changes to your HTML code. You need to add a class-default class to your HTML body tag. For example in our example code, we have added a white-mode class as a default class. Also, we have added a button so that users can apply the dark mode feature by clicking the button.

Dark mode for website CSS example

body.white-mode {
  background-color: #fff;
  color: #000;
}

body.dark-mode {
  background-color: #000;
  color: #fff;
}
.dark-mode h1{
  color: #fff; // make title white when dark mode
}
.white-mode h1{
  color: #000; // make title dark when white mode
}

To implement the dark mode on your website you also need to apply some CSS. You already know that we need to set a default class to the HTML body tag. So now in CSS, we need to apply some default design under this default class. For example, in our white-mode class, we set the body background as white and the text color as dark.

Now to apply the dark mode features we need to change the website background color and text color. Hence, we need to write another CSS class for dark mode design. For example, in our code, we have written a dark-mode CSS class with the background as dark and the text color as white.

Dark mode for website javascript example

function toggleMode() {
  const body = document.querySelector('body');
  body.classList.toggle('dark-mode'); // Toggle the dark-mode class on and off
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('mode', 'dark'); // Save the mode to local storage if it's in dark mode
  } else {
    localStorage.setItem('mode', 'white'); // Save the mode to local storage if it's in white mode
  }
}

// Check local storage for saved mode
const savedMode = localStorage.getItem('mode');
if (savedMode === 'dark') {
  document.querySelector('body').classList.add('dark-mode'); // If saved mode is dark, add the dark-mode class
}

You already know that we have two classes, one is white-mode and another one is dark-mode. the white-mode class will make our website's background white and the text color dark. on the other hand, the dark-mode class will make our website's background dark and the text color white.

So now our idea is when the user will click on the button we will remove the white-mode class from the body and will add the dark-mode class to the body.

This code sets the white-mode as the default class for the body element and defines the styles for both white-mode and dark-mode. In the JavaScript code, the toggleMode function is called when the toggle button is clicked, which toggles the dark-mode class on and off for the body element and saves the mode to local storage. On page load, the saved mode is checked and the appropriate class is added to the body element.

Download Complete Source Code

Best practice of making dark mode for website

Here are some best practices to keep in mind when implementing a dark mode feature for your website:

Use CSS variables: Define your colors using CSS variables so that they can be easily changed based on the mode. This will make it easy to change your color scheme if you decide to switch up your colors in the future.
Make it accessible: Make sure your dark mode feature is accessible to all users. This means ensuring that the text has sufficient contrast against the background color and that users with visual impairments can use assistive technology to access your website.
Use a toggle switch: Instead of using buttons, use a toggle switch to switch between dark mode and light mode. This will make it clearer to users what action they're taking.
Store user preferences: Allow users to store their preference for dark mode so that the website can remember their preference when they revisit the site.
Test thoroughly: Make sure to thoroughly test your dark mode feature on different devices and browsers to ensure that it works well and is consistent across all platforms.

By following these best practices, you can ensure that your dark mode feature is user-friendly, accessible, and consistent across all platforms.

Why should I add a dark mode feature to my website?

Adding a dark mode feature to your website can improve the user experience for those who prefer darker color schemes or who use your website in low-light conditions. It can also make your website stand out from others and help it to look more modern and up-to-date.

Can I use dark mode on all websites?

Not all websites have a dark mode feature. However, many websites are beginning to implement this feature to improve the user experience for those who prefer darker color schemes or who use their websites in low-light conditions.

How can I make sure my website looks good in both light and dark mode?

To ensure that your website looks good in both light and dark modes, use CSS variables and test your website thoroughly in both modes to make sure that all elements are visible and that the colors and contrast are appropriate.

Should I store user preferences for dark mode?

Yes, it's a good idea to store user preferences for dark mode so that your website can remember the user's preferred mode when they revisit your site. You can use the browser's local storage to save the preference and retrieve it when the user returns to your site.

In conclusion, adding a dark mode feature to your website can improve the user experience for those who prefer darker color schemes or who use your website in low-light conditions. With a few simple steps using CSS and JavaScript, you can create a toggle switch that allows your users to switch between light and dark modes. To make your dark mode feature accessible, ensure that there is sufficient contrast between the text and background colors, and consider using ARIA attributes and labels. Testing your dark mode feature on different devices, browsers, and operating systems is also important to ensure that it works consistently across all platforms. By implementing these best practices, you can provide your users with a more modern and accessible website that meets their needs and preferences