How to Customize Themes in Retool

Navigate to Settings (gear icon, bottom-left) → Themes. You'll see the default Retool theme plus any custom themes your org has created. Click '+ New theme' or 'Create theme'. Give your theme a name like 'Acme Corp Brand' or 'Dark Dashboard'. The theme editor opens with four sections: Core Colors, Typography, Metrics, and Shadows. Changes preview in real time in the canvas sample on the right.

The Core Colors section lets you set the primary color palette. Key colors to configure: (1) Primary — used for primary buttons, active states, selected rows. Set to your brand's primary color. (2) Success — green indicators, save buttons, positive notifications. (3) Warning — yellow/orange indicators, warning badges. (4) Danger/Error — red indicators, delete buttons, error states. (5) Neutral — gray scale used for borders, backgrounds, and disabled states. Each color has a swatch you can click to enter a hex code.

1// Example brand color configuration:
2// Primary: #6366f1 (indigo)
3// Success: #10b981 (green)
4// Warning: #f59e0b (amber)
5// Danger: #ef4444 (red)
6// Neutral base: #6b7280 (gray)
7
8// Retool generates a full color scale from each base color
9// (50, 100, 200...900 shades) automatically.

In the Typography section, set your app's fonts. The Font family field accepts any Google Fonts name — type 'Inter', 'Roboto', 'DM Sans', or your preferred font name. Retool loads it from Google Fonts automatically. Set the Base font size (default 14px) and the font scale for heading sizes. You can also configure separate fonts for headings vs body text. For custom self-hosted fonts, use Preloaded CSS with @font-face instead of the Theme Editor font field.

1// Typography configuration examples:
2// Font family: 'Inter' (modern, clean)
3// Font family: 'DM Sans' (geometric, professional)
4// Font family: 'Lato' (clean, widely used)
5// Font family: 'Source Code Pro' (for developer tools)
6
7// Base font size: 14px (default) or 13px (compact) or 15px (spacious)
8// H1 scale: 2x base = 28px
9// H2 scale: 1.5x base = 21px

The Metrics section controls the geometric feel of your apps: Border radius — how rounded component corners are (0 = sharp/square, 4px = slight rounding, 8px = noticeable rounding, 12px+ = very rounded). Spacing — the base spacing unit that controls padding and margins throughout components. A larger spacing value creates a more 'airy' feel; smaller creates a denser, compact layout. Set border radius to match your design system — flat/sharp (0-2px) for enterprise tools, rounded (6-8px) for modern consumer-facing apps.

The Shadows section controls the drop shadow intensity on cards, modals, and elevated components. Options typically range from 'none' (flat design) to 'large' (deep elevation). For neumorphic or flat design systems, set shadows to none. For traditional enterprise UI with visible card depth, use medium shadows. For high-contrast, dramatic layouts, use large shadows.

After configuring your theme, apply it to apps. Method 1: In an individual app's settings (gear icon in the editor → App settings), find the 'Theme' dropdown and select your custom theme. Method 2: In Settings → Themes, click your theme and click 'Set as default' to apply it to all apps in your org that haven't individually overridden their theme. Individual app theme selections override the org default.

The Theme Editor supports creating both a light and dark variant. In the theme editor, look for a 'Mode' toggle that lets you configure light-mode colors separately from dark-mode colors. If you want users to be able to toggle between light and dark mode within the app, use a Temporary State variable and a toggle button that updates the app's CSS class. See the 'How to enable dark mode in Retool' tutorial for the implementation.