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. :)
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.
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.
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!
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!
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.
Man you doing perfect things. Your channel is underrated. Im sorry for others who do not know your channel. Keep going.
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. :)
thank you! i was looking for it from an accessibility standpoint too!
I ALWAYS enjoy your videos and learn something new each time! Thanks!
did not work. I did it right but not showing on my site
maybe you added z-index:-1;
Then u didn’t do it right
Didn’t know if switch is made from input element. Thanks!
Pls don't stop keep making videos
Why do we have a + in: “input:checked +label”? It’s not supposed to be: “input:checked label”?
I love it! Keep uploading videos like this!
This is perfect. Thanks for sharing!
i'm here for the moon icon 🌙🙌
idk too
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.
Just the problem for me. Do you know the solution for it to be on a whole site remembered?
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.
Now I got why it's called stapler
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!
Very Awsome Video.Thanks for making this video
insteAD OF USING ACTIVE YOU SHOULD USE THE hover
My inner icon isn't visible I've coded the whole code step by step
same
Thank you ❤
my html css: Yours: I hate myself
Well done
Make a vid from audio visualizers :D
You should use ids and classes
awesome, thanks
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.
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!
@@Asdpire you just saved me 2-3 hours figuring out how to fix that i love you
Superb content... Gald I found your channel.. #subscribed
Toggle Button In HTML CSS JavaScript |Animated Toggle Button using HTML CSS, JS|Dark and Light Mode : ua-cam.com/video/VzjaQM8_nyE/v-deo.html
Awesome
Awesome video ++++++ 😃
Amazing
label:active:after is not working
use label::active instead of laber:active and replace ::active with every :active
pls make a version using js
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.
TAYLOR CLASS TSKEOVER
Pp
522 error
sir how to get svg code
Oke gelap dan in the sun 1:31
just waw
this is so overdone lol. u dont know how to code. u can do the exact samt thing in 10 lines css.
What an arrogant comment. Every single line serves its specific purpose. To me you're just bullshitting here unless you prove otherwise.
@@paulhamacher773 u look like an npc
And now you can't even think of anything better than commenting on my appearance. Pathetic.
10 lines, post them here then smart arse