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>