Brief Overview
This article explains how to customize colors and typography in your WalkMe content using CSS variables from Theming. You can apply these variables directly in your custom CSS to match your organization's brand.
Theming: Getting Started Guide
Colors
Primary & secondary
CSS Variable
Description
Example Value
--colors_primary_main
Primary main color
#ed5725
--colors_primary_tint
Primary tint color
#f17951
--colors_primary_shade
Primary shade color
#cb3f11
--colors_secondary_main
Secondary main color
#fe997b
--colors_secondary_tint
Secondary tint color
#fead95
--colors_secondary_shade
Secondary shade color
#fd602f
Background and base
CSS Variable
Description
Example Value
--colors_background_main
Background main color
#fdede7
--colors_background_tint
Background tint color
#fdf1ec
--colors_background_shade
Background shade color
#f6aa8e
--colors_base_black
Base black
#000000
--colors_base_white
Base white
#ffffff
--colors_base_transparent
Base transparent
transparent
Text and link
CSS Variable
Description
Example Value
--colors_text_main
Text main color
#212529
--colors_text_tint
Text tint color
#49525a
--colors_text_shade
Text shade color
#1b1f22
--colors_link_main
Link main color
#2a1d8e
--colors_link_tint
Link tint color
#3b29c7
--colors_link_shade
Link shade color
#221772
Status
CSS Variable
Description
Example Value
--colors_success_main
Success main color
#115f6a
--colors_success_tint
Success tint color
#1b9bab
--colors_success_shade
Success shade color
#0d4b54
--colors_warning_main
Warning main color
#f4a939
--colors_warning_tint
Warning tint color
#f6ba60
--colors_warning_shade
Warning shade color
#e38d0d
--colors_error_main
Error main color
#c62437
--colors_error_tint
Error tint color
#dd4557
--colors_error_shade
Error shade color
#a01d2c
--colors_info_main
Info main color
#595959
--colors_info_tint
Info tint color
#7a7a7a
--colors_info_shade
Info shade color
#474747
Typography
Fonts and body
CSS Variable
Description
Example Value
--fonts_primary_font
Primary font family
walkme-poppins
--fonts_secondary_font
Secondary font family
walkme-proxima-nova
--typography_body_font_family
Body font family
var(--fonts_primary_font)
--typography_body_font_size
Body font size
14px
--typography_body_font_weight
Body font weight
normal
--typography_body_font_style
Body font style
normal
--typography_body_text_decoration
Body text decoration
none
Titles and subtitles
CSS Variable
Description
Example Value
--typography_title_large_font_family
Large title font family
var(--fonts_primary_font)
--typography_title_large_font_size
Large title font size
24px
--typography_title_large_font_weight
Large title font weight
bold
--typography_title_large_font_style
Large title font style
normal
--typography_title_large_text_decoration
Large title text decoration
none
--typography_title_font_family
Title font family
var(--fonts_primary_font)
--typography_title_font_size
Title font size
20px
--typography_title_font_weight
Title font weight
bold
--typography_title_font_style
Title font style
normal
--typography_title_text_decoration
Title text decoration
none
--typography_subtitle_font_family
Subtitle font family
var(--fonts_primary_font)
--typography_subtitle_font_size
Subtitle font size
16px
--typography_subtitle_font_weight
Subtitle font weight
bold
--typography_subtitle_font_style
Subtitle font style
normal
--typography_subtitle_text_decoration
Subtitle text decoration
none
Button text
CSS Variable
Description
Example Value
--typography_button_text_font_family
Button text font family
var(--fonts_primary_font)
--typography_button_text_font_size
Button text font size
16px
--typography_button_text_font_weight
Button text font weight
bold
--typography_button_text_font_style
Button text font style
normal
--typography_button_text_text_decoration
Button text decoration
none
--typography_button_text_small_font_family
Small button text font family
var(--fonts_primary_font)
--typography_button_text_small_font_size
Small button text font size
16px
--typography_button_text_small_font_weight
Small button text font weight
bold
--typography_button_text_small_font_style
Small button text font style
normal
--typography_button_text_small_text_decoration
Small button text decoration
none
Primary
CSS Variable
Description
Example Value
--buttons_primary_default_text_color
Default text color
var(--colors_base_white)
--buttons_primary_default_fill_color
Default fill color
var(--colors_primary_main)
--buttons_primary_default_border_width
Default border width
0
--buttons_primary_default_border_color
Default border color
var(--colors_base_transparent)
--buttons_primary_default_border_radius
Default corner radius
100px
--buttons_primary_hover_text_color
Hover text color
var(--colors_base_white)
--buttons_primary_hover_fill_color
Hover fill color
var(--colors_primary_shade)
--buttons_primary_hover_border_width
Hover border width
0
--buttons_primary_hover_border_color
Hover border color
var(--colors_base_transparent)
--buttons_primary_hover_border_radius
Hover corner radius
100px
--buttons_primary_clicked_text_color
Clicked text color
var(--colors_base_white)
--buttons_primary_clicked_fill_color
Clicked fill color
var(--colors_primary_shade)
--buttons_primary_clicked_border_width
Clicked border width
0
--buttons_primary_clicked_border_color
Clicked border color
var(--colors_base_transparent)
--buttons_primary_clicked_border_radius
Clicked corner radius
100px
Secondary
CSS Variable
Description
Example Value
--buttons_secondary_default_text_color
Default text color
var(--colors_primary_main)
--buttons_secondary_default_fill_color
Default fill color
var(--colors_base_transparent)
--buttons_secondary_default_border_width
Default border width
1px
--buttons_secondary_default_border_color
Default border color
var(--colors_primary_main)
--buttons_secondary_default_border_radius
Default corner radius
100px
--buttons_secondary_hover_text_color
Hover text color
var(--colors_primary_shade)
--buttons_secondary_hover_fill_color
Hover fill color
var(--colors_base_transparent)
--buttons_secondary_hover_border_width
Hover border width
1px
--buttons_secondary_hover_border_color
Hover border color
var(--colors_primary_shade)
--buttons_secondary_hover_border_radius
Hover corner radius
100px
--buttons_secondary_clicked_text_color
Clicked text color
var(--colors_primary_shade)
--buttons_secondary_clicked_fill_color
Clicked fill color
var(--colors_base_transparent)
--buttons_secondary_clicked_border_width
Clicked border width
1px
--buttons_secondary_clicked_border_color
Clicked border color
var(--colors_primary_shade)
--buttons_secondary_clicked_border_radius
Clicked corner radius
100px
Text link
CSS Variable
Description
Example Value
--buttons_text_link_default_text_color
Default text color
var(--colors_primary_main)
--buttons_text_link_default_fill_color
Default fill color
var(--colors_base_transparent)
--buttons_text_link_default_border_width
Default border width
0
--buttons_text_link_default_border_color
Default border color
var(--colors_base_transparent)
--buttons_text_link_default_border_radius
Default corner radius
0
--buttons_text_link_hover_text_color
Hover text color
var(--colors_primary_shade)
--buttons_text_link_hover_fill_color
Hover fill color
var(--colors_base_transparent)
--buttons_text_link_hover_border_width
Hover border width
0
--buttons_text_link_hover_border_color
Hover border color
var(--colors_base_transparent)
--buttons_text_link_hover_border_radius
Hover corner radius
0
--buttons_text_link_clicked_text_color
Clicked text color
var(--colors_primary_shade)
--buttons_text_link_clicked_fill_color
Clicked fill color
var(--colors_base_transparent)
--buttons_text_link_clicked_border_width
Clicked border width
0
--buttons_text_link_clicked_border_color
Clicked border color
var(--colors_base_transparent)
--buttons_text_link_clicked_border_radius
Clicked corner radius
0
Success
CSS Variable
Description
Example Value
--buttons_success_default_text_color
Default text color
var(--colors_base_white)
--buttons_success_default_fill_color
Default fill color
var(--colors_success_main)
--buttons_success_default_border_width
Default border width
0
--buttons_success_default_border_color
Default border color
var(--colors_base_transparent)
--buttons_success_default_border_radius
Default corner radius
100px
--buttons_success_hover_text_color
Hover text color
var(--colors_base_white)
--buttons_success_hover_fill_color
Hover fill color
var(--colors_success_shade)
--buttons_success_hover_border_width
Hover border width
0
--buttons_success_hover_border_color
Hover border color
var(--colors_base_transparent)
--buttons_success_hover_border_radius
Hover corner radius
100px
--buttons_success_clicked_text_color
Clicked text color
var(--colors_base_white)
--buttons_success_clicked_fill_color
Clicked fill color
var(--colors_success_shade)
--buttons_success_clicked_border_width
Clicked border width
0
--buttons_success_clicked_border_color
Clicked border color
var(--colors_base_transparent)
--buttons_success_clicked_border_radius
Clicked corner radius
100px
Warning
CSS Variable
Description
Example Value
--buttons_warning_default_text_color
Default text color
var(--colors_base_white)
--buttons_warning_default_fill_color
Default fill color
var(--colors_warning_main)
--buttons_warning_default_border_width
Default border width
0
--buttons_warning_default_border_color
Default border color
var(--colors_base_transparent)
--buttons_warning_default_border_radius
Default corner radius
100px
--buttons_warning_hover_text_color
Hover text color
var(--colors_base_white)
--buttons_warning_hover_fill_color
Hover fill color
var(--colors_warning_shade)
--buttons_warning_hover_border_width
Hover border width
0
--buttons_warning_hover_border_color
Hover border color
var(--colors_base_transparent)
--buttons_warning_hover_border_radius
Hover corner radius
100px
--buttons_warning_clicked_text_color
Clicked text color
var(--colors_base_white)
--buttons_warning_clicked_fill_color
Clicked fill color
var(--colors_warning_shade)
--buttons_warning_clicked_border_width
Clicked border width
0
--buttons_warning_clicked_border_color
Clicked border color
var(--colors_base_transparent)
--buttons_warning_clicked_border_radius
Clicked corner radius
100px
Error
CSS Variable
Description
Example Value
--buttons_error_default_text_color
Default text color
var(--colors_base_white)
--buttons_error_default_fill_color
Default fill color
var(--colors_error_main)
--buttons_error_default_border_width
Default border width
0
--buttons_error_default_border_color
Default border color
var(--colors_base_transparent)
--buttons_error_default_border_radius
Default corner radius
100px
--buttons_error_hover_text_color
Hover text color
var(--colors_base_white)
--buttons_error_hover_fill_color
Hover fill color
var(--colors_error_shade)
--buttons_error_hover_border_width
Hover border width
0
--buttons_error_hover_border_color
Hover border color
var(--colors_base_transparent)
--buttons_error_hover_border_radius
Hover corner radius
100px
--buttons_error_clicked_text_color
Clicked text color
var(--colors_base_white)
--buttons_error_clicked_fill_color
Clicked fill color
var(--colors_error_shade)
--buttons_error_clicked_border_width
Clicked border width
0
--buttons_error_clicked_border_color
Clicked border color
var(--colors_base_transparent)
--buttons_error_clicked_border_radius
Clicked corner radius
100px
