Introduction

Docebo Flow allows you to start an instance of your Docebo platform on any external web page, as long as you have access to its HTML and JavaScript code.

The Docebo platform instance opens as a pop-up activated either when the user clicks on a button or interacts with an element - such as a link, or a string - on the external web page. When the pop-up opens, the platform instance shows the training content you, as the Superadmin, have selected for the user on the basis of the action he or she is performing, in order to provide the best learning on the fly experience, enriching it with ad hoc training.

Depending on the Docebo Flow configuration, users can be automatically provisioned so that their learning on the flow of work is not an event interrupted by the need to log in.

Docebo Flow is available as a web-based application on desktop and mobile platforms.

The Docebo Flow Launcher allows you to open an instance of your Docebo platform in any external web platform, as long as you have access to its HTML and Javascript code. Find out more on Docebo Flow and the Docebo Flow Launcher in their respective knowledge base articles.

This article is a technical guide on how to customize the Docebo Flow Launcher using CSS Tokens in your web platform.

CSS tokens provide a way to easily alter the look and feel of the Docebo Flow launcher. Simply use the provided tokens with the values of your choice in the CSS section of the page hosting your launcher and you can configure many different aspects of the launcher’s appearance to better suit the page hosting the launcher.

Using CSS Tokens

In the CSS section of your hosting page, you already have a section defined that you can add the CSS Tokens to. Please see Embedding Docebo Flow Into Your Web Page for further information on adding this section to your page.

dcbo-flow-launcher {
}

The available CSS tokens for the Docebo Flow launcher are described in further detail later in this article. The tokens all take the following form:

--dcb-flow-item-attribute:value;

For example, to edit the border radius of the launcher you would use the following token, shown in the appropriate section inside CSS:

dcbo-flow-launcher {
--dcb-flow-launcher-border-radius:3px;
}

This example would result in the launcher having rounded corners with a radius of 3px in each corner. 

Available CSS Tokens

Launcher Button Tokens Launcher Layout Tokens Background Color Tokens Text Color Tokens Primary Color Tokens Secondary Color Tokens

Tertiary Color Tokens Success Color Tokens Border Color Tokens Alert Color Tokens Error Color Tokens

Launcher Button Tokens

Change the launcher button’s shadows Change the launcher button’s hover shadows

Change the launcher button’s shadow color

Change the launcher button’s shadows

Defines the size of the shadow along the four edges of the launcher’s button, measured in pixels. The values are ordered by: top, right, bottom, left.

Token

--dcb-flow-launcher-button-shadow

Value Type

4 px values, like 5px 2px 5px 5px

Default Value

0px 1px 4px 0px

Example

dcbo-flow-launcher {
  --dcb-flow-launcher-button-shadow: 3px 3px 9px 2px;
}

Change the launcher button’s hover shadows

Defines the size of the shadow along the four edges of the launcher’s button, measured in pixels when being hovered over. The values are ordered by: top, right, bottom, left.

Token

--dcb-flow-launcher-button-shadow-hover

Value Type

4 px values, like 5px 2px 5px 5px

Default Value

0px 4px 8px 0px

Example

dcbo-flow-launcher {
  --dcb-flow-launcher-button-shadow-hover:12px;
}

Change the launcher button’s shadow color

Changes the color of the shadow surrounding the launcher’s button. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--dcb-flow-launcher-button-shadow-color

Value Type

rgba value, like rgba(255,255,0,0.4)

Default Value

rgba(0, 0, 0, 0.24)

Example

dcbo-flow-launcher {
--dcb-flow-launcher-button-shadow-color: purple;
}

Launcher Layout Tokens

Change the launcher’s outer corners’ radius Change the launcher’s outer shadows Change the launcher’s outer shadow color Customize the background color of the title bar Customize the colors of the title bar’s icons Change the title bar custom button height Customize the widget separator height Customize the launcher’s border

Change the font family Change the color of icons intended for dark backgrounds Change the color of icons intended for light backgrounds Change the color of hover over buttons with light hover color Change the color of hover over buttons with dark hover color Change the outer corners’ radius of status labels within the launcher Change the outer corners’ radius of training material lists within the launcher

Change the launcher’s outer corners’ radius

Changes the outer corners’ radius from 0 (square corners) to rounded

Token

--dcb-flow-launcher-border-radius

Value Type

px value

Default Value

0.75rem

Example

dcbo-flow-launcher {
  --dcb-flow-launcher-border-radius:3px;
}

Change the launcher’s outer shadows

Defines the size of the shadow along the four edges of the launcher, measured in pixels. The values are ordered by: top, right, bottom, left.

Token

--dcb-flow-launcher-shadow

Value Type

4 px values, like 5px 2px 5px 5px

Default Value

0 4px 8px 0

Example

dcbo-flow-launcher {
  --dcb-flow-launcher-shadow:0px 0px 1px 1px;
}

Change the launcher’s outer shadow color

Changes the color of the shadow surrounding the launcher. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--dcb-flow-launcher-shadow-color

Value Type

rgba value, like rgba(255,0,0,0.3)

Default Value

rgba(0, 0, 0, 0.24)

Example

dcbo-flow-launcher {
  --dcb-flow-launcher-shadow-color:#878985;
}

Customize the background color of the title bar

Changes the background color of the title bar. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--dcb-flow-custom-button-top-bar-bg-color

Value Type

rgba value, like rgba(255,0,0,0.3)

Default Value

rgba(245, 245, 245, 1)

Example

dcbo-flow-launcher {
  --dcb-flow-custom-button-top-bar-bg-color: rgba(222,206,156,0.3);
}

Customize the colors of the title bar’s icons

Customizes the color of the icons found in the title bar of the launcher.

Token

--dcb-flow-custom-button-top-bar-icon-color

Value Type

rgba value, like rgba(255,0,0,0.3)

Default Value

#666666 or rgb(104,104,104)

Example

dcbo-flow-launcher {
  --dcb-flow-custom-button-top-bar-icon-color:black;
}

Change the title bar custom button height

Changes the height of the custom button in the title bar of the Launcher.

Token

--dcb-flow-custom-button-top-bar-height

Value Type

px value

Default Value

36px

Example

dcbo-flow-launcher{
  --dcb-flow-custom-button-top-bar-height:30px;
}

Customize the widget separator height

Changes the height of the separator between the widgets in the launcher.

Token

--dcb-flow-launcher-widgets-separator-height

Value Type

px value

Default Value

12px

Example

dcbo-flow-launcher {
  --dcb-flow-launcher-widgets-separator-height:12px;
}

Customize the launcher’s border

Changes the launcher’s outer border thickness, line type and color.

Token

--dcb-flow-launcher-border

Value Type

Shorthand for border items: px value, line type, rgba value, like rgba(255,0,0,0.3)

Default Value

0

Example

dcbo-flow-launcher {
  --dcb-flow-launcher-border:3px solid green;
}

Change the font family

Specify the font family used. This value is consistent throughout the UI of the launcher and the widgets contained within.

Token

--dcb-flow-ui-font-family

Value Type

font family, like serif

Default Value

'Open Sans', sans-serif

Example

dcbo-flow-launcher {
  --dcb-flow-ui-font-family:'Trebuchet MS', sans-serif;
}

Change the color of icons intended for dark backgrounds

Specify the color of all icons that are intended for a dark background.

Token

--dcb-flow-ui-color-icon-negative

Value Type

Color values, such as red, #FF0000 or rgba(255,0,0,0.5)

Default Value

rgba(255, 255, 255, 1)

Example

dcbo-flow-launcher {
  --dcb-flow-ui-color-icon-negative: rgba(222,206,156,0.3);
}

Change the color of icons intended for light backgrounds

Specify the color of all icons that are intended for a light or neutral background.

Token

--dcb-flow-ui-color-icon-neutral

Value Type

Color values, such as blue, #0000FF or rgba(0,0,255,0.5)

Example

dcbo-flow-launcher {
  --dcb-flow-ui-color-icon-neutral: rgba(98,106,236);
}

Change the color of hover over buttons with light hover color

Specify a color for the hover state of buttons that have a light hover color, such as the enrollment button in the table of contents list.

Token

--dcb-flow-ui-color-light-hover

Value Type

Color values, such as green, #008000 or rgba(0,128,0,0.5)

Default Value

rgba(255, 255, 255, 0.24)

Example

dcbo-flow-launcher {
  --dcb-flow-ui-color-light-hover: rgba(178,56,136);
}

Change the color of hover over buttons with dark hover Color

Specify a color for the hover state of buttons that have a dark hover color, such as the button in the Single Course Player preview.

Token

--dcb-flow-ui-color-dark-hover

Value Type

Color values, such as yellow, #FFFF00 or rgba(255,255,0,0.5)

Default Value

rgba(0, 0, 0, 0.08)

Example

dcbo-flow-launcher {
  --dcb-flow-ui-color-dark-hover: rgba(97,126,201);
}

Change the outer corners’ radius of status labels within the launcher

Changes the status labels for courses corners’ radius from 0 (square corners) to rounded.

Token

--dcb-flow-ui-border-radius

Value Type

px value

Default Value

0.13rem

Example

dcbo-flow-launcher {
 --dcb-flow-ui-border-radius:3px;
}

Change the outer corners’ radius of training material lists within the launcher

Changes the training material lists’ corners’ radius from 0 (square corners) to rounded.

Token

--dcb-flow-ui-border-radius-circular

Value Type

px value

Default Value

50%

Example

dcbo-flow-launcher {
  --dcb-flow-ui-border-radius-circular:3px;
}

Background Color Tokens

Change the color of the launcher background Change the color of the surface background

Change the background color of the layout placeholder Change the background of the colored buttons within the Launcher

Change the color of the launcher background

This token changes the launcher's background color. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--ui-color-layout-background

Value Type

rgba value, like rgba(160,32,240,0.4)

Example

dcbo-flow-launcher {
  --ui-color-layout-background: purple;
}

Change the color of the surface background

This token changes the surface's background color. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--ui-color-layout-surface

Value Type

rgba value, like rgba(255,0,255,0.4)

Example

dcbo-flow-launcher {
  --ui-color-layout-surface: magenta;
}

Change the background color of the layout placeholder

This token changes the placeholder's background color. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--ui-color-layout-placeholder

Value Type

rgba value, like rgba(0,255,0,0.4)

Example

dcbo-flow-launcher {
  --ui-color-layout-placeholder: green;
}

Change the background of the colored buttons within the Launcher

Changes the background of the colored buttons of the launcher. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--dcbo-flow-ui-button-bg-color-primary

Value Type

Color values, such as lime, #00FF00 or rgba(0,255,0,0.5)

Default Value

rgba(0, 135, 103, 1)

Example

dcbo-flow-launcher {
  --dcb-flow-ui-button-bg-color-primary:rgba(215,100,5,0.5);
}

Text Color Tokens

Change the label color of the colored buttons within the Launcher Change the primary text color

Change the secondary text color Change the color of the text in the neutral button

Change the label color of the colored buttons within the Launcher

Changes the label color of the colored buttons of the launcher. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--dcb-flow-ui-button-label-color-primary

Value Type

Color values, such as hotpink, #FFB6B4 or rgba(255,105,180,0.5)

Default Value

rgba(255, 255, 255, 1);

Example

dcbo-flow-launcher {
  --dcb-flow-ui-button-label-color-primary:rgba(215,100,5,0.5);
}

Change the primary text color

Changes the primary text's color used within the Launcher. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--ui-color-typography-primary

Value Type

Color values, such as tomato, #FF6347 or rgba(255,99,71,0.5)

Example

dcbo-flow-launcher {
  --ui-color-typography-primary:rgba(215,100,5,0.5);
}

Change the secondary text color

Changes the secondary text's color used within the Launcher. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--ui-color-typography-secondary

Value Type

Color values, such as papayawhip, #FFEFD5 or rgba(255,239,213,0.5)

Example

dcbo-flow-launcher {
  --ui-color-typography-secondary:rgba(215,100,5,0.5);
}

Change the color of the text in the neutral button

Changes the color of the text used within the neutral colored button. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--ui-color-button-label-neutral

Value Type

Color values, such as peachpuff, #FFDAB9 or rgba(255,218,185,0.5)

Example

dcbo-flow-launcher {
  --ui-color-button-label-neutral:rgba(215,100,5,0.5);
}

Primary Color Tokens

Change the primary accent color Change the background accent color of the avatar Change the loading accent color Change the icon primary accent color Change the default separator border color

Change the tab button border color Change the secondary border accent color Change the text accent color Change the tab button label color

Change the primary accent color

Changes the primary accent color. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--ui-color-accent-primary

Value Type

Color values, such as violet, #EE82EE or rgba(238,130,238,0.5)

Example

dcbo-flow-launcher {
  --ui-color-accent-primary:rgba(215,100,5,0.5);
}

Change the background accent color of the avatar

Changes the background accent color of the avatar. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--ui-color-avatar-background-accent

Value Type

Color values, such as lawngreen, #7CFC00 or rgba(124,252,0,0.5)

Example

dcbo-flow-launcher {
  --ui-color-avatar-background-accent:rgba(215,100,5,0.5);
}

Change the loading accent color

Changes the loading accent color. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--ui-color-loading-accent

Value Type

Color values, such as mediumaquamarine, #66CDAA or rgba(102,205,170,0.5)

Example

dcbo-flow-launcher {
  --ui-color-loading-accent:rgba(215,100,5,0.5);
}

Change the icon primary accent color

Changes the icon's primary accent color. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--ui-color-icon-accent-primary

Value Type

Color values, such as cornflowerblue, #6495ED or rgba(100,149,237,0.5)

Example

dcbo-flow-launcher {
  --ui-color-icon-accent-primary:rgba(215,100,5,0.5);
}

Change the default separator border color

Changes the color of the ui separator. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--ui-color-border-accessibility-default

Value Type

Color values, such as cornsilk, #FFF8DC or rgba(255,248,220,0.5)

Example

dcbo-flow-launcher {
  --ui-color-border-accessibility-default:rgba(215,100,5,0.5);
}

Change the tab button border color

Changes the color of the border of the tab buttons. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--ui-color-button-border-tabs

Value Type

Color values, such as goldenrod, #DAA520 or rgba(218,165,32,0.5)

Example

dcbo-flow-launcher {
  --ui-color-button-border-tabs:rgba(215,100,5,0.5);
}

Change the secondary border accent color

Changes the color of the secondary border accent. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--ui-color-border-accent-secondary

Value Type

Color values, such as saddlebrown, #8B4513 or rgba(139,69,19,0.5)

Example

dcbo-flow-launcher {
  --ui-color-border-accent-secondarys:rgba(215,100,5,0.5);
}

Change the text accent color

Changes the color of the text accent. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--ui-color-typography-accent

Value Type

Color values, such as lavenderblush, #FFF0F5 or rgba(255,240,245,0.5)

Example

dcbo-flow-launcher {
  --ui-color-typography-accent:rgba(215,100,5,0.5);
}

Change the tab button label color

Changes the color of the tab button label. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--ui-color-button-label-tabs

Value Type

Color values, such as darkslategray, #2F4F4F or rgba(47,79,79,0.5)

Example

dcbo-flow-launcher {
  --ui-color-button-label-tabs:rgba(215,100,5,0.5);
}

Secondary Color Tokens

Change the icon accent color Change the neutral button label color

Change the neutral icon color

Change the icon accent color

Changes the color of the icon accent. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--ui-color-icon-accent

Value Type

Color values, such as seashell, #FFF5EE or rgba(255,245,238,0.5)

Example

dcbo-flow-launcher {
  --ui-color-icon-accent:rgba(215,100,5,0.5);
}

Change the neutral button label color

Changes the color of the neutral button label. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--ui-color-button-label-neutral

Value Type

Color values, such as blanchedalmond, #FFEBCD or rgba(255,235,205,0.5)

Example

dcbo-flow-launcher {
  --ui-color-button-label-neutral:rgba(215,100,5,0.5);
}

Change the neutral icon color

Changes the color of the neutral icon. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--ui-color-icon-neutral

Value Type

Color values, such as royalblue, #4169E1 or rgba(65,105,225,0.5)

Example

dcbo-flow-launcher {
  --ui-color-icon-neutral:rgba(215,100,5,0.5);
}

Tertiary Color Tokens

Change the primary button background color

Change the primary button label accent color

Change the primary button background color

Changes the background color of primary buttons. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--ui-color-button-background-primary

Value Type

Color values, such as turquoise, #40E0D0 or rgba(64,224,208,0.5)

Example

dcbo-flow-launcher {
  --ui-color-button-background-primary:rgba(215,100,5,0.5);
}

Change the primary button label accent color

Changes the label accent color of primary buttons. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--ui-color-button-label-accent

Value Type

Color values, such as olive, #808000 or rgba(128,128,0,0.5)

Example

dcbo-flow-launcher {
  --ui-color-button-label-accent:rgba(215,100,5,0.5);
}

Success Color Tokens

Change the background color of the success badge Change the color of the success label background Change the background color of the active choice

Change the background color of the success avatar Change the background color of the success chart

Change the background color of the success badge

Changes the background color of the success badge. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--ui-color-badge-background-success

Value Type

Color values, such as blueviolet, #8A2BE2 or rgba(138,43,226,0.5)

Example

dcbo-flow-launcher {
  --ui-color-badge-background-success:rgba(215,100,5,0.5);
}

Change the color of the success label background

Changes the color of success label background. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--ui-color-semantic-success

Value Type

Color values, such as fuchsia, #FF00FF or rgba(255,0,255,0.5)

Example

dcbo-flow-launcher {
  --ui-color-semantic-success:rgba(215,100,5,0.5);
}

Change the background color of the active choice

Changes the background color of the active choice. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--ui-color-choice-background-active

Value Type

Color values, such as darkkhaki, #BDB76B or rgba(189,183,107,0.5)

Example

dcbo-flow-launcher {
  --ui-color-choice-background-active:rgba(215,100,5,0.5);
}

Change the background color of the success avatar

Changes the background color of the success avatar. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--ui-color-avatar-background-success

Value Type

Color values, such as moccasin, #FFE4B5 or rgba(255,228,181,0.5)

Example

dcbo-flow-launcher {
  --ui-color-avatar-background-success:rgba(215,100,5,0.5);
}

Change the background color of the success chart

Changes the background color of the success chart. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--ui-color-charts-background-success

Value Type

Color values, such as coral, #FF7F50 or rgba(255,127,80,0.5)

Example

dcbo-flow-launcher {
  --ui-color-charts-background-success:rgba(215,100,5,0.5);
}

Border Color Tokens

Change the background color of the launcher's widget seperator

Change the neutral color of the border

Change the background color of the launcher's widget seperator

Changes the background color of the launcher's widget seperator. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--dcb-flow-launcher-widgets-separator-bg-color

Value Type

Color values, such as firebrick, #B22222 or rgba(178,34,34,0.5)

Example

dcbo-flow-launcher {
  --dcb-flow-launcher-widgets-separator-bg-color:rgba(215,100,5,0.5);
}

Change the neutral color of the border

Changes the neutral color of the border. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--ui-color-border-neutral

Value Type

Color values, such as crimson, #DC143C or rgba(220,20,60,0.5)

Example

dcbo-flow-launcher {
  --ui-color-border-neutral:rgba(215,100,5,0.5);
}

Alert Color Tokens

Change the background color of the alert badge

Change the background color of the alert badge

Changes the background color of the alert badge. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--ui-color-badge-background-alert

Value Type

Color values, such as chartreuse, #7FFF00 or rgba(127,255,0,0.5)

Example

dcbo-flow-launcher {
  --ui-color-badge-background-alert:rgba(215,100,5,0.5);
}

Error Color Tokens

Change the color of the label on the error button Change the color of the error text Change the background color of the error badge Change the color of the default error text Change the color of the error icon

Change the color of the error loading timer bar Change the border color of error messages Change the background color of error dialogs Change the background color of error charts

Change the color of the label on the error button

Changes the color of the label on the error button. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--ui-color-button-label-error

Value Type

Color values, such as chocolate, #D2691E or rgba(210,105,30,0.5)

Example

dcbo-flow-launcher {
  --ui-color-button-label-error:rgba(215,100,5,0.5);
}

Change the color of the error text

Changes the color of the error text. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--ui-color-typography-error

Value Type

Color values, such as deeppink, #FF1493 or rgba(255,20,147,0.5)

Example

dcbo-flow-launcher {
  --ui-color-typography-error:rgba(215,100,5,0.5);
}

Change the background color of the error badge

Changes the background color of the error badge. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--ui-color-badge-background-error

Value Type

Color values, such as floralwhite, #FFFAF0 or rgba(255,250,240,0.5)

Example

dcbo-flow-launcher {
  --ui-color-badge-background-error:rgba(215,100,5,0.5);
}

Change the color of the default error text

Changes the color of the default error text. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--ui-color-semantic-error-default

Value Type

Color values, such as gold, #FFD700 or rgba(255,215,0,0.5)

Example

dcbo-flow-launcher {
  --ui-color-semantic-error-default:rgba(215,100,5,0.5);
}

Change the color of the error icon

Changes the color of the error icon. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--ui-color-icon-error

Value Type

Color values, such as lemonchiffon, #FFFACD or rgba(255,250,205,0.5)

Example

dcbo-flow-launcher {
  --ui-color-icon-error:rgba(215,100,5,0.5);
}

Change the color of the error loading timer bar

Changes the color of the error loading timer bar. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--ui-color-loading-error

Value Type

Color values, such as linen, #FAF0E6 or rgba(250,240,230,0.5)

Example

dcbo-flow-launcher {
  --ui-color-loading-error:rgba(215,100,5,0.5);
}

Change the border color of error messages

Changes the border color of error messages. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--ui-color-border-error

Value Type

Color values, such as mediumspringgreen, #00FA9A or rgba(0,250,154,0.5)

Example

dcbo-flow-launcher {
  --ui-color-border-error:rgba(215,100,5,0.5);
}

Change the background color of error dialogs

Changes the background color of error dialogs. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--ui-color-dialog-background-error

Value Type

Color values, such as oldlace, #FDF5E6 or rgba(253,245,230,0.5)

Example

dcbo-flow-launcher {
  --ui-color-dialog-background-error:rgba(215,100,5,0.5);
}

Change the background color of error charts

Changes the background color of error charts. The value can include an rgba value in order to control the alpha channel of the color to define its transparency.

Token

--ui-color-charts-background-error

Value Type

Color values, such as orange, #FFA500 or rgba(255,165,0,0.5)

Example

dcbo-flow-launcher {
  --ui-color-charts-background-error:rgba(215,100,5,0.5);
}

Example CSS Section

Here you can find an example of all the previously described tokens inserted into the CSS portion of the hosting page. This example is provided only to show how all the tokens can be combined within the CSS portion of your page to affect changes in many aspects of the Launcher and its content:

dcbo-flow-launcher {
  --dcb-flow-launcher-border-radius:3px;
  --dcb-flow-launcher-shadow:0px 0px 1px 1px;
  --dcb-flow-launcher-shadow-color:#878985;
  --dcb-flow-ui-font-family:'Trebuchet MS', sans-serif;
  --dcb-flow-ui-color-icon-negative: rgba(222,206,156);
  --dcb-flow-ui-color-icon-neutral: #878985;
  --dcb-flow-ui-color-light-hover: rgba(222,206,156,0.24);
  --dcb-flow-ui-color-dark-hover: rgba(169,172,167,0.24);
  --dcb-flow-ui-border-radius:3px;
  --dcb-flow-ui-border-radius-circular:3px;
  --dcb-flow-ui-button-bg-color-primary:rgba(0,0,0,0.24);
  --dcb-flow-custom-button-top-bar-height:20px;
  --dcb-flow-custom-button-top-bar-bg-color:rgba(169,172,167,0.24);
}