Overriding the Native Color-Scheme Setting

Implementing dark modes has become crucial with the widespread adoption across various operating systems. While native browser support exists through the CSS media rule @media (prefers-color-scheme: dark), it may not fully address user preferences or cater to unsupported browsers like Microsoft Edge.

Decoupling System Settings from Website Theme

To provide optimal user control, it's crucial to allow users to override the system's color-scheme setting. This ensures they can choose the theme they prefer for a specific website. To achieve this, a combination of CSS variables and JavaScript is utilized.

CSS Configuration

CSS variables define the theme parameters:

:root {
  --font-color: #000;
  --link-color: #1C75B9;
  --link-white-color: #fff;
  --bg-color: rgb(243,243,243);
}

[data-theme="dark"] {
  --font-color: #c1bfbd;
  --link-color: #0a86da;
  --link-white-color: #c1bfbd;
  --bg-color: #333;
}

Variables are used throughout the stylesheet to ensure flexibility:

body {
  color: #000;
  color: var(--font-color);
  background: rgb(243,243,243);
  background: var(--bg-color);
}

JavaScript Implementation

JavaScript plays a pivotal role in detecting user preferences and toggling between themes:

function detectColorScheme() {
  let theme = "light";

  if (localStorage.getItem("theme") == "dark") {
    theme = "dark";
  } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
    theme = "dark";
  }

  if (theme == "dark") {
    document.documentElement.setAttribute("data-theme", "dark");
  }
}

detectColorScheme();

The toggleTheme function handles theme switching:

function switchTheme(e) {
  if (e.target.checked) {
    localStorage.setItem('theme', 'dark');
    document.documentElement.setAttribute('data-theme', 'dark');
  } else {
    localStorage.setItem('theme', 'light');
    document.documentElement.setAttribute('data-theme', 'light');
  }  
}

This JavaScript ensures automatic theme detection and allows users to override it with a checkbox:

Conclusion

By combining CSS variables and JavaScript, we empower users with the ability to control the color scheme of a website, regardless of their system settings. This approach ensures an enhanced user experience, catering to individual preferences and the limitations of various browsers.