Main variables

$ui-primary-color

The primary color representing your brand identity. Used to emphasize key information within your interface.

Type: color

Default value: "rgb(11, 121, 209)"

Computed value: "rgb(11, 121, 209)"

Alias (for compatibility): $gbc-primary-color,theme-primary-background-color

$ui-on-primary-color

Suggested colors for text or elements placed on the primary color are black or white. Ensure adequate contrast: at least 4.5:1 for standard text and 3:1 for large text for accessibility compliance.

Type: color

Default value: "rgb(255, 255, 255)"

Computed value: "rgb(255, 255, 255)"

Alias (for compatibility): $gbc-secondary-text-color,theme-primary-color

$ui-background-color

Define the background color for your application

Type: color

Default value: "rgb(247, 247, 247)"

Computed value: "rgb(247, 247, 247)"

Alias (for compatibility): $theme-secondary-background-color,gbc-primary-background-color

$ui-field-color

Designated for form field backgrounds, including components like comboboxes, text edits, text areas, spin edits, and date edits.

Type: color

Default value: "rgb(255, 255, 255)"

Computed value: "rgb(255, 255, 255)"

Alias (for compatibility): $theme-field-background-color,gbc-field-background-color

$ui-border-color

Applied to components with borders, ensuring consistency across the design.

Type: color

Default value: "rgb(224, 224, 224)"

Computed value: "rgb(224, 224, 224)"

Alias (for compatibility): $theme-separator-color,gbc-separator-color

$ui-text-icon-color

Define the color for primary text and icons, excluding text placed on surfaces with the primary color (e.g., chrome bars).

Type: color

Default value: "rgb(31, 31, 31)"

Computed value: "rgb(31, 31, 31)"

Alias (for compatibility): $theme-secondary-color,gbc-primary-text-color

$ui-error-color

The standard color for error alerts.

Type: color

Default value: "rgb(244, 67, 54)"

Computed value: "rgb(244, 67, 54)"

Alias (for compatibility): $theme-error-background-color,gbc-error-color

$ui-font-family

Specifies the primary font used across your application.

Type: string

Default value: "'Droid Sans, sans-serif'"

Computed value: "Droid Sans, sans-serif"

Alias (for compatibility): $theme-font-family

$ui-font-family-monospace

Specifies the monospace font used across your application (fontpitch=fixed, logs, traditional mode, …)

Type: string

Default value: "'Droid Sans Mono, monospace'"

Computed value: "Droid Sans Mono, monospace"

Alias (for compatibility): $theme-font-family-monospace

$ui-density

Enhances the user experience by optimizing the interface’s spatial arrangement, promoting accessibility and usability.

Type: number

Default value: "0"

Computed value: "0"