I would like to keep the selected theme when refreshing the page as well as across all other pages. I've seen other examples but I don't know how to implement it in the code as I'm quite newbie. I've included the code of the functionality so far. Many thanks in advance.

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>

推荐答案

For that you could use localStorage. Keep your HTML and CSS code as they are. Your JavaScript code could be like so :

// 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相关问答推荐

如何将Cookie从服务器发送到用户浏览器

我怎么才能得到Kotlin的密文?

在执行异步导入之前判断模块是否已导入()

如何迭代叔父元素的子HTML元素

当id匹配时对属性值求和并使用JavaScript返回结果

TypeError:无法分解';React2.useContext(...)';的属性';basename';,因为它为空

如何在.NET Core中将chtml文件链接到Java脚本文件?

使用插件构建包含chart.js提供程序的Angular 库?

Next.js中的服务器端组件列表筛选

在渲染turbo流之后滚动到元素

FindByIdAndUpdate在嵌套对象中创建_id

在使用JavaScript以HTML格式显示Google Drive中的图像时遇到问题

react :图表负片区域不同 colored颜色

在AgGrid中显示分组行的单元格值

为什么我的Reaction组件不能使用createBrowserRouter呈现?

Iterator.Next不是进行socket.end()调用后的函数

我怎样才能让我的时间停下来,这样我的精灵在时间到了之后就不会互相攻击了?

如何根据对象数组中的用户条目进行筛选

MarkLogic JavaScript如何获取元素 node 的空间

在Next.js v12.3.1和Reaction v18.2.0";中缩小了REACT错误#418和#423