light/dark mode with sass
Theme changing with one click is built with Sass and a little bit of Javascript.Forked from Kaio Almeida. html Toggle button is a input checkbox with 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 label. JS Select the input id. When it changes, then the checked attributes will be added, according to the sass part, and the attribute named data-theme will toggle,meanwhile the transition function execute. Transition applied with cubic-bezier way in sass. In sass, the data-theme attribute changes the color ,background color and button color. See the Pen Easy Dark Mode with SASS by Yifang Di ( @diyifang ) on CodePen . x