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 |
