This is the 18th day of my participation in the August Genwen Challenge.More challenges in August

Dark mode is familiar to most people. Most apps and Web pages already support dark mode. Dark mode, which adjusts the overall color and contrast to reduce white dots and screen brightness, protects the user’s eyesight. How to manually implement the website’s dark/light color mode, without using third-party plug-in support, just grasp a few core points.

  • Prepare dark/light CSS styles
  • Listen for system mode switching
  • Localization stores the current schema
  • Manual switch theme implementation

Style to prepare

Two style files, ThemeLight. Less and Themedark. less, are used and fully introduced. This controls the style class name of the body tag and switches to the corresponding style file.

document.querySelector("html").setAttribute("class".`${theme}-mode`);
Copy the code

The core to realize

Create theme. Js as the core for pattern control, and set two basic methods, set and get, to set and get the current theme mode. The set method mainly switches the style of the body tag, so as to realize the overall visual switch, and saves the switched theme in the browser cache, so that when the user refreshes or enters the next time, the theme mode of the last switch can be kept. Get preferentially retrieves the previously set schema from local storage, and if none exists, the set method is called to set the default theme. The concrete implementation is as follows:

export const useTheme = () = > {
  const themeMode = {};

  /** * Set theme mode *@param {String} The theme topics *@return {String} Theme * /
  themeMode.set = (theme = "light") = > {
    document.querySelector("html").setAttribute("class".`${theme}-mode`);
    window.localStorage.setItem("theme", theme);
    return theme;
  }

  /** * gets the current theme mode, initialized to light *@return {String} Theme * /
  themeMode.get = () = > {
    const currentTheme = window.localStorage.getItem("theme");

    return currentTheme ? currentTheme : themeMode.set("light");
  }

  return {
    themeMode
  }
}
Copy the code

Manual trigger

This section is placed in the theme toggle button component and is excerpted from it. After introducing useTheme, you can call the set method to manually set the theme.

const { themeMode } = useTheme();

// Trigger the theme switch manually
const setCurrentThemeMode = () = > {
	const val = props.themeMode === "light" ? "dark" : "light";
	const setThemeMode = themeMode.set(val);

	emit("change", setThemeMode);
};
Copy the code

System to monitor

Here we use the Windows matchMediaAPI, which is implemented as follows:

const { themeMode } = useTheme();

// Listen for system theme changes
let listeners = {
	dark: (mediaQueryList) = > {
		if (mediaQueryList.matches) {
			const setThemeMode = themeMode.set("dark");
			emit("change", setThemeMode); }},light: (mediaQueryList) = > {
		if (mediaQueryList.matches) {
			const setThemeMode = themeMode.set("light");
			emit("change", setThemeMode); }}};window
	.matchMedia("(prefers-color-scheme: dark)")
	.addListener(listeners.dark);
window
	.matchMedia("(prefers-color-scheme: light)")
	.addListener(listeners.light);
Copy the code

Welcome to other articles

  • Internationalize your website with Vite2+Vue3 | August Update Challenge
  • Actual combat: The front-end interface request parameters are confused
  • Practice: Implement a Message component with Vue3
  • Actual combat: Vue3 Image components, incidentally support lazy loading
  • What updates does One Piece, vue.js 3.0 bring
  • An article digests the major new features of ES7, ES8, and ES9
  • Common problems and solutions for technical teams
  • Introduction to 10 common new features in ES6
  • Vue3 script Setup syntax is really cool