Created
November 22, 2023 12:07
-
-
Save NikarashiHatsu/27f0127eff9555f1411184e00b3d60b8 to your computer and use it in GitHub Desktop.
Light / Dark Toggle Challenge
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<label for="toggle" class="relative p-4 rounded-[6rem] w-56 overflow-hidden shadow-[inset_0_0px_8px_4px_rgb(0_0_0_/0.3)]"> | |
<input id="toggle" checked type="checkbox" class="hidden peer"> | |
{{-- Ambient --}} | |
<div class="transition duration-300 ease-in-out absolute -z-30 w-72 h-72 -translate-y-1/2 top-1/2 translate-x-0 peer-checked:-translate-x-8 bg-[#6182b8] rounded-full peer-checked:bg-[rgb(46,58,76)]"></div> | |
<div class="transition duration-300 ease-in-out absolute -z-30 w-64 h-64 -translate-y-1/2 top-1/2 translate-x-[-6.25rem] peer-checked:translate-x-[2rem] bg-[#7a93c5] rounded-full peer-checked:bg-[#4a5364]"></div> | |
<div class="transition duration-300 ease-in-out absolute -z-30 w-64 h-64 -translate-y-1/2 top-1/2 translate-x-[-8.5rem] peer-checked:translate-x-[4.5rem] bg-[#8ca5cd] rounded-full peer-checked:bg-[#666d7b]"></div> | |
{{-- Clouds --}} | |
<div class="transition duration-300 ease-in-out relative top-24 -right-4 transform -z-20 peer-checked:translate-x-full"> | |
<div class="absolute bottom-10 -right-6 -z-10 bg-[#bac7e1] w-12 h-12 rounded-full"></div> | |
<div class="absolute bottom-7 right-0 -z-10 bg-[#bac7e1] w-12 h-12 rounded-full"></div> | |
<div class="absolute bottom-2 right-6 -z-10 bg-[#bac7e1] w-12 h-12 rounded-full"></div> | |
<div class="absolute -bottom-2 right-12 -z-10 bg-[#bac7e1] w-16 h-16 rounded-full"></div> | |
<div class="absolute -bottom-2 right-20 -z-10 bg-[#bac7e1] w-16 h-16 rounded-full"></div> | |
<div class="absolute bottom-4 -right-5 -z-10 bg-white w-12 h-12 rounded-full"></div> | |
<div class="absolute bottom-1 -right-1 -z-10 bg-white w-12 h-12 rounded-full"></div> | |
<div class="absolute -bottom-3 right-4 -z-10 bg-white w-12 h-12 rounded-full"></div> | |
<div class="absolute -bottom-7 right-12 -z-10 bg-white w-12 h-12 rounded-full"></div> | |
<div class="absolute -bottom-5 right-20 -z-10 bg-white w-12 h-12 rounded-full"></div> | |
<div class="absolute -bottom-6 right-28 -z-10 bg-white w-12 h-12 rounded-full"></div> | |
<div class="absolute -bottom-7 right-36 -z-10 bg-white w-16 h-16 rounded-full"></div> | |
</div> | |
{{-- Stars --}} | |
<div class="transition duration-300 ease-in-out relative transform -z-20 -translate-x-full peer-checked:translate-x-0"> | |
{{-- Darker Area --}} | |
<svg class="text-white absolute top-4 w-2 h-2 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M240,128a15.79,15.79,0,0,1-10.5,15l-63.44,23.07L143,229.5a16,16,0,0,1-30,0L89.93,166,26.5,143a16,16,0,0,1,0-30L90,89.93,113,26.5a16,16,0,0,1,30,0L166.07,90,229.5,113A15.79,15.79,0,0,1,240,128Z"/></svg> | |
<svg class="text-white absolute top-12 -left-1 w-1.5 h-1.5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M240,128a15.79,15.79,0,0,1-10.5,15l-63.44,23.07L143,229.5a16,16,0,0,1-30,0L89.93,166,26.5,143a16,16,0,0,1,0-30L90,89.93,113,26.5a16,16,0,0,1,30,0L166.07,90,229.5,113A15.79,15.79,0,0,1,240,128Z"/></svg> | |
<svg class="text-white absolute top-16 left-3 w-2 h-2 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M240,128a15.79,15.79,0,0,1-10.5,15l-63.44,23.07L143,229.5a16,16,0,0,1-30,0L89.93,166,26.5,143a16,16,0,0,1,0-30L90,89.93,113,26.5a16,16,0,0,1,30,0L166.07,90,229.5,113A15.79,15.79,0,0,1,240,128Z"/></svg> | |
{{-- Slightly Darker Area --}} | |
<svg class="text-white/50 absolute top-12 left-9 w-1 h-1 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M240,128a15.79,15.79,0,0,1-10.5,15l-63.44,23.07L143,229.5a16,16,0,0,1-30,0L89.93,166,26.5,143a16,16,0,0,1,0-30L90,89.93,113,26.5a16,16,0,0,1,30,0L166.07,90,229.5,113A15.79,15.79,0,0,1,240,128Z"/></svg> | |
<svg class="text-white/50 absolute top-0 left-16 w-1 h-1 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M240,128a15.79,15.79,0,0,1-10.5,15l-63.44,23.07L143,229.5a16,16,0,0,1-30,0L89.93,166,26.5,143a16,16,0,0,1,0-30L90,89.93,113,26.5a16,16,0,0,1,30,0L166.07,90,229.5,113A15.79,15.79,0,0,1,240,128Z"/></svg> | |
<svg class="text-white/50 absolute top-[4.5rem] left-[4.5rem] w-1 h-1 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M240,128a15.79,15.79,0,0,1-10.5,15l-63.44,23.07L143,229.5a16,16,0,0,1-30,0L89.93,166,26.5,143a16,16,0,0,1,0-30L90,89.93,113,26.5a16,16,0,0,1,30,0L166.07,90,229.5,113A15.79,15.79,0,0,1,240,128Z"/></svg> | |
<svg class="text-white absolute top-7 left-[3.5rem] w-1.5 h-1.5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M240,128a15.79,15.79,0,0,1-10.5,15l-63.44,23.07L143,229.5a16,16,0,0,1-30,0L89.93,166,26.5,143a16,16,0,0,1,0-30L90,89.93,113,26.5a16,16,0,0,1,30,0L166.07,90,229.5,113A15.79,15.79,0,0,1,240,128Z"/></svg> | |
{{-- Lighter Area --}} | |
<svg class="text-white/50 absolute top-2 left-20 w-1.5 h-1.5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M240,128a15.79,15.79,0,0,1-10.5,15l-63.44,23.07L143,229.5a16,16,0,0,1-30,0L89.93,166,26.5,143a16,16,0,0,1,0-30L90,89.93,113,26.5a16,16,0,0,1,30,0L166.07,90,229.5,113A15.79,15.79,0,0,1,240,128Z"/></svg> | |
<svg class="text-white absolute top-0 left-24 w-1.5 h-1.5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M240,128a15.79,15.79,0,0,1-10.5,15l-63.44,23.07L143,229.5a16,16,0,0,1-30,0L89.93,166,26.5,143a16,16,0,0,1,0-30L90,89.93,113,26.5a16,16,0,0,1,30,0L166.07,90,229.5,113A15.79,15.79,0,0,1,240,128Z"/></svg> | |
<svg class="text-white absolute top-[4.25rem] left-[5rem] w-1.5 h-1.5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M240,128a15.79,15.79,0,0,1-10.5,15l-63.44,23.07L143,229.5a16,16,0,0,1-30,0L89.93,166,26.5,143a16,16,0,0,1,0-30L90,89.93,113,26.5a16,16,0,0,1,30,0L166.07,90,229.5,113A15.79,15.79,0,0,1,240,128Z"/></svg> | |
</div> | |
<div class="transition duration-300 ease-in-out transform relative w-20 h-20 peer-checked:translate-x-[140%] group"> | |
{{-- Sun / Moon --}} | |
<div class="transition duration-300 ease-in-out absolute -top-0.5 -left-0.5 w-full h-full bg-yellow-100 rounded-full shadow shadow-yellow-100 rotate-[135deg] peer-checked:group-[]:bg-[#c7c7c9] peer-checked:group-[]:shadow-[#c7c7c9]"></div> | |
<div class="transition duration-300 ease-in-out absolute top-0.5 left-0.5 w-full h-full bg-yellow-400 rounded-full shadow shadow-yellow-600 -rotate-45 peer-checked:group-[]:bg-[#a6a6a8] peer-checked:group-[]:shadow-[#a6a6a8]"></div> | |
<div class="transition duration-300 ease-in-out absolute w-full h-full bg-yellow-300 rounded-full peer-checked:group-[]:bg-[#b3b3b3]"></div> | |
{{-- Moon Craters --}} | |
<div class="transition duration-300 ease-in-out absolute top-4 left-2 w-8 h-8 bg-yellow-300 rounded-full peer-checked:group-[]:bg-[#a4a4a4]"></div> | |
<div class="transition duration-300 ease-in-out absolute top-5 left-12 w-6 h-6 bg-yellow-300 rounded-full peer-checked:group-[]:bg-[#a4a4a4]"></div> | |
<div class="transition duration-300 ease-in-out absolute top-[3.25rem] left-7 w-6 h-6 bg-yellow-300 rounded-full peer-checked:group-[]:bg-[#a4a4a4]"></div> | |
</div> | |
</label> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Idk bruh, this thing took me 1 hours.