🚧

Custom Themes

Themes are only available on the Pro and Enterprise plans. Without themes, all style customizations happen on a per-app basis.

Themes are an easy way to create visual consistency across all of your Retool apps. Themes are designed for you to choose color and visual preferences that can then be applied across any number of your apps.

We recommend styling apps using themes over global CSS and HTML text widgets, as it is faster to set and easier to regulate across your organization.

Creating & Managing Themes

Under Organization Settings, you’ll find a Themes setting—one interface to create, update, and delete app themes for your organization.

Setting any theme as your default will automatically apply the chosen styling to all of your apps.

📘

You are not required to set a default theme for your organization

If you choose not to have a default theme, you'll need to individually theme the apps you wish to style. You can do this through the app settings modal in the editor.

Once you've set a default theme, all apps will automatically use the set style. However, you can still override specific apps to use a different theme.

In the example below, the theme “Company Dark” is set as the default organization theme, but you can override the default with other available themes at any time.

To help you create a new theme, we've provided a set of templates to use as a starting point. Not only are these templates a source of inspiration, they've also been optimized as high-contrast interfaces with legible labels and headers.

When you select to create a new theme, we'll also display any themes your organization has already created so teams can create even more visual consistency as needed.

Theme Editor

In the Theme Editor, a live preview provides an interactive example of what your styles will look like. We expose 11 style values for configuration that map to many more internal CSS properties, making theme creation fast and simple.

You can select a color using the color picker and slider options. The color picker also supports inputting any valid CSS color string.

❗️

Deleting your default theme

If you delete a theme that has been set as your organizational default, all apps subscribed to it will revert to Retool's default styling.

Compatibility With Custom CSS

When a theme is enabled new classes are applied to widgets that may affect pre-existing custom CSS. Conflicts are unlikely, but note that any CSS that's applied globally or within a page might have to be adjusted.