How to Override the Native Color-Scheme Setting for a Better User Experience?

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:

<code class="css">: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;
}</code>

Variables are used throughout the stylesheet to ensure flexibility:

<code class="css">body {
  color: #000;
  color: var(--font-color);
  background: rgb(243,243,243);
  background: var(--bg-color);
}</code>

JavaScript Implementation

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

<code class="javascript">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();</code>

The toggleTheme function handles theme switching:

<code class="javascript">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');
  }  
}</code>

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

<code class="html"><label id="theme-switch" class="theme-switch" for="checkbox_theme">
  <input type="checkbox" id="checkbox_theme">
</label></code>

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.

The above is the detailed content of How to Override the Native Color-Scheme Setting for a Better User Experience?. For more information, please follow other related articles on the PHP Chinese website!