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:
We can test our theme by appending the following line in the <head> of public/index.html
Now let’s make this interactive!
In src/App.vue we’ll add a button and the following methods:
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!
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:
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
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:
Code:
<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!