The Theme object

Information about the current app theme.

Properties

All properties for Theme with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read property values.

`automatic`

string[]

A list of default colors for automatic assignment to options.

`borderRadius`

string

The border radius.

`canvas`

string

Default background color of the app.

`danger`

string

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

`defaultFont`

object

The typography token used by most components.

Properties

`size`

string

The font size, in pixels.

`fontWeight`

enum

The font weight.

Values

`100 (Thin)`	100 (Thin)
`200 (Extra Light)`	200 (Extra Light)
`300 (Light)`	300 (Light)
`400 (Normal)`	400 (Normal)
`500 (Medium)`	500 (Medium)
`600 (Semi Bold)`	600 (Semi Bold)
`700 (Bold)`	700 (Bold)
`800 (Extra Bold)`	800 (Extra Bold)
`900 (Black)`	900 (Black)

`h1Font`

object

The typography token used for level 1 headers.

Properties

`size`

string

The font size, in pixels.

`fontWeight`

enum

The font weight.

Values

`100 (Thin)`	100 (Thin)
`200 (Extra Light)`	200 (Extra Light)
`300 (Light)`	300 (Light)
`400 (Normal)`	400 (Normal)
`500 (Medium)`	500 (Medium)
`600 (Semi Bold)`	600 (Semi Bold)
`700 (Bold)`	700 (Bold)
`800 (Extra Bold)`	800 (Extra Bold)
`900 (Black)`	900 (Black)

`h2Font`

object

The typography token used for level 2 headers.

Properties

`size`

string

The font size, in pixels.

`fontWeight`

enum

The font weight.

Values

`100 (Thin)`	100 (Thin)
`200 (Extra Light)`	200 (Extra Light)
`300 (Light)`	300 (Light)
`400 (Normal)`	400 (Normal)
`500 (Medium)`	500 (Medium)
`600 (Semi Bold)`	600 (Semi Bold)
`700 (Bold)`	700 (Bold)
`800 (Extra Bold)`	800 (Extra Bold)
`900 (Black)`	900 (Black)

`h3Font`

object

The typography token used for level 3 headers.

Properties

`size`

string

The font size, in pixels.

`fontWeight`

enum

The font weight.

Values

`100 (Thin)`	100 (Thin)
`200 (Extra Light)`	200 (Extra Light)
`300 (Light)`	300 (Light)
`400 (Normal)`	400 (Normal)
`500 (Medium)`	500 (Medium)
`600 (Semi Bold)`	600 (Semi Bold)
`700 (Bold)`	700 (Bold)
`800 (Extra Bold)`	800 (Extra Bold)
`900 (Black)`	900 (Black)

`h4Font`

object

The typography token used for level 4 headers.

Properties

`size`

string

The font size, in pixels.

`fontWeight`

enum

The font weight.

Values

`100 (Thin)`	100 (Thin)
`200 (Extra Light)`	200 (Extra Light)
`300 (Light)`	300 (Light)
`400 (Normal)`	400 (Normal)
`500 (Medium)`	500 (Medium)
`600 (Semi Bold)`	600 (Semi Bold)
`700 (Bold)`	700 (Bold)
`800 (Extra Bold)`	800 (Extra Bold)
`900 (Black)`	900 (Black)

`h5Font`

object

The typography token used for level 5 headers.

Properties

`size`

string

The font size, in pixels.

`fontWeight`

enum

The font weight.

Values

`100 (Thin)`	100 (Thin)
`200 (Extra Light)`	200 (Extra Light)
`300 (Light)`	300 (Light)
`400 (Normal)`	400 (Normal)
`500 (Medium)`	500 (Medium)
`600 (Semi Bold)`	600 (Semi Bold)
`700 (Bold)`	700 (Bold)
`800 (Extra Bold)`	800 (Extra Bold)
`900 (Black)`	900 (Black)

`h6Font`

object

The typography token used for level 6 headers.

Properties

`size`

string

The font size, in pixels.

`fontWeight`

enum

The font weight.

Values

`100 (Thin)`	100 (Thin)
`200 (Extra Light)`	200 (Extra Light)
`300 (Light)`	300 (Light)
`400 (Normal)`	400 (Normal)
`500 (Medium)`	500 (Medium)
`600 (Semi Bold)`	600 (Semi Bold)
`700 (Bold)`	700 (Bold)
`800 (Extra Bold)`	800 (Extra Bold)
`900 (Black)`	900 (Black)

`highlight`

string

Default color to highlight matched text in searches.

`info`

string

Default color to indicate neutral information.

`labelEmphasizedFont`

object

The typography token used for bolded text in components like Buttons and Input Labels.

Properties

`size`

string

The font size, in pixels.

`fontWeight`

enum

The font weight.

Values

`100 (Thin)`	100 (Thin)
`200 (Extra Light)`	200 (Extra Light)
`300 (Light)`	300 (Light)
`400 (Normal)`	400 (Normal)
`500 (Medium)`	500 (Medium)
`600 (Semi Bold)`	600 (Semi Bold)
`700 (Bold)`	700 (Bold)
`800 (Extra Bold)`	800 (Extra Bold)
`900 (Black)`	900 (Black)

`labelFont`

object

The typography token used for text with medium weight in components like Tags and Tabs.

Properties

`size`

string

The font size, in pixels.

`fontWeight`

enum

The font weight.

Values

`100 (Thin)`	100 (Thin)
`200 (Extra Light)`	200 (Extra Light)
`300 (Light)`	300 (Light)
`400 (Normal)`	400 (Normal)
`500 (Medium)`	500 (Medium)
`600 (Semi Bold)`	600 (Semi Bold)
`700 (Bold)`	700 (Bold)
`800 (Extra Bold)`	800 (Extra Bold)
`900 (Black)`	900 (Black)

`mode`

string

The current theme mode, such as Light or Dark.

`primary`

string

The default accent color.

`secondary`

string

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

`success`

string

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

`surfacePrimary`

string

Default background color for containers and tables.

`surfaceSecondary`

string

Secondary background color for inputs and controls.

`tertiary`

string

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

`warning`

string

Default color to indicate warnings.

Methods

JavaScript API methods for interacting with Methods. You can write JavaScript almost anywhere in Retool and use methods to manipulate data and property values.

`setMode`

Select the theme mode.

theme.setMode(modeParam, persist)

Parameters

`modeParam`

`persist`

boolean

Whether to persist the mode selection across user sessions.

Properties​

automatic​

borderRadius​

canvas​

danger​

highlight​

info​

primary​

secondary​

success​

surfacePrimary​

surfaceSecondary​

tertiary​

warning​

Methods​

setMode​

modeParam​

persist​

Properties

`automatic`

`borderRadius`

`canvas`

`danger`

`highlight`

`info`

`primary`

`secondary`

`success`

`surfacePrimary`

`surfaceSecondary`

`tertiary`

`warning`

Methods

`setMode`

`modeParam`

`persist`