我想在刷新页面以及所有其他页面时保留所选主题.我见过其他例子,但我不知道如何在代码中实现它,因为我是个新手.到目前为止,我已经包含了该功能的代码.非常感谢.

function changeTheme(bgColor, textColor) {
  var styles = document.documentElement.style;
  styles.setProperty('--bg-color', bgColor);
  styles.setProperty('--text-color', textColor);
}

var dark = document.querySelector('#dark');
var light = document.querySelector('#light');
var blue = document.querySelector('#blue');

dark.addEventListener('click', function() {
  changeTheme('#333', 'white');
});

light.addEventListener('click', function() {
  changeTheme('white', 'black');
});

blue.addEventListener('click', function() {
  changeTheme('#2982F5', 'white');
});
:root {
  --bg-color: #333;
  --text-color: white;
}

body {
  font-family: sans-serif;
  background: #c0c0c0;
}

nav {
  color: var(--text-color);
  background: var(--bg-color);
}

ul {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style-type: none;
}

li {
  margin-left: 15px;
}

a {
  color: var(--text-color);
}
<nav>
  <ul>
    <p>Select theme:</p>
    <li>
      <a href="#" id="dark">Dark</a>
    </li>
    <li>
      <a href="#" id="light">Light</a>
    </li>
    <li>
      <a href="#" id="blue">Blue</a>
    </li>
  </ul>
</nav>

推荐答案

你可以用localStorage块.保持HTML和CSS代码的原样.您的JavaScript代码可能是这样的:

// get stored theme on load
let storedTheme = localStorage.getItem("theme");
if(storedTheme){
 storedTheme= JSON.parse(storedTheme);
 changeTheme(storedTheme.bgColor, storedTheme.textColor);
}

function changeTheme(bgColor, textColor) {
  // updtate stored data when there is a click
  localStorage.setItem("theme", JSON.stringify({bgColor:bgColor, textColor:textColor}));
  var styles = document.documentElement.style;
  styles.setProperty('--bg-color', bgColor);
  styles.setProperty('--text-color', textColor);
}

var dark = document.querySelector('#dark');
var light = document.querySelector('#light');
var blue = document.querySelector('#blue');

dark.addEventListener('click', function() {
  changeTheme('#333', 'white');
});

light.addEventListener('click', function() {
  changeTheme('white', 'black');
});

blue.addEventListener('click', function() {
  changeTheme('#2982F5', 'white');
});

Javascript相关问答推荐

React 18,useEffect 被调用了两次

将元素添加到 const 集

我们如何使用 Nodejs 从 web3 获取数据

在 Javascript 中shuffle 嵌套数组

如何在html中刷新选择列表

在 JavaScript 中,我可以阻止 onmouseup 事件被触发,用我自己的事件替换它吗?

Typescript 自动生成的 JS 文件:“Uncaught TypeError: Failed to resolve module specifier”

Sequelize ORDER BY ASC 数字字符串

如何将对象键设置为公分母?

Svelte 仅支持 es6+ 语法.将“compilerOptions.target”设置为“es6”或更高

runtime.js:7 未捕获的错误:[RequireAuth] 不是 组件. 的所有子组件必须是

在 Javascript 中,(动态)导入的 ES6-Module 实例的类型/类是什么?

如何从 Firebase 版本 7 中删除数据?

如何在 React Native 上的 Firebase 中获取特定文档的文档 ID?

制作动态可调用Typescript 接口属性

createAsyncThunk 中的参数和参数应该如何设置?

为什么 X === (A || B || C) 什么都不匹配?

如何对空格和单词“and”进行 URL 编码?

使用 CSS 动画显示和隐藏

有没有办法在 JS 中将一个键的值设置为与同一对象中另一个键的值相同?