Dark Side Toggle – Will You Choose to Learn the Dark Side

Dark Side Toggle – Will You Choose to Learn the Dark Side

Copy me /* Target CSS categories instance */ :root { –dark-colour: #E80A89; } [data-theme=”dark”], [data-theme=”dark”] .background-colour-white { background-colour:#111827; } [data-theme=”dark”], [data-theme=”dark”] .w-nav-emblem, [data-theme=”dark”] .w-nav-hyperlink, [data-theme=”dark”] .button { colour:white; } .transfer { place: relative; show: inline-flex; width: 2.75rem; top: 1.5rem; border-width: 2px; flex-shrink: 0; } .switch__input { opacity: 0; width: 0; top: 0; } .switch__marker { place: absolute; cursor: pointer; best: 0; left: 0; proper: 0; backside: 0; -webkit-transition: .4s; transition: .4s; border-radius: 9999px; border:1px cast white; } .switch__marker:sooner than { place: absolute; content material: “”; width: 1.25rem; top: 1.25rem; left: 1px; backside: 1px; background-colour: white; -webkit-transition: .4s; transition: .4s; border-radius: 9999px; } enter:checked .switch__marker { border-colour:var(–dark-colour); } enter:focal point .switch__marker { field-shadow: Zero Zero 1px rgba(168, 193, 216, 0.2); } enter:checked .switch__marker:sooner than { -webkit-turn into: translateX(1.25rem); -ms-turn into: translateX(1.25rem); turn into: translateX(1.25rem); background-colour: var(–dark-colour); } Copy me Copy me Love  » Read More

Like to keep reading?

This article first appeared on dark-side.webflow.io. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply