سلام ! ماله سایت من اینجوریه !
کد با استفاده از کد javascript :
<script>
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme);
if (currentTheme === 'dark') {
toggleSwitch.checked = true;
}
}
function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
}
else { document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light');
}
}
toggleSwitch.addEventListener('change', switchTheme, false);
</script>
کد مربوط به تغییر دارک و لایت :
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox">
<div class="slider round"></div>
</label>
</div>
کد css :
.theme-switch-wrapper {
display:flex;
align-items:center;
transform:rotate(-90deg);
width:50px;
height:50px;
margin:0 auto;
}
.theme-switch-wrapper em {
margin-left:10px;
font-size:1rem;
}
.ariamv-darklightswitch {
text-align:center;
}
.theme-switch {
display:inline-block;
height:20px;
position:relative;
width:40px;
}
.theme-switch input {
display:none;
}
.slider {
background-color:#8c9fc6;
bottom:0;
cursor:pointer;
left:0;
position:absolute;
right:0;
top:0;
transition:.4s;
}
input:checked + .slider::before {
transform:translateX(19px);
}
.slider.round::before {
border-radius:50%;
}
.slider::before {
background-color:#fff;
bottom:2px;
content:"";
height:16px;
left:2px;
position:absolute;
transition:.4s;
width:16px;
}
.slider.round {
border-radius:34px;
}
input:checked + .slider {
background-color:#5d4efe;
}
و اضافه کردن کد زیر به custom.css :
html[data-theme="dark"] body {
background:#000 !important;
}
حالا با استفاده از همین روش هرجایی که میخای دارک کنی رو کلاسشو میذاریو بهش رنگ میدی !
