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 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!
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.
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.
Toggle Button In HTML CSS JavaScript |Animated Toggle Button using HTML CSS, JS|Dark and Light Mode : ruclips.net/video/VzjaQM8_nyE/видео.html
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!
Didn’t know if switch is made from input element. Thanks!
Pls don't stop keep making videos
This is perfect. Thanks for sharing!
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!
I love it! Keep uploading videos like this!
Thank you ❤
Very Awsome Video.Thanks for making this video
i'm here for the moon icon 🌙🙌
idk too
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
this works! but may I ask? why does it only cover part of my website? but not all?
Well done
awesome, thanks
my html css: Yours: I hate myself
insteAD OF USING ACTIVE YOU SHOULD USE THE hover
Why do we have a + in: “input:checked +label”? It’s not supposed to be: “input:checked label”?
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.
Make a vid from audio visualizers :D
Now I got why it's called stapler
Superb content... Gald I found your channel.. #subscribed
My inner icon isn't visible I've coded the whole code step by step
same
Awesome video ++++++ 😃
Awesome
You should use ids and classes
Amazing
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
522 error
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.
Oke gelap dan in the sun 1:31
TAYLOR CLASS TSKEOVER
Pp
just waw
sir how to get svg code
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