DEV Community

loading...

Simple Dark Theme Switch with Vue.JS

denisnutiu profile image Denis Nuțiu ・2 min read

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;
}

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">

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>
  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()
      }
    }

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!

Get 50$ on Digital Ocean

Discussion

pic
Editor guide
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
denisnutiu profile image
Denis Nuțiu Author

That's nice to know, thanks!

Collapse
shroxd profile image
ShroXd

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
shroxd profile image
ShroXd

Thank you for sharing!