How to implement dark mode in CSS?

To implement dark mode in CSS, you can follow these steps:

Step 1: Define CSS Variables for Color Schemes

First, define a set of CSS variables representing the color values for both light and dark modes. This approach allows you to change the color scheme by simply switching the values of these variables.

Preview


Copy Code
:root {
  --background-color-light: #ffffff;
  --text-color-light: #000000;
  --background-color-dark: #121212;
  --text-color-dark: #ffffff;
}

Step 2: Apply the Default Light Mode

Using the defined CSS variables, apply the default light mode styling. This step ensures that the website has a default appearance that can later be toggled.


Copy Code
body {
  background-color: var(--background-color-light);
  color: var(--text-color-light);
}

Step 3: Add Dark Mode Styles Using a Class

Create a class .dark-mode that overrides the default light mode styles with dark mode values. This class will be toggled using JavaScript based on the user's choice.


Copy Code
.dark-mode {
  background-color: var(--background-color-dark);
  color: var(--text-color-dark);
}

Step 4: Use JavaScript to Toggle Dark Mode

Implement a JavaScript function that toggles the .dark-mode class on the <body> tag. This function can be triggered by a button click or any other event you choose.


Copy Code
function toggleDarkMode() {
  document.body.classList.toggle('dark-mode');
}

Step 5: Remember the User’s Preference

To enhance user experience, use the localStorage feature to remember the user's theme preference across sessions.


Copy Code
function toggleDarkMode() {
  let isDark = document.body.classList.toggle('dark-mode');
  localStorage.setItem('darkMode', isDark ? 'enabled' : 'disabled');
}

// On page load
document.addEventListener('DOMContentLoaded', (event) => {
  if (localStorage.getItem('darkMode') === 'enabled') {
    document.body.classList.add('dark-mode');
  }
});

Step 6: Adding a Toggle Button

Finally, add a button to your website that calls the toggleDarkMode function when clicked. This provides users with an easy way to switch between modes.


Copy Code
<button onclick="toggleDarkMode()">Toggle Dark Mode</button>

Example Implementation

Here is a complete example combining all the steps:


Copy Code
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dark Mode Example</title>
  <style>
    :root {
      --background-color-light: #ffffff;
      --text-color-light: #000000;
      --background-color-dark: #121212;
      --text-color-dark: #ffffff;
    }
    body {
      background-color: var(--background-color-light);
      color: var(--text-color-light);
      padding: 25px;
      font-size: 25px;
    }
    .dark-mode {
      background-color: var(--background-color-dark);
      color: var(--text-color-dark);
    }
  </style>
</head>
<body>
  <h1>GeeksForGeeks</h1>
  <p>This is a sample GeeksForGeeks Text. Dark Mode Websites using Html CSS & Javascript</p>
  <customimg src="https://media.geeksforgeeks.org/wp-content/uploads/20200122115631/GeeksforGeeks210.png" alt="GeeksforGeeks Logo">
  <h3 id="DarkModetext">Dark Mode is OFF</h3>
  <button onclick="toggleDarkMode()">Toggle Dark Mode</button>