CSS Dark Mode Toggle Button from scratch in 6 Minutes

[@thedisastro4492]

Man you doing perfect things. Your channel is underrated. Im sorry for others who do not know your channel. Keep going.

[@WebDevXpert]

Toggle Button In HTML CSS JavaScript |Animated Toggle Button using HTML CSS, JS|Dark and Light Mode : kzbin.info/www/bejne/jKvNkoSDbcShr6c

[@SlimBloodworth]

I ALWAYS enjoy your videos and learn something new each time! Thanks!

[@N.A.Schilder]

Amazing video! I have one tip for accessibility, if you don't mind me giving it to you. If you put the visibility to hidden, the checkbox can't always be found by people who use screenreaders or keyboards only. So if you put opacity to 0 and give it a position of absolute, it can always be found by everyone. :)

[@Riya-fu1qz]

thank you! i was looking for it from an accessibility standpoint too!

[@Pupu._]

Didn’t know if switch is made from input element. Thanks!

[@quielsystems]

I love it! Keep uploading videos like this!

[@kiaru5131]

This is perfect. Thanks for sharing!

[@Lokesh3152]

Pls don't stop keep making videos

[@EntertainmentTv312]

Very Awsome Video.Thanks for making this video

[@appleman29]

did not work. I did it right but not showing on my site

[@thegoldgamer6339]

maybe you added z-index:-1;

[@daanbouma8979]

Then u didn’t do it right

[@hibephong]

Thank you ❤

[@k4nh00]

Thank you very much for your help, it was identical to yours. The only comment I can leave is that it is much easier with javascript than with css. Greetings!

[@FrauleinRose]

i'm here for the moon icon 🌙🙌

[@XxThirdybirdxX]

idk too

[@mritellthings8554]

this works! but may I ask? why does it only cover part of my website? but not all?

[@Daniblueboy]

awesome, thanks

[@amjadnikzad4890]

Well done

[@mahdinajafi3707]

my html css: Yours: I hate myself

[@funkeboodha]

Unless your website is only one page, this solution will not save your preference from page to page. It will load whatever state is default in your CSS.

[@zedwelly5034]

Just the problem for me. Do you know the solution for it to be on a whole site remembered?

[@eamontanner6778]

You need to create a session for this. I'd recommend creating a database and storing user preferences in there. You can interface with the database using a server-side language like php.

[@aryanmn1569]

Now I got why it's called stapler

[@mohamedyoussef8835]

Awesome video ++++++ 😃

[@sam-nc8zv]

Superb content... Gald I found your channel.. #subscribed

[@אביתרוייס-צ1ק]

Why do we have a + in: “input:checked +label”? It’s not supposed to be: “input:checked label”?

[@VXTivkot]

insteAD OF USING ACTIVE YOU SHOULD USE THE hover

[@אביתרוייס-צ1ק]

Awesome

[@highinspiration9988]

Amazing

[@matehun5219]

Make a vid from audio visualizers :D

[@kashishyenare1556]

My inner icon isn't visible I've coded the whole code step by step

[@williambane1786]

same

[@reynandelizo1480]

I have an issue on sun and moon svg icons outside in my label tag even the position of label is realtive I don`t know the issue.

[@Asdpire]

Hi, I don't know if this message reaches you, but the svg:s have a defaulf height which differs from the desired, so just set height to the same as the toggle switch. Hope this helps!

[@nexi__cz2061]

@@Asdpire you just saved me 2-3 hours figuring out how to fix that i love you

[@broli450]

You should use ids and classes

[@anniepunk]

label:active:after is not working

[@hikari._.zasureiya1540]

use label::active instead of laber:active and replace ::active with every :active

[@cuongie]

TAYLOR CLASS TSKEOVER

[@justinran1693]

Pp

[@unexplainablefish52]

522 error

[@vnxcius]

pls make a version using js

[@zishanchaudhary221]

const toggle = document.querySelector("#darkmode-toggle"); let bg = document.body; toggle.addEventListener("change", function () { if (this.checked) { // Toggle button is checked // Perform actions for the checked state bg.style.backgroundColor = "black"; } else { // Toggle button is unchecked // Perform actions for the unchecked state bg.style.backgroundColor = "white"; } }); add these lines in a script tag and thats it.

[@PutriAisyah-w6h]

Oke gelap dan in the sun 1:31

[@mirjalol_shamsiddinov]

just waw

[@VijayKumarYenuganti]

sir how to get svg code

[@mraloush8959]

this is so overdone lol. u dont know how to code. u can do the exact samt thing in 10 lines css.

[@paulhamacher773]

What an arrogant comment. Every single line serves its specific purpose. To me you're just bullshitting here unless you prove otherwise.

[@mraloush8959]

@@paulhamacher773 u look like an npc

[@paulhamacher773]

And now you can't even think of anything better than commenting on my appearance. Pathetic.

[@scotfree7702]

10 lines, post them here then smart arse