Appearances

Style editors

Style editors allow you to customize your Retool components. In the new "Style" section in the inspector, you can edit the style properties (e.g. color, border radius) of any component.

Component styles are inherited–either from a parent component or from a Theme–and can be overwritten by directly providing a hex code, color keyword, or rgba() value.

In the below example, we have a container, container1, with background color #F6F9FC and text color #8899A9. Any child component we drag into container1, like the Text and Dropdown components, will inherit that text color. You can override any inherited style by selecting a component and setting a different value like we have for the text color of "Plan Features."

Dynamic styles
Use Retool’s {{ .. }} to evaluate any JavaScript in your style value, including references to other components and queries ( e.g. {{ checkbox1.value ? 'red' : 'blue' }} , {{ getUsers.data.length > 0 ? '#000' : '#D3D3D3' }}).

Style editors are a great tool for customizing individual Retool components and applications. If you want an easy way to create visual consistency across all of your applications, we recommend you use Themes.

Themes

🚧

Themes are only available on the Business and Enterprise plans.

Themes allow you to easily apply style customizations across any of your applications.

Creating & Managing Themes

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

Once you've set a default theme, all apps will automatically use that theme. However, you can still override specific apps to use a different theme in the App Settings modal.

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 start 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.

📘

Themes apply to all of your users. Whenever they view an app, they will see your selected theme.

Theme Editor

When you create a new Theme, you'll be dropped into the Theme editor. The Theme editor contains a live preview and 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, or input any value directly: a hex code, color keyword, or rgba() value.

❗️

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.

When a theme is enabled new classes are applied to components 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.

Custom CSS

When inspector styles and themes don’t cover your needs, you can leverage CSS directly in Retool. Go to the app menu and click "Scripts and styles." Any CSS you write in the modal will live preview. The modal is also moveable so you can more easily see your changes. If you want CSS that applies across all of your applications, instead write CSS in the org settings page.

📘

Use with caution as classes and DOM structure may change as new features are introduced. Use style editors or Themes when possible.


Did this page help you?