Are you bored of writing CSS in the same format? Then let's write CSS in a new format. SCSS is a syntax of SASS. It is a more advanced version of the original CSS. Just like you use TypeScript on JavaScript, SCSS can be used on CSS.
Now let us learn about today's tutorial.
Adding Dark/Light mode to a website or web application is currently very popular. Website visitors can change the mode of the website according to their eye or preference. To provide this facility, we usually use a toggle button.
How does a toggle button work? A toggle button basically depends on the checkbox input. The input is checked or unchecked when the website visitor clicks on the toggle button. Then the theme of the website is changed through CSS or Javascript.
Today's tutorial, we create a Dark/Light mode switch using SCSS. As the name suggests, the user has to choose one of two possible options: Dark or Light.
HTML:
For the HTML code, we create a DIV element with the 'toggle-box' class. This will act as the main container for our other elements. Inside this we will create an input element of type checkbox and a level element. Set the ID name of the input element to 'toggle'. Note that you also need to set the 'for' attribute of the level element to 'toggle'. Leaving this separate will not make our toggle button work.
Inside the level element we will create two span elements with light and dark classes. The text inside the two elements will be their class names.
<div class="toggle-box">
<input class="checkbox" id="toogle" type="checkbox" name="name">
<label class="text" for="toogle">
<span class="light">light</span>
<span class="dark">dark</span>
</label>
</div>
Stylesheet (SCSS):
Centering the Toggle Button:To style and customize the switch, we add some CSS. Let us start by setting the default margin and padding of our page to 0. We use the flexbox method to center our toggle button. This is my favorite method for centering an element.
body {
margin: 0;
padding: 0;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}We start by hiding the default checkbox with the help of the 'display' property. Because we want the level to act as a toggle.
.checkbox {
display: none;
Next, we set dimensions of 100 pixels into 30 pixels to the checkbox. To smooth the corners of the button, we will set the border radius to 22 pixels.
+label {
$time: 300ms;
display: block;
width: 100px;
height: 30px;
background-color: rgb(75 146 185);
border-radius: 22px;
transition: all $time cubic-bezier(0.79, -0.01, 0.36, 1);
cursor: pointer;
position: relative;
Set the text 'light / dark' inside the label to uppercase, white, and font.
span {
text-transform: uppercase;
position: absolute;
color: white;
font-size: 12px;
font-family: sans-serif;
}Here, the text 'Light' is shown to the left of the button. The text is centered vertically. It is smoothly sliding from the left using animation.
span.light {
top: 50%;
transform: translateY(-50%);
left: 1.5em;
animation: left-check 300ms ease-in-out;
@keyframes left-check {
0% {
opacity: 0;
left: 5em;
}
100% {
opacity: 1;
left: 2.5em;
}
}
}Here the text 'Dark' is placed on the right side of the button. This span element display is set to none, meaning it is invisible.
span.dark {
top: 50%;
transform: translateY(-50%);
right: 1.3em;
display: none;
animation: right-check 300ms ease-in-out;
@keyframes left-check {
0% {
opacity: 0;
right: 5em;
}
100% {
opacity: 1;
right: 1.3em;
}
}
}The white round ball of the toggle switch has been created. The round shape has been made with a border radius. transform has been given to move left and right.
&:before {
display: block;
content: "";
width: 25px;
height: 25px;
border-radius: 50%;
background-color: white;
box-shadow: 0px 0px 25px -3px rgba(0, 0, 0, 0.4);
position: relative;
top: 50%;
transform: translateY(-50%);
left: 71px;
transition: left $time cubic-bezier(0.79, -0.01, 0.36, 1);
}When the checkbox is checked, the background will turn black. The text 'Dark' will appear. The white ball will move 3 pixels from the right to the left.
&:checked {
+label {
background-color: #5a5a5a;
span.light {
display: none;
}
span.dark {
display: block;
}
&:before {
left: 3px;
}
}
}It doesn't work directly in the browser. You have to compile it first and create CSS. Or you can use SCSS code by enabling CSS Source Map in Developer Tools.
.checkbox {
display: none;
+label {
$time: 300ms;
display: block;
width: 100px;
height: 30px;
background-color: rgb(75 146 185);
border-radius: 22px;
transition: all $time cubic-bezier(0.79, -0.01, 0.36, 1);
cursor: pointer;
position: relative;
span {
text-transform: uppercase;
position: absolute;
color: white;
font-size: 12px;
font-family: sans-serif;
}
span.light {
top: 50%;
transform: translateY(-50%);
left: 1.5em;
animation: left-check 300ms ease-in-out;
@keyframes left-check {
0% {
opacity: 0;
left: 5em;
}
100% {
opacity: 1;
left: 2.5em;
}
}
}
span.dark {
top: 50%;
transform: translateY(-50%);
right: 1.3em;
display: none;
animation: right-check 300ms ease-in-out;
@keyframes left-check {
0% {
opacity: 0;
right: 5em;
}
100% {
opacity: 1;
right: 1.3em;
}
}
}
&:before {
display: block;
content: "";
width: 25px;
height: 25px;
border-radius: 50%;
background-color: white;
box-shadow: 0px 0px 25px -3px rgba(0, 0, 0, 0.4);
position: relative;
top: 50%;
transform: translateY(-50%);
left: 71px;
transition: left $time cubic-bezier(0.79, -0.01, 0.36, 1);
}
}
&:checked {
+label {
background-color: #5a5a5a;
span.light {
display: none;
}
span.dark {
display: block;
}
&:before {
left: 3px;
}
}
}
}
Answering one of the common questions, ‘Why is SCSS used?’
– SCSS is used to make web design code shorter and more beautiful.
I hope you guys enjoyed this tutorial. If you have any suggestions and feedback to let me know through the comments below. Also to stay updated with the latest tutorial subscribe to me on Youtube.
Post a Comment