#Dark theme II #https://dribbble.com/shots/6155384-Coded-Light-dark-toggle-switch <input type="checkbox" id="switch"> <div class="app"> <div class="body"> <div class="main-circle"></div> <div class="phone"> <!-- Top --> <div class="menu"> <div class="time">4:20</div> <div class="icons"> <div class="network"></div> <div class="battery"></div> </div> </div> <!-- Middle --> <div class="content"> <div class="circle"> <div class="crescent"></div> </div> <p class="heading">Choose a style</p> <p>Pop or subtle. Day or night.<br> Customize your interface </p> <label for="switch"> <div class="toggle"></div> <div class="names"> <p class="light">Light</p> <p class="dark">Dark</p> </div> </label> <div class="mark"></div> </div> <!-- Bottom --> <div class="skip"> <p>Skip</p> <div class="fab"> <div class="arrow"></div> </div> </div> <div class="swipe"></div> </div> </div> <div class="credit"> <p>Inspired by <a href="https://dribbble.com/shots/6155384-Coded-Light-dark-toggle-switch" target="_blank">Matthieu Souteyrand</a></p> </div> </div> <style> /* GENERAL */ @import url('https://fonts.googleapis.com/css?family=Rubik'); .credit { position: fixed; right: 2rem; bottom: 2rem; color: white; } .credit a { color: inherit; } body{ margin: 0; padding: 0; font-family: 'Rubik', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;; } .body { position: relative; width: 100vw; height: 100vh; background-color: #fff; overflow: hidden; display: flex; justify-content: center; align-items: center; transition: background-color .1s; } /* Main Circle */ .main-circle { width: 40rem; height: 40rem; border-radius: 100%; background: linear-gradient(40deg, #FF0080,#FF8C00 70%); position: absolute; z-index: 1; left: 50%; transform: translate(-50%, -70%) } /* Phone */ .phone { position: relative; z-index: 2; width: 21rem; height: 45rem; background-color: inherit; box-shadow: 0 4px 35px rgba(0,0,0,.1); border-radius: 40px; display: flex; flex-direction: column; } .swipe { width: 40%; height:.25rem; background-color: black; opacity: .15; border-radius: 10px; margin: .5rem auto; } /* Top */ .menu { /* background-color: blue; */ font-size: 80%; opacity: .4; padding: .8rem 1.8rem; display: flex; justify-content: space-between; align-items: center; } .icons { display: flex; margin-top: .5rem; } .battery { width: .85rem; height: .45rem; background-color: black; } .network { width: 0; height: 0; border-style: solid; border-width: 0 6.8px 7.2px 6.8px; border-color: transparent transparent black transparent; transform: rotate(135deg); margin: .12rem .5rem; } /* Middle */ .content { display: flex; flex-direction: column; margin: auto; text-align: center; width: 70%; transform: translateY(5%); } .circle { position: relative; border-radius: 100%; width: 8rem; height: 8rem; background: linear-gradient(40deg, #FF0080,#FF8C00 70%); margin: auto; } .crescent { position: absolute; border-radius: 100%; right: 0; width: 6rem; height: 6rem; background: white; transform: scale(0); transform-origin: top right; transition: transform .6s cubic-bezier(0.645, 0.045, 0.355, 1); } p { font-size: 90%; } .heading { font-size: 140%; font-weight: bolder; margin: 3rem 0 .2rem 0; } label, .toggle { height: 2.8rem; border-radius: 100px; } label { width: 100%; background-color: rgba(0,0,0,.1); border-radius: 100px; position: relative; margin: 1.8rem 0 4rem 0; cursor: pointer; } .toggle { position: absolute; width: 50%; background-color: #fff; box-shadow: 0 2px 15px rgba(0,0,0,.15); transition: transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .names { font-size: 90%; font-weight: bolder; width: 65%; margin-left: 17.5%; margin-top: .5%; position: absolute; display: flex; justify-content: space-between; user-select: none; } .dark { opacity: .5; } .mark { border-radius: 100px; background-color: black; } .mark { width: 7%; margin: auto; position: relative; height: .25rem; } .mark::before { content: ''; position: absolute; width: .25rem; height: 100%; left: -70%; opacity: .15; background-color: inherit; } .mark::after { content: ''; position: absolute; width: .25rem; height: 100%; right: -70%; opacity: .15; background-color: inherit; } /* Bottom */ .skip { padding: 1.5rem 1.8rem; display: flex; justify-content: space-between; align-items: center; } .skip p { opacity: .55; font-size: 90%; cursor: pointer; transition: all 2s ease; } .skip p:hover { text-decoration: underline; } .fab { box-shadow: 0 2px 10px rgba(0,0,0,.2); border-radius: 100%; width: 3rem; height: 3rem; display: flex; justify-content: center; align-items: center; position: relative; cursor: pointer; transition: transform .5s cubic-bezier(0.19, 1, 0.22, 1); } .fab:hover { transform: scale(1.2); } .arrow { width: 40%; height: .1rem; background-color: black; } .arrow::before { content: ''; position: absolute; height: .1rem; width: 20%; background-color: inherit; transform: rotate(45deg); right: 26%; top: 42%; } .arrow::after { content: ''; position: absolute; height: .1rem; width: 20%; background-color: inherit; transform: rotate(-45deg); right: 26%; bottom: 42%; } /* -------- Switch Styles ------------*/ [type="checkbox"] { display: none; } /* Toggle */ [type="checkbox"]:checked + .app .toggle{ transform: translateX(100%); background-color: #34323D; } [type="checkbox"]:checked + .app .dark{ opacity: 1; } [type="checkbox"]:checked + .app .light{ opacity: .5; } /* App */ [type="checkbox"]:checked + .app .body{ background-color: #26242E; color: white; } /* Circle */ [type="checkbox"]:checked + .app .crescent{ transform: scale(1); background: #26242E; } [type="checkbox"]:checked + .app .circle{ background: linear-gradient(40deg, #8983F7, #A3DAFB 70%); } [type="checkbox"]:checked + .app .main-circle{ background: linear-gradient(40deg, #8983F7, #A3DAFB 70%); } /* Fab */ [type="checkbox"]:checked + .app .fab{ background-color: #34323D; } [type="checkbox"]:checked + .app .arrow, [type="checkbox"]:checked + .app .mark, [type="checkbox"]:checked + .app .battery{ background-color: white; } [type="checkbox"]:checked + .app .network{ border-color: transparent transparent white transparent; } [type="checkbox"]:checked + .app .swipe{ background-color: #34323D; opacity: 1; } </style>