DEV Community

Nucu Labs
Nucu Labs

Posted on • Edited on

24 9

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!

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

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!