Skip to main content

Customize app themes

Apply and reuse themes to control the appearance of apps.

The new app building experience Availability
CloudClosed beta

Retool supports creating an organization-level theme that standardizes the colors, styles, and typography of your apps.

Limitations​

The following limitations currently apply to themes for apps:

Define organization-level theme​

Organization-level Themes Availability
CloudGenerally Available
Self-hosted Edge 3.36 or laterGenerally Available
Self-hosted Stable 3.33 or laterGenerally Available

To define an organization-level theme, navigate to Settings > R2 themes and click Create new.

In the left panel of the theme editor, you can define the default colors, styles, and typography for all React 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.

Organization-level themes apply to all apps, including those that were created before you defined a theme. These themes are not applied to classic apps.

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.
  • 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": "#E2E8F0",
      "charts_2": "#93C5FD",
      "charts_3": "#3B82F6",
      "charts_4": "#FBBF24",
      "charts_5": "#F97316"
    }
  },
  "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": "#2663D9",
      "charts_2": "#2DB37F",
      "charts_3": "#E68A33",
      "charts_4": "#9F4CCC",
      "charts_5": "#E64D86"
    }
  },
  "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.

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.