Simple, Fast & Easy Dark Mode

[jbautista]

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.

1. 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 to an integer or string for some more complexity, like letting the user choose different color schemes.

2. Create another variable for setting a color value (Example: cssBackgroundColor) and assign a ternary condition with a different color value for light and dark modes. Do this for as many element colors as you'd like.
   Example: {{darkModeValue.value==1? '#00000' : '#ffffff' }}
   

   

3. In your topmost Component Tree container (or any component of your choice), go to the inspector, scroll down and add a new custom style setting. Set the background value to a variable.
   Example: {{ cssBackgroundColor.value}}
   

   

4. Create some kind of an element, like a switch, to update the first variable you created. In my example, hitting this toggle will set darkModeValue to either 0 or 1.
   

   

Now when users hit this switch, the darkModeValue is updated, which updates the CSS variables, which updates the components using these CSS variables.

[DannyF]

This is great. Wish there was a way to reference variables in css settings to handle this on the top. Going to try this with multi-page apps to see how it handles transitions. Thanks for the share.

[stefancvrkotic]

A small improvement you could do is reference variable in CSS on each individual page instead having it in code though doesn't work on global CSS.

I.e.

[EricObert]

Something I've been testing out recently is customizing every possible style that a Retool component has to offer.

Just assign each component's style to a variable as @jbautista mentioned.

I had ChatGPT generate me different themes (JSON) based on this list of attributes that I'm collecting. It did okay, but I think you can see the potential here.

The annoying part is that any time you add a new component, you need to add the variables back in, which is quite tedious. I haven't tried modules yet, but maybe I could create a module for each component, or manage an app which I can copy & paste the components over to the app I'm working on. Although, if Retool could expose all of the possible styles at the branding/theming level, that would be cool too!

[awilly]

@EricObert and @jbautista - thanks for your posts! We are adapting your ideas to our environment.

Do you have a suggestion on how to make the theme preference persistent across apps?

[EricObert]

@awilly you can have preloaded javascript to store your theme.

Which can be accessed by the window.

This is good for 1 theme. Still would need to explore how to set this with a drop-down.

BTW - none of this is simple, fast & easy.

[Paulo]

You can now create and manage themes from your organization's Themes settings, or create custom themes that apply to individual apps. Organization-level themes are only available on Business and Enterprise plans. Custom themes are available on all plans.

Organization and app themes | Retool Docs