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.
![SAFEPLANET - ดาวเคราะห์ [ THE PLANET ]](http://i.ytimg.com/vi/4X1XL3I_k3c/mqdefault.jpg)
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!
Toggle Button In HTML CSS JavaScript |Animated Toggle Button using HTML CSS, JS|Dark and Light Mode : th-cam.com/video/VzjaQM8_nyE/w-d-xo.html
Didn’t know if switch is made from input element. Thanks!
This is perfect. Thanks for sharing!
Pls don't stop keep making videos
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
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
I love it! Keep uploading videos like this!
Thank you ❤
i'm here for the moon icon 🌙🙌
idk too
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”?
Well done
awesome, thanks
Superb content... Gald I found your channel.. #subscribed
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
my html css: Yours: I hate myself
My inner icon isn't visible I've coded the whole code step by step
same
Awesome
Make a vid from audio visualizers :D
Awesome video ++++++ 😃
Amazing
You should use ids and classes
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
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.
522 error
TAYLOR CLASS TSKEOVER
Pp
just waw
Oke gelap dan in the sun 1:31
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