Step-by-Step Guide: Implement Dark Mode with CSS and 3 Lines of JavaScript | Avira Digital Studios

Dark mode has become an increasingly popular feature on websites and applications, offering users a visually appealing and more comfortable browsing experience, especially in low-light conditions. If you've been wondering how to implement this eye-catching feature, look no further! In this blog, we'll show you a simple and effective way to create a dark mode for your website using just CSS and three lines of JavaScript. Get ready to impress your visitors with Avira Digital Studios' step-by-step guide.

1. Understanding the Power of CSS Variables:

Before diving into the implementation, let's grasp the significance of CSS variables. These variables allow us to store and reuse values across our stylesheets, enabling a smooth transition between light and dark modes. To set up the foundation for our dark mode, we'll begin by defining essential CSS variables.

cssCopy code:root {
  --background-color-light: #ffffff;
  --background-color-dark: #1f1f1f;
  --text-color-light: #333333;
  --text-color-dark: #f0f0f0;
}

1. Creating the Dark Mode Styles:

Now that we have our CSS variables in place, it's time to apply them to different elements and build the styles for our dark mode. We'll use media queries to detect the user's preference and adjust the styles accordingly.

cssCopy codebody {
  background-color: var(--background-color-light);
  color: var(--text-color-light);
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--background-color-dark);
    color: var(--text-color-dark);
  }
}

1. Implementing Dark Mode with JavaScript:

With the CSS groundwork laid out, we'll now use JavaScript to add interactivity and allow users to toggle between light and dark modes effortlessly. The following three lines of JavaScript will enable this functionality.

javascriptCopy codeconst toggleSwitch = document.querySelector('.dark-mode-toggle input[type="checkbox"]');
const currentTheme = localStorage.getItem('theme');

if (currentTheme) {
  document.documentElement.setAttribute('data-theme', currentTheme);
  if (currentTheme === 'dark') {
    toggleSwitch.checked = true;
  }
}

toggleSwitch.addEventListener('change', (e) => {
  if (e.target.checked) {
    document.documentElement.setAttribute('data-theme', 'dark');
    localStorage.setItem('theme', 'dark');
  } else {
    document.documentElement.setAttribute('data-theme', 'light');
    localStorage.setItem('theme', 'light');
  }
});

Conclusion:

Congratulations! You've successfully implemented a stylish dark mode using just CSS and three simple lines of JavaScript. By understanding the power of CSS variables, creating dark mode styles, and adding interactivity with JavaScript, your website now offers visitors a seamless transition between light and dark modes. Embrace this aesthetically pleasing and user-friendly feature, courtesy of Avira Digital Studios, and enhance your website's overall appeal and accessibility. Happy coding!