DEV Community

loading...
Cover image for Simple Dark-Light theme with VanillaJs

Simple Dark-Light theme with VanillaJs

vaishnavme profile image Vaishnav ・Updated on ・1 min read

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

Discussion (16)

pic
Editor guide
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
vaishnavme profile image
Vaishnav Author

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

Collapse
casiimir profile image
casiimir • Edited

Really? I'm honored! :D

Thread Thread
vaishnavme profile image
Vaishnav Author • 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
vaishnavme profile image
Vaishnav Author

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

Thread Thread
casiimir profile image
casiimir

I really appreciate it! :D

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
vaishnavme profile image
Vaishnav Author • 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
altamas2049 profile image
Altamas Khan

nice! In future i am going to use this.

Collapse
roileo profile image
roiLeo

Be aware that internet explorer doesn't support css variables

Collapse
vaishnavme profile image
Vaishnav Author

Hey Thanks, I didn't know about it.

Collapse
yeich profile image
Yannick Eich

Great job!

Collapse
andrewbaisden profile image
Andrew Baisden • Edited

Great nice and lightweight.