NucuLabs.dev

Share this post

Simple Dark Theme Switch with Vue.JS

nuculabs.dev

Discover more from NucuLabs.dev

Programming, Cloud and Engineering! 👨‍🔬
Continue reading
Sign in
Programming

Simple Dark Theme Switch with Vue.JS

Denis Nuțiu
Dec 7, 2019
Share this post

Simple Dark Theme Switch with Vue.JS

nuculabs.dev
Share

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!

Share this post

Simple Dark Theme Switch with Vue.JS

nuculabs.dev
Share
Previous
Next
Comments
Top
New

No posts

Ready for more?

© 2023 NucuLabs.dev
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing