ksarpotdar / 1-theme-switcher-ionic-vue

Theme Switcher for Ionic Vue That has 3 different ways to change the theme or color scheme of your app!

Watch the Tutorial Video

Ionic Vue Theme Switcher

Making a theme switcher for an Ionic Vue app can be a pain. Making it fully responsive without reloading, or flickering isn't as obvious as you would like due to how Ionic renders its CSS (or sass) files app-wide. Making the CSS file in main.ts dynamic doesn't work as it doesn't apply changes reactively.

The Solution

To make it work we create a VueEx-like solution that only uses 7 lines of code and a storage solution of your choice! We used local storage here to show you the basics but I use Localbase just fine.

What you need to do

this repo contains the src folder from a side menu Ionic Vue Project I have also included a Readme 2 - What was Changed & Added file explaining the changes to default files and what I've added to make it work. You can drop the files in a new template and start using it, play around to figure out how it works. or you can tear it apart and copy-paste what you need to add to your own project. Watch the video above for a full tutorial on what to use and how it works!

--This repo can be found at: https://github.com/UDKodr/1-Theme-Switcher-Ionic-Vue/

Check out these other related repos

Layout Switcher - https://github.com/UDKodr/2-Layout-Switcher-Ionic-Vue Layout-Theme-Switcher-Combo-Ionic-Vue - https://github.com/UDKodr/2-Bonus-Layout-Theme-Switcher-Combo-Ionic-Vue

UDKodr Links

Website - https://www.UDKodr.com
GitHub - https://github.com/UDKodr
Youtube - https://www.youtube.com/channel/UCWHcWrwsmG-7H1_fjQAwU-w
Twitter - https://twitter.com/UDKodr
Patreon - https://www.patreon.com/UDKodr
Play Store - https://play.google.com/store/apps/dev?id=4828316913700075617
UDKodr Logo is a Trademark of UDKodr LLC and Copywrite 2022 and may not be used