I recently implemented a light/dark-mode switch on my Bear blog using the prefers-color-scheme media feature combined with the light-dark() color function.
Here’s how I did it.
Step 1: Setting Up the CSS
CSS has gained some cool new features over the past few years, including the light-dark() color function. This function lets you specify two colors for any element—one for light mode and one for dark mode.
For instance, if you want your background to be white in light mode and black in dark mode, here’s how you’d set it up:
body {
background-color: light-dark(#fff, #000);
}
I applied this approach to all elements with different color needs in light and dark modes.
Step 2: Adding the HTML
For the theme toggle, I used a single icon rather than a switch, radio buttons, or dropdown menu. The page loads with only the icon for switching to the opposite mode visible—since my default theme is dark, the dark-mode icon is initially hidden and the icon to switch to light-mode is visible.
The onclick event calls a switchMode() function, which handles toggling between light and dark themes (more on that later). Here’s the HTML setup:
<a id="preferdark" onclick="switchMode('dark')" style="display: none;">
<!-- Icon for switching to dark mode. -->
</a>
<a id="preferlight" onclick="switchMode('light')">
<!-- Icon for switching to light mode. -->
</a>
Step 3: Creating the JavaScript
The JavaScript handles two key tasks:
- Switching between light and dark modes when the user clicks the icon.
- Storing the user’s theme preference in localStorage to load it automatically on future visits.
The JavaScript is split into two parts: code in the <head> to set up the theme on page load and code in the <footer> to update elements after the page is fully loaded.
To add code to the <head> and <footer> on Bear, go to Settings > Header and footer directives.
<head> JavaScript Code
This code retrieves the previously saved theme from local storage, if available. Otherwise, it checks if the user’s browser or OS prefers a light or dark theme. If that information is not available, it defaults to dark mode. Then, it applies that mode to the :root element (i.e. the base element):
const storedScheme = localStorage.getItem("color-scheme");
const preferredScheme = storedScheme
? storedScheme
: window &&
window.matchMedia &&
window.matchMedia('(prefers-color-scheme: light)').matches ? "light" : "dark";
document.querySelector(':root').style.setProperty("color-scheme", preferredScheme);
<footer> JavaScript Code
This code shows the correct icon based on the preferredScheme variable that was set previously in the <head>. The switchMode() function updates the icon display, changes the :root color scheme, and saves the new preference in local storage:
document.querySelector("#preferlight").style.display = preferredScheme === "light"
? "none"
: "";
document.querySelector("#preferdark").style.display = preferredScheme === "light"
? ""
: "none";
function switchMode(mode) {
document.getElementById("preferlight").style.display = mode === "light"
? "none"
: "";
document.getElementById("preferdark").style.display = mode === "light"
? ""
: "none";
document.querySelector(':root').style.setProperty("color-scheme", mode);
localStorage.setItem("color-scheme", mode);
}
And that’s it—a light/dark mode switch for your Bear blog!
Top comments (0)