Member-only story
Theme changing with one click is built with Sass and a little bit of Javascript.Forked from Kaio Almeida.
HTML
The toggle button is an input checkbox with a label hidden.
Sass
Hide the input connected with the checkbox.
Set the button(Label) a relative shape with pseudo-element.
When the input is checked, add the animation to the label.
JS
Select the input id. When it changes, then the checked attributes will be added, according to the sass part, and the attribute name
data-theme will toggle, meanwhile, the transition function executes.
Transition applied with the cubic-bezier way in sass.
In sass, the data-theme attribute changes the color, background color, and button color.
👉Follow me for more useful web development content! love sharing🥰
