Ionic dynamic Theming on every page

I am working on dynamic theming of my ionic 3 app. My use case is that I need to configure the theme of my app based on the hostname in the url. I followed the this tutorial for it.

The limitation of this approach is that we need to have all the css items in one file. If we want to have theming for individual page’s which has its css in a separate file, than this approach would not work.
For eg: I want to have a button’s color on foo.html page as primary color which would be changed based on the selected theme.

I am looking for a solution that will only change the colors map in my variable.scss file while keeping the page css intact and colors being picked from the colors map for that theme.

Ran into this problem statement as the requirement for theming came up quite late in our project. If it would have been from the starting, I would have designed the app accordingly. but now I have around 30 pages in my app and each page has its css defined in the respective css files.

Any help would be highly appreciated.