How can I create a customizable dark mode for my website using CSS Variables and JavaScript?

Customizing Dark Mode with CSS Variables and JavaScript

Implementing a dark mode for your app or website is crucial in providing a seamless user experience. Native CSS media rules offer an option for browsers to detect system-set dark modes, but users may prefer a different theme for specific sites or browsers that don't support it yet, such as Microsoft Edge.

To address this, we can utilize CSS variables and JavaScript to manage theme settings.

CSS Customization with Variables and Themes

Define CSS variables at the root or default level, and specify a dark theme:

<code class="css">:root {
    --font-color: #000;
    ...
    --bg-color: rgb(243,243,243);
}

[data-theme="dark"] {
    --font-color: #c1bfbd;
    ...
    --bg-color: #333;
}</code>

Call the variables where needed to adjust styles dynamically.

JavaScript for Theme Detection and Toggling

In the header section of your HTML, add JavaScript to detect the user's preferred theme:

<code class="javascript">function detectColorScheme() {
    var theme = "light";
    ...
}
detectColorScheme();</code>

Use JavaScript to toggle between light and dark themes:

<code class="javascript">const toggleSwitch = document.querySelector('#theme-switch input[type="checkbox"]');

function switchTheme(e) {
    ...
}

toggleSwitch.addEventListener('change', switchTheme, false);</code>

HTML for Theme Toggling

Create an HTML checkbox for user-controlled theme switching:

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

With this approach, you can automatically detect the user's theme, allow them to override it, and provide a customized experience across browsers and platforms.

The above is the detailed content of How can I create a customizable dark mode for my website using CSS Variables and JavaScript?. For more information, please follow other related articles on the PHP Chinese website!