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
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, like5px 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, like5px 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, likergba(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
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, like5px 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, likergba(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, likergba(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, likergba(255,0,0,0.3)
- Default Value
-
#666666
orrgb(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, likergba(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
orrgba(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
orrgba(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
orrgba(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
orrgba(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
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, likergba(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, likergba(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, likergba(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
orrgba(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
orrgba(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
orrgba(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
orrgba(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
orrgba(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
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
orrgba(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
orrgba(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
orrgba(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
orrgba(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
orrgba(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
orrgba(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
orrgba(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
orrgba(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
orrgba(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
orrgba(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
orrgba(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
orrgba(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
orrgba(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
orrgba(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
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
orrgba(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
orrgba(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
orrgba(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
orrgba(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
orrgba(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
orrgba(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
orrgba(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
orrgba(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
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
orrgba(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
orrgba(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
orrgba(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
orrgba(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
orrgba(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
orrgba(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
orrgba(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
orrgba(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
orrgba(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);
}