How to Implement Dark Mode and Customization in Web Design

With more users spending time on digital devices, dark mode and customization have become essential features in modern web design. Dark mode offers a sleek, eye-friendly alternative to light themes, while customization enhances user engagement by allowing them to personalize their experience.

Here’s how to easily implement dark mode and customization using CSS Custom Properties (variables) and JavaScript.

Step 1: Implement Dark Mode Using CSS Custom Properties

CSS Custom Properties allow you to define variables for different theme settings.

1. Define Variables for Light Mode:

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

1. Define Variables for Dark Mode using the prefers-color-scheme media query:

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

1. Apply Variables in your CSS:

body {
  background-color: var(--background-color);
  color: var(--text-color);
}
a {
  color: var(--primary-color);
}

This automatically switches between light and dark modes based on the user's system preference.

Step 2: Add a Manual Dark Mode Toggle

You can allow users to manually toggle between light and dark modes.

1. Create a Toggle Button in your HTML:

<button id="dark-mode-toggle">Toggle Dark Mode</button>

1. Write JavaScript to Handle the Toggle:

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

1. Define Dark Mode Classes:

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

Now users can manually switch between modes with the button.

Step 3: Add Customization with Theme Options

Let users choose different color themes for further customization.

1. Define Multiple Themes in CSS:

:root.theme-blue {
  --primary-color: #1e90ff;
}

:root.theme-green {
  --primary-color: #32cd32;
}

1. Create Theme Buttons:

<button class="theme-button" data-theme="theme-blue">Blue Theme</button>
<button class="theme-button" data-theme="theme-green">Green Theme</button>

1. Use JavaScript to Switch Themes:

const themeButtons = document.querySelectorAll('.theme-button');
themeButtons.forEach(button => {
  button.addEventListener('click', () => {
    const theme = button.dataset.theme;
    document.documentElement.className = theme;
  });
});

This allows users to personalize their experience with different color themes.

By combining CSS Custom Properties and JavaScript, you can easily implement dark mode and allow for user customization. This improves user satisfaction and engagement, keeping your design modern and flexible.

For more tips on web development, check out DailySandbox and sign up for our free newsletter to stay ahead of the curve!