How to Enable Dark Mode in Retool

In the Retool editor, click the gear icon in the top toolbar to open App Settings. Go to Appearance → Theme. Click the Theme Editor button. In the Theme Editor modal, look for the Theme preset selector at the top — it shows Default (light). Click it and select Dark. Click Save to apply. The entire app canvas instantly switches to a dark color scheme including backgrounds, text, borders, and component surfaces.

With the Dark preset active in the Theme Editor, you can override individual color tokens. The Theme Editor exposes CSS variable tokens like --retool-color-background-primary, --retool-color-text-primary, and --retool-color-accent. Click any color swatch in the Theme Editor to open a color picker and set a custom value. For more precise token control, add CSS variables in App Settings → Custom CSS:

1/* Override specific dark mode color tokens */
2:root {
3  /* Custom dark background — slightly lighter than Retool default */
4  --retool-color-background-primary: #1a1b2e !important;
5  
6  /* Custom accent color in dark mode */
7  --retool-color-accent: #7C3AED !important;
8  
9  /* Text color */
10  --retool-color-text-primary: #E2E8F0 !important;
11}

For apps where users can toggle dark/light mode at runtime, you need a Temporary State variable and a Toggle component. First, create a Temporary State: in the editor, open the State panel (or press S key in the editor) and add a new Temporary State named darkMode with a default value of false. Next, add a Toggle component to the app. In the Toggle's Inspector, set the Default value to `{{ darkMode.value }}`. Add an event handler: On Change → Run Script → enter: `await darkMode.setValue(!darkMode.value);`. Note: setValue() is async — do not read darkMode.value immediately after setting it in the same script execution context.

1// Toggle component event handler (On Change → Run Script)
2// Note: setValue is async — the new value is not immediately available
3await darkMode.setValue(!darkMode.value);
4
5// Do NOT do this — darkMode.value will still be the old value here:
6// await darkMode.setValue(!darkMode.value);
7// console.log(darkMode.value); // still old value!

With the darkMode temporary state variable controlling a class on the body, add CSS rules to App Settings → Custom CSS that activate dark styles when the class is present. Use the conditional CSS class approach: when darkMode is true, add a class to the app container, then write CSS targeting that class. Alternatively, combine with a Text component that dynamically sets a CSS class: In a Text component's CSS Class Name (Inspector → Advanced), enter: `{{ darkMode.value ? 'dark-mode-active' : '' }}` Then write CSS for .dark-mode-active descendants:

1/* Dark mode styles activated by .dark-mode-active class */
2
3/* When dark mode is on, override app background */
4.dark-mode-active ~ ._retool-app-body,
5body._dark-mode ._retool-app-body {
6  background-color: #1a1b2e !important;
7  color: #E2E8F0 !important;
8}
9
10/* Table in dark mode */
11.dark-mode-active ._retool-table,
12.dark-mode-active ._retool-table thead tr {
13  background-color: #2d2f3e !important;
14  color: #E2E8F0 !important;
15  border-color: #4a4d6b !important;
16}
17
18.dark-mode-active ._retool-table tbody tr:hover {
19  background-color: #3a3d52 !important;
20}

For rapid prototyping or testing what a dark mode would look like, you can use a CSS filter inversion trick. In App Settings → Custom CSS, add: ```css body { filter: invert(1) hue-rotate(180deg) !important; } /* Re-invert images so they look correct */ img, video, ._retool-image { filter: invert(1) hue-rotate(180deg) !important; } ``` This inverts all colors and then rotates hues by 180 degrees to restore natural-looking colors while darkening backgrounds. White becomes black, light gray becomes dark gray. It's not perfect — some colors look off — but it's useful for a 30-second dark mode preview.

If you have existing custom CSS rules (from other styling work), review them for dark mode compatibility. Rules that hardcode light colors (e.g., background-color: #ffffff !important) will break the dark theme. Use CSS custom properties to make your color rules theme-aware: Define them for both light and dark, then reference them in component rules:

1/* Theme-aware CSS custom properties */
2:root {
3  --app-surface: #ffffff;
4  --app-text: #1a1a1a;
5  --app-border: #e2e8f0;
6}
7
8/* Dark mode overrides — triggered by .dark-mode-active class or dark theme */
9@media (prefers-color-scheme: dark) {
10  :root {
11    --app-surface: #1a1b2e;
12    --app-text: #e2e8f0;
13    --app-border: #4a4d6b;
14  }
15}
16
17/* Using the variables in component styles */
18._retool-container {
19  background-color: var(--app-surface) !important;
20  color: var(--app-text) !important;
21  border-color: var(--app-border) !important;
22}