# Interface: ThemeTokens

[Mobile Document Scanner API Reference](../index.md) / ThemeTokens

# Interface: ThemeTokens

Defined in: [src/settings/theme.ts:11](https://github.com/Dynamsoft/document-scanner-javascript/blob/main/src/settings/theme.ts#L11)

The colors of the screens of the document scanner, as CSS colors. A token without
a value keeps its default. The document scanner also sets each token as a CSS
custom property, such as `--mds-on-surface` for `onSurface`. Custom CSS can read
these properties.

## Properties

### active?

> `optional` **active?**: `string`

Defined in: [src/settings/theme.ts:42](https://github.com/Dynamsoft/document-scanner-javascript/blob/main/src/settings/theme.ts#L42)

The color of a toggle that is on, and of the selected entry in a menu.

#### Default Value

`"#fe8e14"`

***

### background?

> `optional` **background?**: `string`

Defined in: [src/settings/theme.ts:24](https://github.com/Dynamsoft/document-scanner-javascript/blob/main/src/settings/theme.ts#L24)

The background color of the screens, behind the viewfinder and the pages, and of
the dialogs.

#### Default Value

`"#000000"`

***

### badge?

> `optional` **badge?**: `string`

Defined in: [src/settings/theme.ts:55](https://github.com/Dynamsoft/document-scanner-javascript/blob/main/src/settings/theme.ts#L55)

The color of the badge that counts the pages on the thumbnail of the capture
screen.

#### Default Value

`"#e65050"`

***

### error?

> `optional` **error?**: `string`

Defined in: [src/settings/theme.ts:61](https://github.com/Dynamsoft/document-scanner-javascript/blob/main/src/settings/theme.ts#L61)

The color of a button that destroys something, such as delete.

#### Default Value

`"#fb2c36"`

***

### inactive?

> `optional` **inactive?**: `string`

Defined in: [src/settings/theme.ts:48](https://github.com/Dynamsoft/document-scanner-javascript/blob/main/src/settings/theme.ts#L48)

The color of a button that is off, under the finger, or busy with its action.

#### Default Value

`"#575757"`

***

### onSurface?

> `optional` **onSurface?**: `string`

Defined in: [src/settings/theme.ts:36](https://github.com/Dynamsoft/document-scanner-javascript/blob/main/src/settings/theme.ts#L36)

The color of text and icons.

#### Default Value

`"#ffffff"`

***

### primary?

> `optional` **primary?**: `string`

Defined in: [src/settings/theme.ts:17](https://github.com/Dynamsoft/document-scanner-javascript/blob/main/src/settings/theme.ts#L17)

The accent color of links, primary buttons, and the outline of a found document.

#### Default Value

`"#fe8e14"`

***

### surface?

> `optional` **surface?**: `string`

Defined in: [src/settings/theme.ts:30](https://github.com/Dynamsoft/document-scanner-javascript/blob/main/src/settings/theme.ts#L30)

The background color behind the page on the rectify and edit screens.

#### Default Value

`"#323234"`