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!
Top comments (6)
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.
That's nice to know, thanks!
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.
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 😉
Thank you for sharing!