Theme color based on current screen

[Steven_W]

Is it possible to change the theme per screen? I want to change the look of the app based on the tab. If this is not possible, does anyone have other suggestions to make it clear a user is in a different section of the app?

[Tess]

Hi @Steven_W Thanks for reaching out! I was thinking you could have a JS query with theme.setMode(themeName), but this doesn't appear to be working I will add a feature request for programmatically changing the theme on mobile

[Steven_W]

I just thought of a new usecase. If this is possible, it will allow a dark theme as well. Not sure if we can speak of “dark mode” but it’s something.

[MiguelOrtiz]

Hey @Steven_W,

Not sure if this fits your usecase completely, but these two posts are helpful:

[how-to] Apply quick Dark mode to your app with Custom CSS

You can apply a Dark-mode to your app using custom CSS. To do this, within your app go to > Settings > CSS> apply body {filter:invert(1)} Before: [Screenshot 2023-07-14 at 4.05.03 PM] After: [Screenshot 2023-07-14 at 4.05.18 PM]

Simple, Fast & Easy Dark Mode

Searching through topics on Dark Mode, I've seen a number of posts suggesting the use of invert, which limits the control a user has over color selection and impacts the entire browser. I've also found extensions being suggested, which is absolutely unnecessary. Implementing dark mode is actually quite simple and only takes a few minutes. Create a variable for storing whether or not dark mode is enabled (Example: darkModeValue). Set this value to either true or false. You can also set it …

[khill-fbmc]

What if you made the "theme" a transformer?

Something like...

return {{
  currentScreenSomewhere.value === "something"
    ? theme.primary
    : theme.secondary
}};

[Steven_W]

Where would I put the transformer? Is this possible for mobile?

[khill-fbmc]

To be honest, I have no idea, I have only build desktop apps so far...