Use prefers-color-scheme media queries to automatically enable dark mode according to user system preferences; 2. Add toggle buttons through JavaScript and combine CSS classes and localStorage to enable manual mode switching and remember user selection; 3. The best practice is to combine both, prioritize system preferences but allow user coverage. If the user has selected the page, use the settings in localStorage if the page is loaded, otherwise follow the system preferences, and use CSS custom properties to uniformly manage theme colors to improve maintainability and user experience.

Creating a dark mode with CSS is simple and can be done in a few different ways. The most common and user-friendly approach uses CSS custom properties (variables) and the prefers-color-scheme media query to automatically match the user's system preference. You can also add a toggle button for manual control. Here's how.

1. Use prefers-color-scheme for automatic dark mode

This method detects the user's OS-level preference (eg, dark mode enabled in Windows, macOS, or mobile settings).

 /* Default (light mode) styles */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}

/* Dark mode styles when user prefers dark */
@media (prefers-color-squeheme: dark) {
  :root {
    --bg-color: #121212;
    --text-color: #e0e0e0;
  }
}

/* Apply variables to the page */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: Arial, sans-serif;
  transition: background-color 0.3s, color 0.3s; /* Smooth transition */
}

This gives an automatic dark mode without any JavaScript.

2. Add a manual toggle button with JavaScript and CSS classes

If you want users to manually switch between light and dark mode, use a class-based approach.

HTML:

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

CSS:

 /* Light mode (default) */
body {
  background-color: #ffffff;
  color: #333333;
  transition: background-color 0.3s, color 0.3s;
}

/* Dark mode class */
body.dark-mode {
  background-color: #121212;
  color: #e0e0e0;
}

JavaScript:

 const toggleButton = document.getElementById('theme-toggle');
const currentTheme = localStorage.getItem('theme');

// On load, apply saved theme
if (currentTheme === 'dark') {
  document.body.classList.add('dark-mode');
}

// Toggle theme on button click
toggleButton.addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');

  // Save preference
  if (document.body.classList.contains('dark-mode')) {
    localStorage.setItem('theme', 'dark');
  } else {
    localStorage.setItem('theme', 'light');
  }
});

This remembers the user's choice using localStorage .

3. Combine both approaches (recommended)

For the best user experience, respect the system preference unless the user manually overrides it.

 const currentTheme = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

// If user has made a choice, use it; otherwise, follow system preference
if (currentTheme === 'dark' || (!currentTheme && prefersDark)) {
  document.body.classList.add('dark-mode');
}

// Update localStorage when user toggles
toggleButton.addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');

  const isDark = document.body.classList.contains('dark-mode');
  localStorage.setItem('theme', isDark ? 'dark' : 'light');
});

This way:

• First visit: uses OS setting
• After toggle: remembers user's choice

Bonus: Use CSS custom properties for easier themed

You can define all your theme-related colors as variables and update them together:

 :root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --card-bg: #f8f9fa;
}

body.dark-mode {
  --bg-color: #121212;
  --text-color: #e0e0e0;
  --card-bg: #1f1f1f;
}

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

This makes managing themes much easier across large sites.

Basically, automatic detection with prefers-color-scheme is a great start, but adding a manual toggle with persistent preference improves usability. Use CSS variables and a little JavaScript to make it smooth and user-friendly.

The above is the detailed content of How to create a dark mode with CSS?. For more information, please follow other related articles on the PHP Chinese website!