DEV Community

Nucu Labs
Nucu Labs

Posted on • Updated on

Simple Dark Theme Switch with Vue.JS

Hello,

In this post I'm going to show you how quickly you can add a dark theme switch to your Vue.JS application.

We're going to start with a blank application. And then we're going to create a dark-theme CSS file which we're going to save in public/css/darktheme.css.

This is how the application looks without any CSS.

Now, we're going to put the following code in darktheme.css:

body {
    background-color: #2c3e50;
}

h1,h2,h3,h4,h5,h6,p {
    color: #42b983;
}
Enter fullscreen mode Exit fullscreen mode

We can test our theme by appending the following line in the <head> of public/index.html

    <link rel="stylesheet" href="<%= BASE_URL %>css/darktheme.css">
Enter fullscreen mode Exit fullscreen mode

Now let's make this interactive!

In src/App.vue we'll add a button and the following methods:

    <button @click="darkThemeSwitch">Switch Theme</button>
Enter fullscreen mode Exit fullscreen mode
  methods: {
    _addDarkTheme() {
      let darkThemeLinkEl = document.createElement("link");
      darkThemeLinkEl.setAttribute("rel", "stylesheet");
      darkThemeLinkEl.setAttribute("href", "/css/darktheme.css");
      darkThemeLinkEl.setAttribute("id", "dark-theme-style");

      let docHead = document.querySelector("head");
      docHead.append(darkThemeLinkEl);
    },
    _removeDarkTheme() {
      let darkThemeLinkEl = document.querySelector("#dark-theme-style");
      let parentNode = darkThemeLinkEl.parentNode;
      parentNode.removeChild(darkThemeLinkEl);
    },
    darkThemeSwitch() {
      let darkThemeLinkEl = document.querySelector("#dark-theme-style");
      if (!darkThemeLinkEl) {
        this._addDarkTheme()
      } else {
        this._removeDarkTheme()
      }
    }
Enter fullscreen mode Exit fullscreen mode

Whenever we click on the Switch Theme button, the dark theme should switch back and forth.

This is a quick and dirty way to add a dark theme switch to your Vue.JS application. You can can also take this further by implementing a theme service and persistence support.

Thank you for reading!

Top comments (6)

Collapse
 
dinsmoredesign profile image
Derek D

It'd be even easier with CSS Variables. Just add a data- tag, class, etc. to your App.vue container and toggle it based on a boolean data property to change the colors throughout your entire app.

Collapse
 
nuculabs_dev profile image
Nucu Labs

That's nice to know, thanks!

Collapse
 
atriiy profile image
Atri

Add class is a good idea, but I think it means you must rewrite many CSS attribute. The code will be hard to read. I think we can just switch the color variables file, so that we need’t to deal with class.

Collapse
 
dinsmoredesign profile image
Derek D

You can have two sets of variables, no need to overwrite them. Then just toggle based on a class or data attribute. This is a great example:

dev.to/ananyaneogi/create-a-dark-l...

The only JavaScript needed is to change the root data attribute from data-theme-light to data-theme-dark and vice-versa 😉

Thread Thread
 
atriiy profile image
Atri

Thank you for sharing!