How to make website dark mode CSS HTML JavaScript Example

Last Updated: 2023-03-18 12:37:42

the dark mode is one of the most popular of these features is dark mode, which reduces the amount of bright light emitted by screens, making it easier to read and reducing eye fatigue. In this tutorial, we'll explore how to create a dark mode for your website using CSS, HTML, and JavaScript. We'll provide an example of how to implement this feature on your own website, and provide tips on how to ensure your website remains accessible and easy to use for all users, regardless of their preferred color scheme. So, if you're looking to improve the usability of your website and create a more inclusive browsing experience for your users, keep reading to learn how to create a dark mode for your 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 website dark mode

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 you need to change your website text color also when you change the background to dark. So technically it means you need to write CSS for white-mode websites and dark-mode websites. Let's describe the technique with some steps.

Steps of making website dark mode feature

Write two CSS classes: You need to write two CSS classes one is for dark mode and another one is for white mode.
Use white mode class initially: At the initial loading, you need to add the white-mode class to your website body, as it is your default mode.
Write your all CSS code under the white mode and dark mode classes: You need to write your all CSS code under the white-mode and dark-mode classes.
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.

Website dark mode 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>

Website dark mode 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
}

Website dark mode 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
}

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 make website dark mode

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.

Some common questions about How to make a website dark mode

Q: Why should I add a dark mode feature to my website?
A: 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.

Q: Can I use dark mode on all websites?
A: 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.

Q: How can I make sure my website looks good in both light and dark mode?
A: To ensure that your website looks good in both light and dark mode, 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.

Q: Should I store user preferences for dark mode?
A: 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