A user script to toggle Reddit's dark mode automatically based on your system preferences

reddit-dark-mode-system.js

// Get the initial state
const query = window.matchMedia('(prefers-color-scheme: dark)');

function toggleDarkMode(toggle = query.matches) {
  // Open the menu
  document.querySelector('#USER_DROPDOWN_ID[aria-expanded="false"]')?.click();

  // Get the wrapper item
  const wrapper = Array.from(document.querySelectorAll('button')).find(({ innerText }) => innerText.toLowerCase() === 'dark mode');
  const checkbox = wrapper?.querySelector(`[aria-checked="${!toggle}"]`);
  checkbox?.click();
  
  // Close the menu
  document.querySelector('#USER_DROPDOWN_ID[aria-expanded="true"]')?.click();
}
  
// Listen for changes
query.addEventListener('change', (event) => toggleDarkMode(event.matches));

// Run when DOM parsed with a delay for React rendering
document.addEventListener("DOMContentLoaded", () => {
  setTimeout(() => toggleDarkMode(), 200);
});

// Run when visibility changes (e.g. switching tabs)
document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "visible") {
    toggleDarkMode();
  }
});