Cheers ..! night mode forced me to write this post .Night mode must be appreciated because some users really care of night mode in our website during night (of course weird people like me, do like dark mode in day use). It is really important to have when we have a website that really maintains long reading content.
Lets dive into code. I'm starting with a headache , that's javascript.
function toggleDarkLight() {The css part.
var body = document.getElementById("body");
var currentClass = body.className;
body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode";
}
$light-color: #eee;And the skeleton part.
body.dark-mode {
background-color: #485461;
background-image: linear-gradient(315deg, #485461 0%, #28313b 74%);
color: $light-color;
a {
color: #00000;
}
}
body.light-mode {
background-color: $light-color;
color: #000000;
a {
color: #000000;
}
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/*thanks w3schools*/
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<body id="body" class="dark-mode">
<h1>Mode switcher</h1>
<label class="switch">
<input type="checkbox" name="dark_light" onclick="toggleDarkLight()" checked>
<span class="slider round"></span>
</label>
Run This on codepen:
that's it ...!
Friday, July 5, 2019
UI / UX
web development
0 Response to Adding night mode to our website
Comments are personally moderated by our team. Promotions are not encouraged.
Post a Comment