var themeSwitch = document.querySelector('#color_scheme_switch');
function toggleTheme()
{
if(themeSwitch.checked){
document.documentElement.setAttribute('data-color-scheme', 'dark');
localStorage.setItem('color_scheme', 'dark');
}
else{
document.documentElement.setAttribute('data-color-scheme', 'light');
localStorage.setItem('color_scheme', 'light');
}
alert(document.documentElement.getAttribute('data-color-scheme'))
}
themeSwitch.addEventListener('change', function(){ toggleTheme() });
/*font import*/
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/*normalization*/
body{
padding:0;
margin:0;
font-family:"Lato", Arial, Segoe UI, sans serif;
}
/*some fun*/
*{
transition:color ease 0.2s, background-color ease 0.2s;
}
/*theme setup*/
:root{
--bg-color: #FAFAFA;
--text-color: #090909;
--anchor-color: #005AB3;
--highlight-color: #0066CC;
}
html[data-color-scheme = "dark"]{
--bg-color: #090909;
--text-color: #FAFAFA;
--anchor-color: #FFFFFF;
--highlight-color: #0099FF;
}
body{
background-color: var(--bg-color);
color: var(--text-color);
}
h1{
color: var(--text-color);
}
::-moz-selection /* FireFox */
{
color: var(--highlight-color);
background: var(--highlight-bg);
}
::selection
{
color: var(--highlight-color);
background: var(--highlight-bg);
}
/*the Dark Mode Switch*/
label{
position:absolute;
right:20px;
top:50%;
--c:translate(-50%,-50%);
transform:var(--c);
}
.switch{
position:relative;
left:0;top:0;
width:40px;
height:40px;
}
label > input{
position:absolute;
left:0;
top:0;
z-index:5;
opacity:0;
width:100%;
height:100%;
}
.switch span{
display:block;
position:absolute;
left:50%;
top:50%;
transform:var(--c);
border-radius:50%;
width:70%;
height:70%;
background:#FFAC33;
border:5px solid white;
transition:all ease 0.15s;
}
.switch div{
position:absolute;
left:0;top:0;
width:100%;
height:100%;
}
.switch div::before, .switch div::after{
content:" ";
display:block;
position:absolute;
left:50%;
top:50%;
transform:var(--c);
background:#FFAC33;
width:12%;
height:130%;
border-radius:10px;
transition:all ease 0.15s;
}
.switch div:nth-child(1)::before{
transform:var(--c) rotate(0deg);
}
.switch div:nth-child(1)::after{
transform:var(--c) rotate(45deg);
}
.switch div:nth-child(2)::before{
transform:var(--c) rotate(90deg);
}
.switch div:nth-child(2)::after{
transform:var(--c) rotate(135deg);
}
.switch::before, .switch::after{
content:" ";
position:absolute;
left:50%;
top:50%;
transform:var(--c);
border-radius:50%;
background:white;
transition:all ease 0.15s;
}
.switch::before{
width:0%;
height:0%;
z-index:10;
}
.switch::after{
width:50%;
height:50%;
}
input:checked ~ .switch span{
width:100%;
height:100%;
background:#66757F;
}
input:checked ~ .switch div::before,
input:checked ~ .switch div::after{
height:50%;
}
input:checked ~ .switch::before{
left:30%;
top:30%;
width:90%;
height:90%;
}
input:checked ~ .switch::after{
width:0%;
height:0%;
}
input:not(:checked) ~ .switch{
transform:rotate(180deg);
transition:all ease 2.15s 0.1s;
}
/*other styles*/
main{
line-height:1.4em;
}
.container, .post-container{
position:relative;
}
.container{
padding:40px;
}
.sticky{
position:sticky;
top:0;left:0;
width:100%;
height:80px;
background-color:white;
box-shadow:0 0 20px 0px rgba(0,0,0,0.4);
z-index:100;
}
.stickytext{
color:black;
font-size:22px;
position:absolute;
left:30px;
top:50%;
transform:translateY(-50%);
padding-bottom:5px;
}
<div class="sticky">
<div class="stickytext">Click the moon</div>
<label>
<input id="color_scheme_switch" type="checkbox" aria-label="Turn off the lights!" title="Switch to Dark Mode"/>
<div class="switch">
<div></div>
<div></div>
<span></span>
</div>
</label>
</div>
<div class="container">
<h1>Lorem Ipsum Dolor Sit Amet.</h1>
<main class="post-content">
This is where your main post content would go.
</main>
</div>