Step-by-Step Guide to Light/Dark Mode on Bear Blog

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:

1. Switching between light and dark modes when the user clicks the icon.
2. 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 to set up the theme on page load and code in the

to update elements after the page is fully loaded.

To add code to the and

on Bear, go to Settings > Header and footer directives.

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);

JavaScript Code

This code shows the correct icon based on the preferredScheme variable that was set previously in the . 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!

The above is the detailed content of Step-by-Step Guide to Light/Dark Mode on Bear Blog. For more information, please follow other related articles on the PHP Chinese website!