DEV Community

Simple Dark-Light theme with VanillaJs

Vaishnav on December 09, 2020

Dark mode designs and functionality that enable to toggle between Dark and Light theme is trending UI/UX Design🔥. So, here's the guide to create Si...

Read full post

casiimir • Dec 9 '20 • Edited

Nice done, I love it!
Can I suggest three more lines of javascript? :D

...
let isLight = true;
...

function modeSwitch() {
...
  isLight = !isLight;
  isLight ? toggle.innerText = "🌞" : toggle.innerText = "🌚";
}

Sergii Shymko • Aug 18 '21 • Edited

The ternary expression can be simplified to the following:

toggle.innerText = isLight ? "🌞" : "🌚"

Vaishnav • Dec 10 '20

Hey. I updated pen according to your suggestions. Thanks 🤩.

casiimir • Dec 10 '20 • Edited

Really? I'm honored! :D

Vaishnav • Dec 10 '20 • Edited

Yep. I'm still learning and I love to share what learned hoping it would be helpful for someone.😄

casiimir • Dec 10 '20

Me too, same story!
Nice website, I like it. Do you like something about my repos? :D

Vaishnav • Dec 10 '20

I checked repos... You have awesome portfolio 🔥.

casiimir • Dec 10 '20

I really appreciate it! :D

Andrew Baisden • Jan 18 '21 • Edited

Great nice and lightweight.

Brayden W ⚡️ • Dec 9 '20

Nice! I’ll try using this in my next project ;D

Chaitanya Chunduri • Dec 9 '20

How do we put animation like the thumbnail of this post??

Vaishnav • Dec 9 '20 • Edited

Here codepen you can refer.
codepen.io/demilad/pen/bZRjpb

Toggle switch can be customised using CSS

Chaitanya Chunduri • Dec 10 '20

Thank you very much

roiLeo • Dec 9 '20

Be aware that internet explorer doesn't support css variables

Vaishnav • Dec 9 '20

Hey Thanks, I didn't know about it.

Yannick Eich • Dec 9 '20

Great job!

Altamas Khan • Dec 9 '20

nice! In future i am going to use this.