The Theme object
Information about the current app theme.
Properties
All properties for this object with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read property values.
automatic
A list of default colors for automatic assignment to options.
| Type | array |
| Format | Color |
| Array values | string |
| Configurability | Read-only |
| Default | null |
Examples
#FF5733
#33FF57
#3357FF
#FF33A1
#A133FF
#FF33D4
#33FFD4
borderRadius
The radius of the border.
| Type | string |
| Format | Plain Text |
| Configurability | Inspector > Appearance > Styles > Border radius |
| Default | null |
Examples
"4px"
canvas
Default background color of the app.
| Type | string |
| Format | Color |
| Configurability | Read-only |
| Default | null |
Examples
"#ffffff"
danger
Default color to indicate destructive actions, errors, and negative trends.
| Type | string |
| Format | Color |
| Configurability | Read-only |
| Default | null |
Examples
"#ff0000"
Object Properties
Examples
"Sohne, -apple-system"
Object Properties
Examples
"700"
Examples
"36px"
Examples
{
"fontWeight": "700",
"fontSize": "36px"
}
Object Properties
Examples
"700"
Examples
"36px"
Examples
{
"fontWeight": "700",
"fontSize": "28px"
}
Object Properties
Examples
"700"
Examples
"36px"
Examples
{
"fontWeight": "700",
"fontSize": "24px"
}
Object Properties
Examples
"700"
Examples
"36px"
Examples
{
"fontWeight": "700",
"fontSize": "18px"
}
Object Properties
Examples
"700"
Examples
"36px"
Examples
{
"fontWeight": "700",
"fontSize": "16px"
}
Object Properties
Examples
"700"
Examples
"36px"
Examples
{
"fontWeight": "700",
"fontSize": "14px"
}
Examples
"0 4px 16px 0 rgba(0, 0, 0, 0.12), 0 16px 32px 0 rgba(55, 55, 55, 0.08)"
highlight
Default color to highlight matched text in searches.
| Type | string |
| Format | Color |
| Configurability | Read-only |
| Default | null |
Examples
"#FF0000"
info
Default color to indicate neutral information.
| Type | string |
| Format | Color |
| Configurability | Read-only |
| Default | null |
Examples
"#00BFFF"
Object Properties
Examples
"700"
Examples
"Sohne, -apple-system"
Object Properties
Examples
"700"
Examples
"Sohne, -apple-system"
Examples
"0 1px 3px rgba(0, 0, 0, 0.2)"
Examples
"0 3px 6px rgba(0, 0, 0, 0.16)"
mode
The theme mode.
| Type | string | ||||||||||
| Format | Plain Text | ||||||||||
| Configurability | Read-only | ||||||||||
| Allowed Values |
| ||||||||||
| Default | null |
Examples
light
Examples
#FF0000
secondary
Default secondary accent color that is optionally available. Falls back to primary if not set.
| Type | string |
| Format | Color |
| Configurability | Read-only |
| Default | null |
Examples
#FF0000
success
Default color to indicate successful actions, completion, and positive trends.
| Type | string |
| Format | Color |
| Configurability | Read-only |
| Default | null |
Examples
#00B74A
surfacePrimary
Default background color for containers and tables.
| Type | string |
| Format | Color |
| Configurability | Read-only |
| Default | null |
Examples
#FFFFFF
surfaceSecondary
Secondary background color for containers and tables.
| Type | string |
| Format | Color |
| Configurability | Read-only |
| Default | null |
Examples
#F7F8FA
tertiary
Default tertiary accent color that is optionally available. Falls back to secondary if not set.
| Type | string |
| Format | Color |
| Configurability | Read-only |
| Default | null |
Examples
#F7F8FA
warning
Default color to indicate warnings.
| Type | string |
| Format | Color |
| Configurability | Read-only |
| Default | null |
Examples
#FFA500
Methods
JavaScript API methods for this object. You can write JavaScript almost anywhere in Retool and use methods to manipulate data and property values.
theme.setMode(mode, options)
Parameters
Examples
Persist the theme mode.
theme.setMode('dark', { persist: true });