[前端]夜间模式简单实现

页面文件

<-- 这个要放在css之前或者php wp_head()之前, 如果已经切换为dark模式了, 那就变黑 -->

正常加载css


加载dark.js


按钮,单击会切换黑暗模式

dark.js文件

//点击切换暗黑
function setDark() {
  localStorage.setItem("isDarkMode", "1");
  document.documentElement.classList.add("dark");
}

function removeDark() {
  localStorage.setItem("isDarkMode", "0");
  document.documentElement.classList.remove("dark");
}

function switchDarkMode() {
  let isDark = localStorage.getItem("isDarkMode");
  if (isDark == '1') {
    removeDark();
  } else {
    setDark();
  }
}