To implement dark mode, there are three methods: 1. Use prefers-color-scheme media to query and detect system preferences and automatically apply dark styles; 2. Use CSS custom attributes to uniformly manage color themes, improve maintenance efficiency and facilitate subsequent expansion; 3. Add buttons to manually switch themes through JavaScript, and save user selections in combination with localStorage. Combining these three methods can achieve a complete solution that prioritizes response to system settings and supports user-defined customization.

Implementing Dark Mode has now become a standard feature in modern web design. If you want your website to automatically switch topics based on user's system preferences, or let users manually select dark/light modes, using CSS media queries and custom properties is an easy and effective way to do this.

1. Use prefers-color-scheme media query to detect user preferences

CSS provides a very practical media feature: prefers-color-scheme , which can detect whether the user's operating system has dark or light colors set.

 @media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #eaeaea;
  }
}

After writing this way, if the user enables the system's dark mode, the page will apply the dark style you set. The benefit of this approach is that it does not require any JavaScript , pure CSS implementation, and is performance-friendly.

Note: This method can only respond to the user's system settings and cannot allow users to manually switch topics within the web page.

2. Use CSS custom properties (variables) to uniformly manage color themes

For more flexible control of styles in different modes, it is recommended to use CSS variables to centrally define color values.

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

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212;
    --text-color: #eaeaea;
  }
}

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

The advantages of this method are:

• Unified style management, convenient maintenance
• When switching mode, you only need to modify and change the value, and you do not need to repeat the style.
• It is easier to manually switch themes in combination with JS.

3. Add button to manually switch themes (optional)

If you want users to choose their own theme on the page, you can dynamically modify CSS variables through JavaScript.

Add toggle button in HTML:

 <button id="theme-toggle">Switch theme</button>

Example of JS control logic:

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

toggleButton.addEventListener('click', () => {
  const currentTheme = document.documentElement.getAttribute('data-theme');
  if (currentTheme === 'dark') {
    document.documentElement.setAttribute('data-theme', 'light');
    localStorage.setItem('theme', 'light');
  } else {
    document.documentElement.setAttribute('data-theme', 'dark');
    localStorage.setItem('theme', 'dark');
  }
});

Then define the corresponding topic variable in CSS:

 :root[data-theme="light"] {
  --bg-color: #ffffff;
  --text-color: #333333;
}

:root[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #eaeaea;
}

This will enable the dual mechanism of "priority response system settings to support manual switching".

Tips: You can read the user's previous selection and save it to localStorage , and directly apply their preferred theme the next time you visit.

Basically that's it. Through media query and judging system preferences, using CSS variables to uniformly manage colors, and adding JS manual switching capabilities, a complete and lightweight dark mode solution can be achieved. What is not complicated but easy to ignore is the details of variable naming and state persistence. If you are not careful, it may affect the experience.

The above is the detailed content of Implementing CSS Dark Mode using media queries and custom properties. For more information, please follow other related articles on the PHP Chinese website!