Programmatically switch themes

ionic-v1
1

I’d like to have options for a “dark” and “light” theme that a user can choose in their settings. What’s the best way to go about that? Can I programmatically switch between ionic themes, like dark and stable?

Thanks in advance.

2

By themes, do you mean classes? You could set some stuff up with ng-class

1 Like
3

Thanks mhartington. Yes, let’s say that by default I have an app that uses “bar-stable”, “item-stable”, etc which results in a light color scheme. I want the user to be able to choose “Use Dark Theme” in a setting, and switch all of those to “bar-dark”, “item-dark”, etc.

I think my lack of AngularJS experience is why I hadn’t connected the dots on the best way to do this. I took a look at ng-class, and it looks like that would do exactly what I want. If I understand it correctly (haven’t had a chance to test it out yet), I would use ng-class to point to fields on my model, and those fields would have the values of “bar-stable”, etc. When the user chooses the “Use Dark Theme” setting, I would switch the model to my dark values, and the css would update on the fly. Correct? If so, that’s pretty awesome…can’t wait to try it out.

Thanks for pointing me in the right direction.

4

What other i have to do after putting ng-class ???

5

Something like

<someElement ng-class="myBoolean ? 'light' : 'dark'"></someElement>
6

it will work in
element ??
actually i want to change my app background when toggle checked=‘true’

7

Ok so just replace the “someElement” with what’s relevant:

<ion-content ng-class="myBoolean ? 'light-bg' : 'dark-bg'">
<!-- Your app here -->
</ion-content>

Where “myBoolean” is the variable in your $scope that is linked (via ng-model) to your toggle element:

<ion-toggle ng-model="myBoolean"></ion-toggle>
1 Like
8

where i will add code to change color of background ??
right now i have azure blue and when user click on toggle then color of app background mean azure blue should be changed to any other color and if he again toggle then app background should be back to azure blue
hope so u got my point

9

No I didn’t get your point. Please take a little bit of time to rephrase it, and possibly include examples as I’m trying to do.
Is the issue here that the “light-bg” and “dark-bg” themes I used don’t match the ones you’re using?

10

i have 2 pages in my app “home.html” and “test.html” both with azure blue color as an background-color which i have applied in “home.scss” file and same class which is (class=“bg”) applied on test.html (ion-content class=“bg”) page and its working fine
now i have toggle button in my “test.html” through that toggle button i want to change this background color(azure blue) to any other color

11

Okay I think I see what the issue is: just use what I posted above, and create another class to hold the other color you’d like. Then you’d just replace my “light-bg” and “dark-bg” with your class names.

So if you have

.bg{
  background-color: #0000FF;
}

You can just create another like

.red-bg{
  background-color: #FF0000;
}

and then use

ng-class="myBoolean ? 'bg' : 'red-bg'"

Which translates to: if myBoolean is true, use the “bg” class (which has the blue background), otherwise use the “red-bg” class which gives it a red background.

12

sorry not working did same as you told