How To Create Multiple Themes and Call Them Based on AirData

Hi there! I’m trying to set up two different themes for two different brands. I am trying to use AirData tables to change the app dynamically and one of the things I would like to change is theme. When I try to import a new theme it overrides the old one. Is this functionality possible?

1 Like

Hello @meredith.johnson! This is something that we’ve spent and continue to spend a lot of time working on. And while we don’t have anything to easily support this at this time, I may have a way for you to achieve what I think you’re looking to do, and have attached a sample app at the bottom of this for you to check out. I should also point out that it might be simpler in the case you mentioned - having different themes for different brands - that cloning the first app and having two separate apps would probably be simpler.

What I did was to create six “different themes” in one app by putting the theme variant name as the prefix for each element of the theme I wanted. One important thing to note is that each theme in my case has many variants, so each “theme” needs all of the same variants to work properly. You can see in the screen shot below that for each ‘afterDark’ theme element, there is a ‘baroque’ equivalent.

I then created a session variable called themeVar.

Now on each element that you want to assign a theme value to, you can update it in the expression editor. So if you want to update say a background color, you can do an expression like this: theme[ CONCAT( session.themeVar, "_backgroundColor" ) ]

You can now have an app that responds dynamically to the theme var that you pass in.

One important thing to know, and something that I came up against when I was trying to do this a while back, is that the theme is cached for performance the first time it runs. So any kind of attempt to dynamically change a theme element once the app renders will not take. That said, if you set the session variable theme at the very beginning on the Session Start event, that will work:

Not the most elegant solution, but hopefully can get you where you want until we roll out our updates sometime in the new year.

Here is the app for you to check out.

themes.zip (34.2 KB)

The theme options that you can pass in the session start event to test this out (or by changing the value in the studio variable panel) are ‘afterDark’, ‘baroque’, ‘chophouse’, ‘elegant’, ‘funtime’ and ‘tranquility’.

Please reply with any questions, and thanks!

2 Likes

Super helpful! Thank you so much!

1 Like

@ackerman this is incredible! great use of the expression editor on style properties! I can see someone creating a “light” and “dark” mode for an app using this method.

1 Like