This tutorial will mainly focus on how to use transitions in CSS and make a toggle button for light as well as dark mode using little JavaScript. L...
For further actions, you may consider blocking this person and/or reporting abuse
i suggest you to embed the example using codepen
It's now embedded!
Okay, I will embed it!
Hi Murtuza,
I have one suggestion. For accessibility, it would be better if you use
buttoninstead ofdivfor the container. A button gets focus for keyboard users and is announced by screen readers as something actionable. When there is no text inside, you can add an aria-label attribute.Something like this:
Thanks for mentioning that! I will take care of that.
A more efficient way to get the body is to use
document.bodyinstead ofdocument.querySelector("body"). Same thing applies to classes. It's faster for the browser to fetch classes withdocument.getElementsByClassName('container')[0]instead of usingdocument.querySelector(".container").To make the js use less code I would add the animation css to the
body.dark .sun-logoandbody.dark .moon-logoinstead of toggling the classes on each button.I intentionally did the toggling because I wanted to create separate classes because of the
transformproperty. Thetransformproperty is explicitly stated for the initial position.I suggest you use highlight for your code. 😃
Oh, I didn't get it. How would you do that?
You can add the program language tag when you use markdown code syntax.
Like this:
That's amazing! Thanks for telling me. I wasn't aware of this. 🙌
Lol, Now this article looks more pretty.👍
Yup :)
Weldone! I see you have a color property of value aliceblue in both icons. But I didn't notice any color change during the transition. Could it be because you placed it after the css opacity property, so it becomes fully transparent before any significant color change?
I just observed now that you don't have the color property set in the CodePen version.
Yeah, because I have used SVG icons there and you must use
fillproperty instead ofcolorproperty in order to change the color of the SVG element.Color change is visible. If you want to see it in slow motion, just increase the duration of the transition!
Lo he solucionado, el script debe cargarse al final del body
Great! You have to link your CSS and JavaScript file in your HTML page..
O usa defer
I thought it would be only with css , but you had used javascript :)
It's only for toggling the classes on 'click' event.
I think it was possible to do with checkbox ) if we speak about css only .
Yeah, that is a decent trick.. You can visually hide the checkbox and add another element on it.. but it can have some accessibility issues..
Thank you for article)
I'm glad
esta muy bueno, pero lo he intentado y nada que me sale y he sido muy cuidadoso al punto de hacer tal cual como esta aquí sin cambiar nada desde mi entorno local.
your writing code have some mistek please solve it its not changing moon icon
Make sure to link your CSS and JavaScript file with your HTML..
If you are still facing issues, then refer the CodePen of this tutorial.
Great!
Thanks 😊
Nice
Glad you like it
Note:- The CodePen version of this tutorial is slightly different because I have used SVG icons from font-awesome in the codepen. So, do not get confused.
Opp bro 🔥🔥
Thanks !