My goal is to switch one of 4 theme files with one of two different folders and locally and permanently storage both folder and theme names.
Everything worked until I refreshed the site, localStorage stored the wrong folder name and the wrong theme name, for example, if you choose “ion” from “voxel”, then when you refresh, you'll see “cyberpunk” selected, while the console showed “gusbemacbe/ion.css”
Here how tree is like:
assets/css/tokens
├── gusbemacbe
│ └── cyberpunk.css
└── voxel
├── ion.css
├── itau.css
└── iti.css
And in the HTML code with explanations:
<!-- the "active_stylesheet" identifier will be caught to change the stylesheet address. Observe "voxel" (folder) and "ion" (theme) -->
<link rel="stylesheet" media="screen" type="text/css" href="assets/css/tokens/voxel/ion.css" id="active_stylesheet">
<!--
- the "ThemeSelect" identified will be caught to get the option value for the theme name.
- the 'onchange="setFolder()"' command will be caught to get "data-id" value for the folder name.
-->
<select id="ThemeSelect" onchange="setFolder()">
<option data-id="gusbemacbe" value="cyberpunk" selected>cyberpunk</option>
<option data-id="voxel" value="ion">íon</option>
<option data-id="voxel" value="itau">itaú</option>
<option data-id="voxel" value="iti">iti</option>
</select>
<script src="assets/js/global.js"></script>
And in the JavaScript code with explanations:
// this function will change the stylesheet address with the folder and theme values
function changeCSS(sheet) {
document.getElementById('active_stylesheet').setAttribute('href', sheet);
}
// this function will catch the function command at that select element to get the data-id value.
function setFolder() {
const e = document.getElementById("ThemeSelect");
const folder = e.options[e.selectedIndex].getAttribute("data-id");
return folder;
}
// this function will create the new address, catching the folder and theme values, and setting to store the values
function setTheme(theme) {
changeCSS("assets/css/tokens/" + setFolder() + "/" + theme + ".css")
localStorage.setItem('folder', setfolder());
localStorage.setItem('theme', theme);
}
// this event will catch the option value with the identifider
ThemeSelect.addEventListener('change', function () {
setTheme(this.value)
});
// this will store permanently the storages setted by the functions
const getTheme = () => {
const theme = localStorage.getItem('theme');
theme && setTheme(theme);
const folder = localStorage.getItem('folder');
folder && setFolder(folder);
}
getTheme();