时间戳

首页 > 解决方案 > 保留不同 html 页面之间的按钮完成的颜色更改

javascript - 保留不同 html 页面之间的按钮完成的颜色更改

问题描述

我有一个网站，其中一个按钮用于将 CSS 配色方案更改为暗色；

$(document).ready(function () {
  $(".theme-switch").on("click", () => {
    $("body").toggleClass("dark-theme");
  });
});

这会改变 CSS 中的颜色变量，进而改变特定页面的配色方案。但是我怎样才能在整个网站中保留这种颜色变化呢？

标签： javascripthtmlcss

解决方案

如果您想保存它并稍后访问它，您可以执行以下操作：

$(document).ready(function () {
  let darkTheme = localStorage.getItem('theme') === 'dark';
  updateTheme();

  function updateTheme() {
      if (darkTheme) {
          $("body").addClass("dark-theme");
      } else {
          $("body").removeClass("dark-theme");
      }
  }

  $(".theme-switch").on("click", () => {
      darkTheme = !darkTheme;
      updateTheme();
      localStorage.setItem('theme', darkTheme ? 'dark' : 'light');
  });
});

您还可以添加它以确保它在所有选项卡中更改：

window.addEventListener('storage', () => {
     darkTheme = localStorage.getItem('theme') === 'dark';
     updateTheme();
});

（之前function updateTheme()）。该storage事件会随时触发localStorage或sessionStorage在您的域的另一个选项卡中更新。它对于选项卡之间的通信很有用。

推荐阅读