Adding Dark Mode for WordPress

script.js

// Detect user's color preference and load appropriate style sheet
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.documentElement.classList.add('dark-mode');
} else {
  document.documentElement.classList.add('light-mode');
}

style.css

/* Dark mode styles */
body.dark-mode {
  background-color: #333;
  color: #fff;
}

/* Light mode styles */
body.light-mode {
  background-color: #fff;
  color: #333;
}

WP-Dark-Mode.txt

- Create a new style sheet that includes your dark mode styles (e.g., background color, text color, etc.)
- Use JavaScript to detect whether the user prefers a dark or light color scheme, and load the appropriate style sheet accordingly
- Use the prefers-color-scheme media query to detect the user's color preference.