CODEWITHSUNDEEP
javascriptvue.jsvuejs3
raresample
raresample

Reputation: 11

Implementing a simple Theme Switcher in Vue.js

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?

Upvotes: 1

Views: 1843

Answers (1)

zero2579
zero2579

Reputation: 228

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 e. g. 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.

Upvotes: 1

Related Questions