Home > Article > Web Front-end > How to Override the Native Dark Mode Setting and Provide Users with Flexible Display Control?
How to Override the Native Dark Mode Setting
Introduction
With the proliferation of dark modes on various platforms, it's important to provide users with flexibility in choosing their preferred display appearance. This article addresses the challenge of overriding the native browser setting to toggle between dark and default modes, even if the user's system is set to dark mode.
CSS Variables and Themes
To create a switchable theme system, CSS variables and themes can be used. The root element defines default variables for light mode, while a dedicated dark theme overrides these variables with dark-themed values.
<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>
Elements then reference these variables, providing a consistent and global theme across the website.
<code class="css">body { color: #000; color: var(--font-color); background: rgb(243, 243, 243); background: var(--bg-color); }</code>
JavaScript for Detection and Toggling
To automatically detect the user's preferred theme or override the system setting, JavaScript is employed. The detectColorScheme function checks for user-defined preferences in local storage, browser support for matchMedia, or the system's dark mode preference.
<code class="javascript">function detectColorScheme() { var theme = "light"; // Default to light // Prioritize local storage override if (localStorage.getItem("theme")) { if (localStorage.getItem("theme") == "dark") { theme = "dark"; } } else if (!window.matchMedia) { // No support for matchMedia return false; } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) { // System dark mode detected theme = "dark"; } // Set `data-theme` attribute on document root if (theme == "dark") { document.documentElement.setAttribute("data-theme", "dark"); } } detectColorScheme();</code>
A toggle switch allows users to manually override their theme preference. The switchTheme function updates the data-theme attribute and sets a localStorage variable to persist the setting across page loads.
<code class="javascript">const toggleSwitch = document.querySelector('#theme-switch input[type="checkbox"]'); function switchTheme(e) { if (e.target.checked) { localStorage.setItem('theme', 'dark'); document.documentElement.setAttribute('data-theme', 'dark'); toggleSwitch.checked = true; } else { localStorage.setItem('theme', 'light'); document.documentElement.setAttribute('data-theme', 'light'); toggleSwitch.checked = false; } } toggleSwitch.addEventListener('change', switchTheme, false);</code>
Conclusion
By combining CSS variables, themes, and JavaScript, websites can provide users with a customizable and user-centric interface, regardless of their system preferences or override desires. This solution allows for the coexistence of dark and light themes while ensuring a consistent and controlled visual experience across the entire application.
The above is the detailed content of How to Override the Native Dark Mode Setting and Provide Users with Flexible Display Control?. For more information, please follow other related articles on the PHP Chinese website!