How to support dark mode, approaches in CSS and JS

• Using CSS Media Queries
• Using JavaScript
• Saving User Preference
• Using CSS Variables

Dark Mode has been one of the trendiest features in user interface design over the past few years. More and more applications and websites offer a dark mode option for their users. This article will guide you through different approaches to implementing dark mode in your web applications using CSS and JavaScript.

¶Using CSS Media Queries

The simplest way to support dark mode is by using the prefers-color-scheme media feature in CSS. It lets you detect if the user has requested the system to use a light or dark color theme.

Here is an example:

/* Default light mode */
body {
  background-color: white;
  color: black;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

In this example, the page will be shown with a light theme by default. But if a user has set their preference for a dark theme at the operating system level, the media query will activate and apply the dark theme styles.

¶Using JavaScript

If you need more control and want to let users toggle dark mode on and off within your application, you'll need to use JavaScript. Here's how you could implement a toggle switch:

const toggleSwitch = document.querySelector('.theme-switch');

toggleSwitch.addEventListener('change', function() {
  if (this.checked) {
    document.body.setAttribute('data-theme', 'dark');
  } else {
    document.body.removeAttribute('data-theme');
  }
});

Then, in your CSS, you can use attribute selectors to apply different styles:

/* Default light mode */
body {
  background-color: white;
  color: black;
}

/* Dark mode */
body[data-theme="dark"] {
  background-color: black;
  color: white;
}

This approach gives users the option to choose their preferred theme within your application, independent of their system settings.

¶Saving User Preference

If you want to save the user's preference for subsequent visits, you can store it in localStorage. Here's how you can update the JavaScript:

const toggleSwitch = document.querySelector('.theme-switch');

// Load the saved theme
const savedTheme = localStorage.getItem('theme') || 'light';
document.body.setAttribute('data-theme', savedTheme);
toggleSwitch.checked = savedTheme === 'dark';

// Save the theme on toggle
toggleSwitch.addEventListener('change', function() {
  const theme = this.checked ? 'dark' : 'light';
  document.body.setAttribute('data-theme', theme);
  localStorage.setItem('theme', theme);
});

This way, the user's theme preference will persist across sessions.

¶Using CSS Variables

One of the most powerful ways to implement dark mode is to use CSS Custom Properties (or CSS Variables). This approach allows you to define your color palette in one place and easily switch between light and dark modes:

:root {
  --text-color: black;
  --bg-color: white;
}

[data-theme="dark"] {
  --text-color: white;
  --bg-color: black;
}

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

By just changing the root CSS variables, you can drastically change the look of your website.

Implementing dark mode support in your web application can significantly enhance the user experience. Whether you use simple CSS media queries, or more dynamic JavaScript-based solutions, the key is to ensure that your design remains consistent, accessible, and user-friendly in both light and dark themes.