Toggle between dark theme and default them

Ionic 2 has the option to use a dark theme.

However, it is not clear to me that there is a way to switch/toggle between the dark theme and the default theme as the app is running.

One could I suppose attempt to set a class on the body tag, dynamically change the class, and have a bunch of css overrides. But that seems like fighting against the framework rather than working with it. Is this the only option?

2 Likes

I wonder this myself too. I would like to implement a dark theme switch button in the app settings and I can’t seem to find a solution thats not just a bunch of css overrides

Yes you have to override the global scss variable’s.

Could you please show how to do that?

@BillEpic it’s all in the docs. Go to the theme folder in your src directory and add the variables that you want to override to the variables file.

You can watch this tutorial: https://www.youtube.com/watch?v=sXFmkdhOEVc

Well the thing is I want to give the user the choice of the standard light theme and the dark theme, and just overriding the variables won’t do. Any other ideas?

1 Like

did you find any solution to this?