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
false#FF5733
false#33FF57
false#3357FF
false#FF33A1
false#A133FF
false#FF33D4
false#33FFD4
borderRadius
The radius of the border.
| Type | string |
| Format | Plain Text |
| Configurability | Inspector > Appearance > Styles > Border radius |
| Default | null |
Examples
false"4px"
canvas
Default background color of the app.
| Type | string |
| Format | Color |
| Configurability | Read-only |
| Default | null |
Examples
false"#ffffff"
danger
Default color to indicate destructive actions, errors, and negative trends.
| Type | string |
| Format | Color |
| Configurability | Read-only |
| Default | null |
Examples
false"#ff0000"
Object Properties
Examples
false"Sohne, -apple-system"
Object Properties
Examples
false"700"
Examples
false"36px"
Examples
false{
"fontWeight": "700",
"fontSize": "36px"
}
Object Properties
Examples
false"700"
Examples
false"36px"
Examples
false{
"fontWeight": "700",
"fontSize": "28px"
}
Object Properties
Examples
false"700"
Examples
false"36px"
Examples
false{
"fontWeight": "700",
"fontSize": "24px"
}
Object Properties
Examples
false"700"
Examples
false"36px"
Examples
false{
"fontWeight": "700",
"fontSize": "18px"
}
Object Properties
Examples
false"700"
Examples
false"36px"
Examples
false{
"fontWeight": "700",
"fontSize": "16px"
}
Object Properties
Examples
false"700"
Examples
false"36px"
Examples
false{
"fontWeight": "700",
"fontSize": "14px"
}
Examples
false"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
false"#FF0000"
info
Default color to indicate neutral information.
| Type | string |
| Format | Color |
| Configurability | Read-only |
| Default | null |
Examples
false"#00BFFF"
Object Properties
Examples
false"700"
Examples
false"Sohne, -apple-system"
Object Properties
Examples
false"700"
Examples
false"Sohne, -apple-system"
Examples
false"0 1px 3px rgba(0, 0, 0, 0.2)"
Examples
false"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
falselight
Examples
false#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
false#FF0000
success
Default color to indicate successful actions, completion, and positive trends.
| Type | string |
| Format | Color |
| Configurability | Read-only |
| Default | null |
Examples
false#00B74A
surfacePrimary
Default background color for containers and tables.
| Type | string |
| Format | Color |
| Configurability | Read-only |
| Default | null |
Examples
false#FFFFFF
surfaceSecondary
Secondary background color for containers and tables.
| Type | string |
| Format | Color |
| Configurability | Read-only |
| Default | null |
Examples
false#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
false#F7F8FA
warning
Default color to indicate warnings.
| Type | string |
| Format | Color |
| Configurability | Read-only |
| Default | null |
Examples
false#FFA500