DEV Community

Cover image for Simple Dark-Light theme with VanillaJs

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...
Collapse
 
casiimir profile image
casiimir β€’ β€’ 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 = "🌚";
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
sshymko profile image
Sergii Shymko β€’ β€’ Edited

The ternary expression can be simplified to the following:

toggle.innerText = isLight ? "🌞" : "🌚"
Enter fullscreen mode Exit fullscreen mode
Collapse
 
vaishnavs profile image
Vaishnav β€’

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

Collapse
 
casiimir profile image
casiimir β€’ β€’ Edited

Really? I'm honored! :D

Thread Thread
 
vaishnavs profile image
Vaishnav β€’ β€’ Edited

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

Thread Thread
 
casiimir profile image
casiimir β€’

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

Thread Thread
 
vaishnavs profile image
Vaishnav β€’

I checked repos... You have awesome portfolio πŸ”₯.

Thread Thread
 
casiimir profile image
casiimir β€’

I really appreciate it! :D

Collapse
 
andrewbaisden profile image
Andrew Baisden β€’ β€’ Edited

Great nice and lightweight.

Collapse
 
braydentw profile image
Brayden W ⚑️ β€’

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

Collapse
 
cchunduri profile image
Chaitanya Chunduri β€’

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

Collapse
 
vaishnavs profile image
Vaishnav β€’ β€’ Edited

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

Toggle switch can be customised using CSS

Collapse
 
cchunduri profile image
Chaitanya Chunduri β€’

Thank you very much

Collapse
 
roileo profile image
roiLeo β€’

Be aware that internet explorer doesn't support css variables

Collapse
 
vaishnavs profile image
Vaishnav β€’

Hey Thanks, I didn't know about it.

Collapse
 
yeich profile image
Yannick Eich β€’

Great job!

Collapse
 
altamas2049 profile image
Altamas Khan β€’

nice! In future i am going to use this.