Skip to main content

Customize app themes

Apply and reuse themes to control the appearance of apps.

Retool supports creating organization-level themes that standardize the colors, styles, and typography of your apps.

Organization-level themes are available on Business and Enterprise plans only.

Define organization-level theme​

To define an organization-level theme, navigate to Settings > Themes and click . Define your theme name and click Create.

In the left panel of the theme editor, you can define the default colors, styles, and typography for all apps. Use the controls in the canvas space to preview your selections for App, Components, and Variables.

The choices you make in the theme editor propagate to Tailwind CSS rules stored in shadcn/ui variables.

You can choose to define any of the following settings, or leave them as the Retool-provided defaults.

Define colors​

In the Colors section, define the following settings:

  • Default mode: Whether apps should default to light mode or dark mode.
  • Accent: The accent color that is used for primary buttons, selected tabs, and other key interfaces.
  • Gray scale: The graduated shades of gray that your app uses. Choose between Cool, Neutral, and Warm, or define a custom scale.
  • Chart colors: The color scheme used for charts.
  • All variables: Fine-grained controls for all shadcn/ui variables that are used to define the theme of your app.

Define styles​

In the Styles section, define the following settings:

  • Radius: The radius of corners on components.
  • Density: The density of components on the canvas.

Define typography​

In the Typography section, define the following settings:

  • Default: The default font.
  • Mono: The default mono font, used for code snippets.

Custom fonts are not currently supported.

Import and export themes​

The theme editor also provides support for importing and exporting themes. In order to import a theme, Retool requires a JSON file formatted with specific fields. Use the following example file as a reference for the required fields.

Theme JSON format example
{
  "light": {
    "accentColor": "#18181b",
    "white": "#ffffff",
    "black": "#000000",
    "variables": {
      "backgrounds_canvas": "#fafafa",
      "backgrounds_card": "#ffffff",
      "backgrounds_popover": "#ffffff",
      "backgrounds_muted": "#f4f4f5",
      "text_default": "#18181b",
      "text_body": "#3f3f46",
      "text_muted": "#71717a",
      "borders_default": "#e4e4e7",
      "borders_input": "#e4e4e7",
      "borders_ring": "#18181b",
      "buttons_primary": "#18181b",
      "buttons_secondary": "#f4f4f5",
      "buttons_accent": "#f4f4f5",
      "buttons_destructive": "#DC6843",
      "buttons_warning": "#F59E0B",
      "buttons_success": "#10B981",
      "charts_1": "#a1a1aa",
      "charts_2": "#71717a",
      "charts_3": "#52525b",
      "charts_4": "#3f3f46",
      "charts_5": "#27272a"
    }
  },
  "dark": {
    "accentColor": "#fafafa",
    "white": "#ffffff",
    "black": "#000000",
    "variables": {
      "backgrounds_canvas": "#18181b",
      "backgrounds_card": "#27272a",
      "backgrounds_popover": "#27272a",
      "backgrounds_muted": "#27272a",
      "text_default": "#fafafa",
      "text_body": "#e4e4e7",
      "text_muted": "#a1a1aa",
      "borders_default": "#3f3f46",
      "borders_input": "#3f3f46",
      "borders_ring": "#fafafa",
      "buttons_primary": "#fafafa",
      "buttons_secondary": "#27272a",
      "buttons_accent": "#27272a",
      "buttons_destructive": "#DC6843",
      "buttons_warning": "#F59E0B",
      "buttons_success": "#10B981",
      "charts_1": "#71717a",
      "charts_2": "#a1a1aa",
      "charts_3": "#d4d4d8",
      "charts_4": "#e4e4e7",
      "charts_5": "#f4f4f5"
    }
  },
  "radius": "0.5",
  "density": "default",
  "defaultFont": "inter",
  "monoFont": "jetbrains-mono"
}

One way to use the Import and Export functionality is to export your theme file, use your LLM of choice to collaboratively update it with new values, and re-import it to Retool.

Set default theme​

Organization admins can set a default theme that will be used for all newly-created apps. To do so, click ··· on the desired theme and select Set as default.

Apply theme to app​

To apply an organization-level theme to an app, open your app and click the icon to open the theming selector. Choose a theme, and preview the styling in light or dark mode.

All apps that have an organization-level theme applied will receive any published updates to that theme.

Customize app style​

The organization-level theme applies by default to every app. However, you can override the organization-level theme by prompting in the Chat tab. Use natural language to describe how you want your app to look.

Style this app with deep greens and blues.
I uploaded a screenshot of my company's brand guidelines. Style this app accordingly.

A structured experience for creating app-level themes is not currently supported.

Capabilities and limitations​

The following tabs show a summary of the current capabilities of the app builder. Limitations describe functionality that isn't yet supported in apps but may exist in classic apps.

  • Define multiple organization-level themes.
  • Configure colors, gray scale, accent, radius, density, and typography.
  • Fine-tune every shadcn/ui Tailwind variable directly.
  • Override the organization-level theme on a per-app basis by prompting in the Chat tab.
  • Import and export themes as JSON.
  • Configure default organization-level theme for all new apps.