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?

Probably a better way because of Vue's ability to use reactive state. Also, having it as a component, wrapper or alike is probably a good approach for re-usability if needed in several places. — kissu
– kissu, Commented Jun 27, 2022 at 9:48
to be honest, theme should be tri-state ... dark, light, follow-system ... in that tutorial, once you select light or dark, there's no way to go back to "follow-system" - following the system theme is good for people that may like light mode during the day, and switch to dark mode at night for instance - so, while that tutorial is OK, it doesn't handle a use case that is legitimate and fairly common (in my experience - which is why I had to implement it in a vue app) — Bravo
– Bravo, Commented Jun 27, 2022 at 10:04

zero2579 · Accepted Answer · 2022-06-27 14:48:58Z

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

answered Jun 27, 2022 at 14:48

zero2579

2282 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Implementing a simple Theme Switcher in Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related