The Theme object

Information about the current app theme.

Version: Self-hosted 3.114 Stable

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
Mutability	Read-only

Examples

#FF5733

#33FF57

#3357FF

#FF33A1

#A133FF

#FF33D4

#33FFD4

---

borderRadius

The radius of the border.

Type	string
Format	Plain Text
Mutability	Control Usage Retool UI Inspector > Appearance > Styles

Examples

"4px"

---

canvas

Default background color of the app.

Type	string
Format	Color
Mutability	Read-only

Examples

"#ffffff"

---

danger

Default color to indicate destructive actions, errors, and negative trends.

Type	string
Format	Color
Mutability	Read-only

Examples

"#ff0000"

---

defaultFont

The default font.

Type	object
Mutability	Read-only

Object Properties

name

The font family.

Type	string
Format	Plain Text
Mutability	Read-only

Examples

"Sohne, -apple-system"

---

source

(No description available)

Type	unknown
Mutability	Read-only

---

---

h1Font

The H1 font.

Type	object
Mutability	Read-only

Object Properties

fontWeight

The numeric font weight.

Type	string
Mutability	Read-only

Examples

"700"

---

fontSize

The font size.

Type	string
Mutability	Read-only

Examples

"36px"

---

Examples

{
"fontWeight": "700",
"fontSize": "36px"
}

---

h2Font

The H2 font.

Type	object
Mutability	Read-only

Object Properties

fontWeight

The numeric font weight.

Type	string
Mutability	Read-only

Examples

"700"

---

fontSize

The font size.

Type	string
Mutability	Read-only

Examples

"36px"

---

Examples

{
"fontWeight": "700",
"fontSize": "28px"
}

---

h3Font

The H3 font.

Type	object
Mutability	Read-only

Object Properties

fontWeight

The numeric font weight.

Type	string
Mutability	Read-only

Examples

"700"

---

fontSize

The font size.

Type	string
Mutability	Read-only

Examples

"36px"

---

Examples

{
"fontWeight": "700",
"fontSize": "24px"
}

---

h4Font

The H4 font.

Type	object
Mutability	Read-only

Object Properties

fontWeight

The numeric font weight.

Type	string
Mutability	Read-only

Examples

"700"

---

fontSize

The font size.

Type	string
Mutability	Read-only

Examples

"36px"

---

Examples

{
"fontWeight": "700",
"fontSize": "18px"
}

---

h5Font

The H5 font.

Type	object
Mutability	Read-only

Object Properties

fontWeight

The numeric font weight.

Type	string
Mutability	Read-only

Examples

"700"

---

fontSize

The font size.

Type	string
Mutability	Read-only

Examples

"36px"

---

Examples

{
"fontWeight": "700",
"fontSize": "16px"
}

---

h6Font

The H6 font.

Type	object
Mutability	Read-only

Object Properties

fontWeight

The numeric font weight.

Type	string
Mutability	Read-only

Examples

"700"

---

fontSize

The font size.

Type	string
Mutability	Read-only

Examples

"36px"

---

Examples

{
"fontWeight": "700",
"fontSize": "14px"
}

---

highElevation

High elevation shadow.

Type	string
Format	CSS
Mutability	Read-only

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
Mutability	Read-only

Examples

"#FF0000"

---

info

Default color to indicate neutral information.

Type	string
Format	Color
Mutability	Read-only

Examples

"#00BFFF"

---

labelEmphasizedFont

The emphasized label font.

Type	object
Mutability	Read-only

Object Properties

fontWeight

The numeric font weight.

Type	string
Mutability	Read-only

Examples

"700"

---

name

The font family.

Type	string
Format	Plain Text
Mutability	Read-only

Examples

"Sohne, -apple-system"

---

source

(No description available)

Type	unknown
Mutability	Read-only

---

---

labelFont

The label font.

Type	object
Mutability	Read-only

Object Properties

fontWeight

The numeric font weight.

Type	string
Mutability	Read-only

Examples

"700"

---

name

The font family.

Type	string
Format	Plain Text
Mutability	Read-only

Examples

"Sohne, -apple-system"

---

source

(No description available)

Type	unknown
Mutability	Read-only

---

---

lowElevation

Low elevation shadow.

Type	string
Format	CSS
Mutability	Read-only

Examples

"0 1px 3px rgba(0, 0, 0, 0.2)"

---

mediumElevation

Medium elevation shadow.

Type	string
Format	CSS
Mutability	Read-only

Examples

"0 3px 6px rgba(0, 0, 0, 0.16)"

---

mode

The theme mode.

Type	string
Format	Plain Text
Mutability	Read-only
Allowed Values	Value Description light Light mode. dark Dark mode. stretch Resize the image to the same dimensions as the area. contain Scale and clip the image to fit the area while preserving the aspect ratio.

Examples

light

---

primary

The default accent color.

Type	string
Format	Color
Mutability	Read-only

Examples

#FF0000

---

secondary

Default secondary accent color that is optionally available. Falls back to primary if not set.

Type	string
Format	Color
Mutability	Read-only

Examples

#FF0000

---

success

Default color to indicate successful actions, completion, and positive trends.

Type	string
Format	Color
Mutability	Read-only

Examples

#00B74A

---

surfacePrimary

Default background color for containers and tables.

Type	string
Format	Color
Mutability	Read-only

Examples

#FFFFFF

---

surfaceSecondary

Secondary background color for containers and tables.

Type	string
Format	Color
Mutability	Read-only

Examples

#F7F8FA

---

tertiary

Default tertiary accent color that is optionally available. Falls back to secondary if not set.

Type	string
Format	Color
Mutability	Read-only

Examples

#F7F8FA

---

warning

Default color to indicate warnings.

Type	string
Format	Color
Mutability	Read-only

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()

Set the theme mode.

Definition

theme.setMode(mode, options)

Parameters

mode

string

How to render images to fit.

Supported Values

cover	Scale the image to fit the area while preserving the aspect ratio.
center	Center the image.
stretch	Resize the image to the same dimensions as the area.
contain	Scale and clip the image to fit the area while preserving the aspect ratio.

options

object

Object Properties

persist

boolean

Whether to persist the theme mode. Defaults to false. If set to true, the selected mode will be persisted across sessions in the browser for all apps that use the same theme.

---