Implementing Dark Mode in Your Website

In the world of web development, enhancing user experience is paramount. One significant trend that has gained traction is the implementation of dark mode. Dark mode not only reduces eye strain in low-light environments but also conserves battery life on OLED and AMOLED screens. T

1. Understanding Dark Mode

Dark mode is a display setting where the background is dark and the text is light. This inverse color scheme helps in reducing the blue light emitted from screens, thus minimizing eye strain.

2. Basic Implementation of Dark Mode

Step 1: Setting Up Your HTML and CSS

To start, we need a basic HTML structure and some CSS to toggle between light and dark modes.

HTML:

<!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>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Welcome to Dark Mode Example</h1>
    <button id="theme-toggle">Toggle Dark Mode</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS:

:root {
  --background-color: #ffffff;
  --text-color: #000000;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

body.dark-mode {
  --background-color: #121212;
  --text-color: #ffffff;
}

.container {
  text-align: center;
  margin-top: 20%;
}

button {
  padding: 10px 20px;
  cursor: pointer;
}

Step 2: Adding JavaScript for Theme Toggle

To toggle between light and dark modes, we can use JavaScript to add or remove a class on the <body> element.

JavaScript:

const toggleButton = document.getElementById('theme-toggle');
const body = document.body;

toggleButton.addEventListener('click', () => {
  body.classList.toggle('dark-mode');
});

3. Syncing with System-Wide Dark Mode

Modern operating systems allow users to set a system-wide preference for dark or light mode. We can use CSS media queries to detect this preference and apply it automatically.

Step 1: Using CSS Media Queries

CSS:

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212;
    --text-color: #ffffff;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --background-color: #ffffff;
    --text-color: #000000;
  }
}

Step 2: Enhancing JavaScript to Respect System Preferences

To ensure our JavaScript respects the system preference on page load, we can modify our script as follows:

JavaScript:

const toggleButton = document.getElementById('theme-toggle');
const body = document.body;

// Check for system preference
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  body.classList.add('dark-mode');
}

toggleButton.addEventListener('click', () => {
  body.classList.toggle('dark-mode');
});

4. Persisting User Preference

To provide a consistent experience, we should save the user’s theme preference in local storage so that it persists across sessions.

JavaScript:

const toggleButton = document.getElementById('theme-toggle');
const body = document.body;

// Check for saved user preference or system preference
const savedTheme = localStorage.getItem('theme');
const systemPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
  body.classList.add('dark-mode');
}

toggleButton.addEventListener('click', () => {
  body.classList.toggle('dark-mode');
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('theme', 'dark');
  } else {
    localStorage.setItem('theme', 'light');
  }
});

Conclusion

Implementing dark mode on your website enhances user experience by providing a comfortable viewing option and conserving battery life. This feature not only makes your website more user-friendly but also shows your attention to detail and commitment to modern web standards.