CSS Dark Mode Tutorial 🌃

Welcome to our comprehensive guide on creating a CSS Dark Mode for your website! In this lesson, we'll explore how to design a visually appealing dark theme that will captivate your audience and improve their viewing experience.

Understanding Dark Mode 💡

Dark Mode, also known as Night Mode, is a user interface (UI) design theme that uses dark colors as the primary backgrounds, and light colors for foreground elements such as text and icons. It reduces eye strain, improves battery life, and provides a modern, sleek aesthetic.

Getting Started 📝

To create a Dark Mode CSS, we'll first set up a light mode and then overwrite the styles to create the dark theme.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Dark Mode Tutorial</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Your HTML content goes here -->
</body>
</html>

Save this HTML structure as index.html. Now, let's create a styles.css file.

Light Mode Styles 🎯

css

/* Light Mode Default Styles */
body {
  background-color: white;
  color: black;
  font-family: Arial, sans-serif;
}

/* Add your HTML content styles here */

Dark Mode Styles 🌃

Next, we'll define our Dark Mode styles within a media query. This allows us to target specific CSS rules only when the screen is dark mode.

css

@media (prefers-color-scheme: dark) {
  /* Dark Mode Styles */
  body {
    background-color: #212529;
    color: white;
  }

  /* Override light mode styles here */
  /* For example, overriding the navbar color */
  nav {
    background-color: #343a40;
  }

  /* Add more dark mode styles here */
}

Adding Functionality 📝

Now, we need a way to toggle the dark mode on and off. We'll use JavaScript to achieve this.

javascript

document.querySelector('body').addEventListener('click', function (e) {
  if (e.target.id === 'toggle') {
    document.documentElement.classList.toggle('dark-theme');
  }
});

Add this JavaScript to your styles.css file. Then, create an HTML element for the toggle switch.

html

<button id="toggle">Toggle Dark Mode</button>

Add the CSS for the toggle button:

css

#toggle {
  display: none;
}

@media (prefers-color-scheme: dark) {
  #toggle {
    display: block;
  }
}

Now, when the user clicks the toggle button, the dark mode will be applied or removed.

Advanced Techniques 💡

To make your Dark Mode more dynamic and user-friendly, consider the following:

Using CSS Custom Properties (Variables): These allow you to define reusable values and easily adjust the color scheme.
CSS Animations: Implement smooth transitions between light and dark modes using CSS animations.
Local Storage: Save the user's preference so that it persists even when they refresh the page or come back later.

Quiz 🎯

Conclusion 📝

By following this tutorial, you've learned how to create a CSS Dark Mode for your website. You now have the foundational knowledge to build stunning, user-friendly dark themes that cater to the ever-growing number of users who prefer a darker viewing experience.

Happy coding! 👋