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:

:root {
    --font-color: #000;
    ...
    --bg-color: rgb(243,243,243);
}

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

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:

function detectColorScheme() {
    var theme = "light";
    ...
}
detectColorScheme();

Use JavaScript to toggle between light and dark themes:

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

function switchTheme(e) {
    ...
}

toggleSwitch.addEventListener('change', switchTheme, false);

HTML for Theme Toggling

Create an HTML checkbox for user-controlled theme switching:

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.