Environment theme

Hi,
We're using Retool Cloud and have started using the Environments feature for our production & development environments.

The issue is that it's too easy to forget to check the small tag at the bottom left to see which environment I am on now, and I could easily trigger critical processes in the wrong environment.
The issue is highlighted as we give more and more people permissions to our apps.

It would be great if it was WAY more obvious which environment am I on by having the option to define a totally different theme for different environments.
This way I could have different backgrounds or buttons colors (e.g. red for production) which will immediately pop out and will make sure we don't make such mistakes.

Thank you,
Ido

Use {{retoolContext.environment}} and then with that, in the app you can make the text large, change color of text, etc...

1 Like

Thank you Scott. Unfortunately, we have dozens of apps, with many different people who create them, so having to change each and every app (and every future app) to do so doesn't seem like a feasible solution.
A theme for every environment is exactly that without having to change every single app manually.

1 Like

Any update on this feature?

Hi @Jame, yes there is now actually a way to set your theme based on your environment (keeping in mind that configuring themes is only available on business and enterprise plans).

The way to change your theme is through the use of theme.setMode(). Something of note here, is that this doesn't necessarily change the "theme", but the "mode". By default there will be a light and dark mode for any new theme, and you can run theme.setMode('Dark') to change to dark mode. However, you can create a new mode, call it something like "Staging" and change the primary color to red for example, and you can have a js function that runs on page load, or preloaded js, that checks your environment, and sets the theme mode accordingly:

retoolContext.environment = "staging" ? theme.setMode('Staging') : null