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>
CodePudding user response:
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');
});
CodePudding user response:
You can set them to local storage
and get it in first load
function changeTheme(bgColor, textColor) {
var styles = document.documentElement.style;
styles.setProperty('--bg-color', bgColor);
styles.setProperty('--text-color', textColor);
localStorage.setItem('bgtheme', bgColor);
localStorage.setItem('txttheme', 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', 'blue');
});
window.onload = (event) => {
let bgColor = localStorage.getItem('bgtheme');
let txtColor = localStorage.getItem('txttheme');
changeTheme(bgColor, txtColor);
};
: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>
CodePudding user response:
Try this example:
<!doctype html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<style>
:root {
--bg-color: #333;
--text-color: white;
}
body {
font-family: sans-serif;
background: #c0c0c0;
}
nav {
color: var(--text-color);
background: var(--bg-color);
}
ul {
dislpay: flex;
justify-content: center;
align-items: center;
list-style-type: none;
}
li {
margin-left: 15px;
}
a {
color: var(--text-color);
}
</style>
</head>
<body>
<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>
<script>
const app = () => {
// - - app
const appBgColor = localStorage.getItem('appBgColor')
const appTextColor = localStorage.getItem('appTextColor')
if (appBgColor && appTextColor) {
changeTheme(appBgColor, appTextColor)
}
function changeTheme(bgColor, textColor) {
localStorage.setItem('appBgColor', bgColor)
localStorage.setItem('appTextColor', textColor)
const styles = document.documentElement.style
styles.setProperty('--bg-color', bgColor)
styles.setProperty('--text-color', textColor)
}
const dark = document.getElementById('dark')
const light = document.getElementById('light')
const blue = document.getElementById('blue')
dark.addEventListener('click', () => changeTheme('#333', 'white'))
light.addEventListener('click', () => changeTheme('white', 'black'))
blue.addEventListener('click', () => changeTheme('#2982f5', 'white'))
// - - end app
}
document.addEventListener('DOMContentLoaded', app)
</script>
</body>
</html>