آموزش طراحی دکمه دارک مود + سورس کد

 
.switch {
width: 80px;
height: 40px;
border-radius: 20px;
background-color: rgb(39, 38, 38);
position: relative;
}

.flicker {
width: 30px;
height: 30px;
border-radius: 15px;
background-color: rgb(255, 255, 255);
position: absolute;
top: 5px;
left: 5px;
transition: 0.3s;
box-shadow: inset 4px 4px 4px rgb(255, 255, 255),
inset -4px -4px 4px rgb(195 193 198 / 90%);
}
.moon {
width: 20px;
height: 20px;
border-radius: 10px;
box-shadow: 4px 4px 0 0 rgb(255, 255, 255);
position: absolute;
top: 5px;
left: 45px;
}
.dark .flicker {
transform: translateX(40px);
}

.dark {
background-color: rgb(57, 57, 57);
transition: 0.3s;
}

.dark > * {
color: rgb(255, 255, 255);
}

.dark a {
color: rgb(246, 169, 241);
}

.dark h1, .dark span, .dark i, .dark .singlepostnias, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 , .dark .menu .e-n-menu-title-text.e-link.e-focus{
color: white!important;
}
.dark .elementor-icon-box-title span , .dark .header-menu-nias span{
color: #009966!important
}
.dark .niasdark .elementor-widget-container{
background-color: #282828!important;
}
 

 
//کد جاوا اسکریپت پایه

const switchElement = document.querySelector('.switch')

switchElement.addEventListener('click', function () {
// Hint: Add 'dark' class to body :))

document.body.classList.toggle('dark')

if (document.body.className.includes('dark')) {
localStorage.setItem('theme', 'dark')
} else {
localStorage.setItem('theme', 'light')
}

// console.log(document.body.className.includes('dark')); // Boolean
})

window.onload = function () {
let localStorageTheme = localStorage.getItem('theme')

if (localStorageTheme === 'dark') {
document.body.classList.add('dark')
}

}

/*******************اسکریپت مخصوص uiverse******************/

const niasswitchElement = document.querySelector('.theme-switch__checkbox')

niasswitchElement.addEventListener('click', function () {
// Hint: Add 'dark' class to body :))

document.body.classList.toggle('dark')

if (document.body.className.includes('dark')) {
localStorage.setItem('theme', 'dark')
} else {
localStorage.setItem('theme', 'light')
}

// console.log(document.body.className.includes('dark')); // Boolean
})

window.onload = function () {
let localStorageTheme = localStorage.getItem('theme')
if (localStorageTheme === 'dark') {
document.body.classList.add('dark')
document.getElementById('themeSwitch').checked = true;
}

}