DEV Community

Cover image for Dark mode toggle animation using CSS !

Dark mode toggle animation using CSS !

Murtuzaali Surti on June 18, 2021

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...
Collapse
 
syntaxhacker profile image
syntaxhacker

i suggest you to embed the example using codepen

Collapse
 
murtuzaalisurti profile image
Murtuzaali Surti

It's now embedded!

Collapse
 
murtuzaalisurti profile image
Murtuzaali Surti

Okay, I will embed it!

Collapse
 
robole profile image
Rob OLeary • Edited

Hi Murtuza,

I have one suggestion. For accessibility, it would be better if you use button instead of div for 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:

<button class="container" aria-label="Dark mode toggle">
   <!-- existing code -->
</button.
Enter fullscreen mode Exit fullscreen mode
Collapse
 
murtuzaalisurti profile image
Murtuzaali Surti

Thanks for mentioning that! I will take care of that.

Collapse
 
violet profile image
Elena

A more efficient way to get the body is to use document.body instead of document.querySelector("body"). Same thing applies to classes. It's faster for the browser to fetch classes with document.getElementsByClassName('container')[0] instead of using document.querySelector(".container").

To make the js use less code I would add the animation css to the body.dark .sun-logo and body.dark .moon-logo instead of toggling the classes on each button.

Collapse
 
murtuzaalisurti profile image
Murtuzaali Surti

I intentionally did the toggling because I wanted to create separate classes because of the transform property. The transform property is explicitly stated for the initial position.

Collapse
 
originalix profile image
Leon

I suggest you use highlight for your code. 😃

Collapse
 
murtuzaalisurti profile image
Murtuzaali Surti

Oh, I didn't get it. How would you do that?

Collapse
 
originalix profile image
Leon • Edited

You can add the program language tag when you use markdown code syntax.
Like this:
https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b5zu0cqog7bke0jpml9z.png

Thread Thread
 
murtuzaalisurti profile image
Murtuzaali Surti

That's amazing! Thanks for telling me. I wasn't aware of this. 🙌

Thread Thread
 
originalix profile image
Leon

Lol, Now this article looks more pretty.👍

Thread Thread
 
murtuzaalisurti profile image
Murtuzaali Surti

Yup :)

Collapse
 
ttebify profile image
ttebify

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?

Collapse
 
ttebify profile image
ttebify

I just observed now that you don't have the color property set in the CodePen version.

Collapse
 
murtuzaalisurti profile image
Murtuzaali Surti

Yeah, because I have used SVG icons there and you must use fill property instead of color property in order to change the color of the SVG element.

Collapse
 
murtuzaalisurti profile image
Murtuzaali Surti

Color change is visible. If you want to see it in slow motion, just increase the duration of the transition!

Collapse
 
mendozalz profile image
Lenin Mendoza

Lo he solucionado, el script debe cargarse al final del body

Collapse
 
merthod profile image
Merthod

O usa defer

Collapse
 
murtuzaalisurti profile image
Murtuzaali Surti • Edited

Great! You have to link your CSS and JavaScript file in your HTML page..

Collapse
 
genakalinovskiy profile image
Gena Kainovskiy

I thought it would be only with css , but you had used javascript :)

Collapse
 
murtuzaalisurti profile image
Murtuzaali Surti

It's only for toggling the classes on 'click' event.

Collapse
 
genakalinovskiy profile image
Gena Kainovskiy • Edited

I think it was possible to do with checkbox ) if we speak about css only .

Thread Thread
 
murtuzaalisurti profile image
Murtuzaali Surti

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..

Thread Thread
 
genakalinovskiy profile image
Gena Kainovskiy

Thank you for article)

Thread Thread
 
murtuzaalisurti profile image
Murtuzaali Surti

I'm glad

Collapse
 
mendozalz profile image
Lenin Mendoza

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.

Collapse
 
ascodeyt profile image
Ascodeyt

your writing code have some mistek please solve it its not changing moon icon

Collapse
 
murtuzaalisurti profile image
Murtuzaali Surti • Edited

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.

Collapse
 
devmatias profile image
Matias Maximiliano Robledo

Great!

Collapse
 
murtuzaalisurti profile image
Murtuzaali Surti

Thanks 😊

Collapse
 
silwano profile image
silwano

Nice

Collapse
 
murtuzaalisurti profile image
Murtuzaali Surti

Glad you like it

Collapse
 
murtuzaalisurti profile image
Murtuzaali Surti

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.

Collapse
 
tahavepari profile image
Tahavepari

Opp bro 🔥🔥

Collapse
 
murtuzaalisurti profile image
Murtuzaali Surti

Thanks !