DEV Community

Cover image for Simple Dark-Light theme with VanillaJs
Vaishnav
Vaishnav

Posted on • Updated on

Simple Dark-Light theme with VanillaJs

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 Simple dark-light toggle.
I wanted this to be simple so I didn't create any fancy toggle switch just use simple button.
Codepen at end.๐Ÿค–

Let's Start with HTML

I'm using list for navbar elements, so
<li class="nav-item" id="toggle">๐ŸŒž</li>

and we are done with HTML. let's do CSS

CSS

// by default dark theme

:root {
    --bg-color: #171923;
    --bg-light: #232535;
    --font-color: #c5cddb;
    --font-light: #ffffff;
}

// light theme colors

.lightMode {
  --bg-color: #E8E6DC;
  --bg-light: #DCDACA;
  --font-color: #3D3D3D;
  --font-light: #202020;
}
Enter fullscreen mode Exit fullscreen mode

lightMode is class which would be added to body using js.

Final Part - Javascript

const toggle = document.querySelector("#toggle");
toggle.addEventListener("click", modeSwitch);

let isLight = true;

function modeSwitch() {
  isLight = !isLight;
  isLight ? toggle.innerText = "๐ŸŒž" : toggle.innerText = "๐ŸŒš";
  var rootElement = document.body;
  rootElement.classList.toggle("lightMode");
}
Enter fullscreen mode Exit fullscreen mode

What is toggle?

  • toggle is method of DOMTokenList() interface.
  • It remove token from token list and return false.
  • If token doesn't exist, then it add token and return true.

What is happening?

When we click on toggle button, event listener respond to it and call modeSwitch() function. In modeSwitch() function, class lightMode is added to body activating lightMode color schema.



Contribution @casiimir

There are different ways to crate dark-light mode toggle. This one simple way I found out to explain how it work.
Love to here your suggestions and feedback๐Ÿคฉ.

Top comments (17)

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.