CSS toggle switches replace the default checkbox with a beautiful sliding switch. No JavaScript needed for the core behavior. The HTML Structure <label class= "toggle" > <input type= "checkbox" id= "dark-mode" > <span class= "toggle-track" ></span> <span class= "toggle-label" > Dark Mode </span> </label> Enter fullscreen mode Exit fullscreen mode The Core CSS .toggle input { opacity : 0 ; width : 0 ; height : 0 ; position : absolute ; } .toggle-track { display : inline-block ; width : 52px ; height : 28px ; border-radius : 14px ; background : #333 ; position : relative ; cursor : pointer ; transition : background 0.3s ease ; } .toggle-track ::before { content : '' ; position : absolute ; width : 22px ; height : 22px ; border-radius : 50% ; background : #fff ; left : 3px ; top : 3px ; transition : transform 0.3s cubic-bezier ( 0.34 , 1.56 , 0.64 , 1 ); } input :checked + .toggle-track { background : #e53e3e ; } input :checked + .toggle-track ::before { transform :…