Estoy intentando guardar el tema que los usuarios eligan desde un moda.
El CODIGO ES ESTE: ` (todo sobre el cambio de color esta funcionando, solo hace falta que lo guarde en local storage). Para plantearlo de una mejor manera el id del theme abre un modal como el de la imagen, el html que les he mostrado son las diferentes opciones que muestra el modal. Ahora bien. El cambio de todo lo hace a la perfección.
Es decir que es lo unico que falta, he visto videos de localstorage pero no lo he conseguido.
// THEME
const theme = document.querySelector('#theme');
const themeModal = document.querySelector('.customize-theme');
const fontSizes = document.querySelectorAll('.choose-size span');
var root = document.querySelector(':root');
const colorPalette = document.querySelectorAll('.choose-color span');
const Bg1 = document.querySelector('.bg-1');
const Bg2 = document.querySelector('.bg-2');
const Bg3 = document.querySelector('.bg-3');
// THEME/DISPLAY CUSTOMIZATION
// opens modal
const openThemeModal = () => {
themeModal.style.display = 'grid';
}
// close modal
themeModal.addEventListener('click', closeThemeModal);
theme.addEventListener('click', openThemeModal);
// ======================== FONTS =========================
// remove active class from spans or font size selectors
const removeSizeSelector = () => {
fontSizes.forEach(size => {
size.classList.remove('active');
})
}
fontSizes.forEach(size => {
size.addEventListener('click', () => {
removeSizeSelector();
let fontSize;
size.classList.toggle('active');
if(size.classList.contains('font-size-1')){
fontSize = '10px';
root.style.setProperty('----sticky-top-left', '5.4rem');
root.style.setProperty('----sticky-top-right', '5.4rem');
} else if(size.classList.contains('font-size-2')){
fontSize = '13px';
root.style.setProperty('----sticky-top-left', '5.4rem');
root.style.setProperty('----sticky-top-right', '-7rem');
} else if(size.classList.contains('font-size-3')){
fontSize = '16px';
root.style.setProperty('----sticky-top-left', '-2rem');
root.style.setProperty('----sticky-top-right', '-17rem');
} else if(size.classList.contains('font-size-4')){
fontSize = '19px';
root.style.setProperty('----sticky-top-left', '-5rem');
root.style.setProperty('----sticky-top-right', '-25rem');
} else if(size.classList.contains('font-size-5')){
fontSize = '22px';
root.style.setProperty('----sticky-top-left', '-12rem');
root.style.setProperty('----sticky-top-right', '-35rem');
}
// change font size of the root html element
document.querySelector('html').style.fontSize = fontSize;
})
})
// remove active class from colors
const changeActiveColorClass = () => {
colorPalette.forEach(colorPicker => {
colorPicker.classList.remove('active');
})
}
// change primary colors
colorPalette.forEach(color => {
color.addEventListener('click', () => {
let primary;
// remove active class from colors
changeActiveColorClass();
if(color.classList.contains('color-1')){
primaryHue = 252;
} else if(color.classList.contains('color-2')){
primaryHue = 52;
} else if(color.classList.contains('color-3')){
primaryHue = 352;
} else if(color.classList.contains('color-4')){
primaryHue = 152;
} else if(color.classList.contains('color-5')){
primaryHue = 202;
}
color.classList.add('active');
root.style.setProperty('--primary-color-hue', primaryHue);
})
})
/ theme BACKGROUND values
let lightColorLightness;
let whiteColorLightness;
let darkColorLightness;
// changes background color
const changeBG = () => {
root.style.setProperty('--light-color-lightness', lightColorLightness);
root.style.setProperty('--white-color-lightness', whiteColorLightness);
root.style.setProperty('--dark-color-lightness', darkColorLightness);
}
// change background colors
Bg1.addEventListener('click', () => {
// add active class
Bg1.classList.add('active');
// remove active class from the others
Bg2.classList.remove('active');
Bg3.classList.remove('active');
// remove customized changes from local storage
window.location.reload();
});
Bg2.addEventListener('click', () => {
darkColorLightness = '95%';
whiteColorLightness = '20%';
lightColorLightness = '15%';
// add active class
Bg2.classList.add('active');
// remove active class from the others
Bg1.classList.remove('active');
Bg3.classList.remove('active');
changeBG();
});
Bg3.addEventListener('click', () => {
darkColorLightness = '95%';
whiteColorLightness = '10%';
lightColorLightness = '0%';
// add active class
Bg3.classList.add('active');
// remove active class from others
Bg1.classList.remove('active');
Bg2.classList.remove('active');
changeBG();
})
<!--================================================ THEME CUSTOMIZATION =============================================-->
<a class="menu-item" id="theme"> <span><i class="uil uil-palette"></i></span><h3>Theme</h3></a>
<div class="customize-theme">
<div class="card">
<h2>Customize your view</h2>
<p class="text-muted">Manage your font size, color, and background.</p>
<!------------ FONT SIZES ------------->
<div class="font-size">
<h4>Font Size</h4>
<div>
<h6>Aa</h6>
<div class="choose-size">
<span class="font-size-1"></span>
<span class="font-size-2"></span>
<span class="font-size-3"></span>
<span class="font-size-4"></span>
<span class="font-size-5"></span>
</div>
<h3>Aa</h3>
</div>
</div>
<!------------ PRIMARY COLORS ------------->
<div class="color">
<h4>Color</h4>
<div class="choose-color">
<span class="color-1 active"></span>
<span class="color-2"></span>
<span class="color-3"></span>
<span class="color-4"></span>
<span class="color-5"></span>
</div>
</div>
<!---------- BACKGROUND COLORS ------------>
<div class="background">
<h4>Background</h4>
<div class="choose-bg">
<div class="bg-1 active">
<span></span>
<h5 for="bg-1">Light</h5>
</div>
<div class="bg-2">
<span></span>
<h5>Dim</h5>
</div>
<div class="bg-3">
<span></span>
<h5 for="bg-3">Lights Out</h5>
</div>
</div>
</div>
</div>
</div>
`