Implementing a simple Theme Switcher in Vue.js

Question

This tutorial shows how to make an easy Dark/Light theme switcher with Tailwind CSS. It's done in vanilla JS with a single app.js file.

So if I wanted to implement this in a Vue project, would I just dump that code into ~/src/main.js, or is there a better way?

Answer 1

A good way to implement theme switchers in Vue, is by holding a value in some kind of store like vuex or pinia .

You could eg add a variable isDarkMode (boolean) or pageTheme (string) and depending on its value you can set a different class in your body or individual components, simply by getting the value from store. Then you could build a theme switcher, which mutates the theme variable on click. ;)

This would be a project-wide option, also with the possibility, to change specific parts.