Ticketa
Registered
Привет,
имам един бутон за смяна на режима дали да използа светла или тъмна тема посетителя.
Изключително просто съм го направил, обаче ми се иска да запазя режима в бисквитка или нещо подобно, така че браузъра му да го помни.
js;
html
css
имам един бутон за смяна на режима дали да използа светла или тъмна тема посетителя.
Изключително просто съм го направил, обаче ми се иска да запазя режима в бисквитка или нещо подобно, така че браузъра му да го помни.
js;
Код:
const toggle = document.querySelector('#toggle')
const body = document.body
toggle.addEventListener('click', () => {
body.classList.toggle('dark')
toggle.classList.toggle('toggle')
})
html
Код:
<div class="switch-content">
<button class="switch" type="button" id="toggle"><span class="sun">
<svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor">
<path d="M6.995 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007-2.246-5.007-5.007-5.007S6.995 9.239 6.995 12zM11 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2H2zm17 0h3v2h-3zM5.637 19.778l-1.414-1.414 2.121-2.121 1.414 1.414zM16.242 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.344 7.759 4.223 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path>
</svg></span><span class="moon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"></path>
</svg></span></button>
</div>
css
Код:
.switch{
height: 3em;
width: 3em;
appearance: none;
border: 0;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
position: relative;
transition: all .3s ease-in-out;
background-color: var(--switch-bg);
&:hover{
background-color: var(--switch-hover-bg);
}
span{
position: absolute;
top: 50%;
left: 50%;
display: inline-flex;
transition: all .3s ease-in-out;
opacity: 0;
}
.sun{
color: #333;
transform: translate(-50%, -50%);
opacity: 9;
}
.moon{
color: yellow;
transform: translate(-100%, -50%) scale(-1);
}
// Animation
&.toggle{
.sun{
transform: translate(-50%, -50%) scale(3);
opacity: 0;
}
.moon{
left: 50%;
transform: translate(-50%, -50%) scale(1);
opacity: 9;
}
}
}