Welcome to the WalkMe Help Center

Please login in order to continue:

Work flows better with WalkMe
Work flows better with WalkMe.

CSS in Theming

Last Updated November 28, 2024

Brief Overview

This article explains the design mapping of the Theming app, and provides the variables coming from the theme in case you want to change the colors and typography using CSS.

Mapping

Tip

Scroll from left to right to see the whole table.

CSS Var Theming application - Colors Theming application - Typography Theming application - Buttons Example for a value
--colors_primary_main colors primary main #ed5725
--colors_primary_tint colors primary tint #f17951
--colors_primary_shade colors primary shade #cb3f11
--colors_secondary_main colors secondary main #fe997b
--colors_secondary_tint colors secondary tint #fead95
--colors_secondary_shade colors secondary shade #fd602f
--colors_background_main colors background main #fdede7
--colors_background_tint colors background tint #fdf1ec
--colors_background_shade colors background shade #f6aa8e
--colors_text_main colors text main #212529
--colors_text_tint colors text tint #49525a
--colors_text_shade colors text shade #1b1f22
--colors_link_main colors link main #2a1d8e
--colors_link_tint colors link tint #3b29c7
--colors_link_shade colors link shade #221772
--colors_success_main colors success main #115f6a
--colors_success_tint colors success tint #1b9bab
--colors_success_shade colors success shade #0d4b54
--colors_warning_main colors warning main #f4a939
--colors_warning_tint colors warning tint #f6ba60
--colors_warning_shade colors warning shade #e38d0d
--colors_error_main colors error main #c62437
--colors_error_tint colors error tint #dd4557
--colors_error_shade colors error shade #a01d2c
--colors_info_main colors info main #595959
--colors_info_tint colors info tint #7a7a7a
--colors_info_shade colors info shade #474747
--colors_base_black colors base black #000000
--colors_base_white colors base white #ffffff
--colors_base_transparent colors base transparent transparent
--fonts_primary_font fonts primary font walkme-poppins
--fonts_secondary_font fonts secondary font
walkme-proxima-nova
--typography_title_large_font_family typography title large font family
var(--fonts_primary_font)
--typography_title_large_font_size typography title large font size 24px
--typography_title_large_font_weight typography title large font weight bold
--typography_title_large_font_style typography title large font style normal
--typography_title_large_text_decoration typography title large text decoration none
--typography_title_font_family typography title font family
var(--fonts_primary_font)
--typography_title_font_size typography title font size 20px
--typography_title_font_weight typography title font weight bold
--typography_title_font_style typography title font style normal
--typography_title_text_decoration typography title text decoration none
--typography_subtitle_font_family typography subtitle font family
var(--fonts_primary_font)
--typography_subtitle_font_size typography subtitle font size 16px
--typography_subtitle_font_weight typography subtitle font weight bold
--typography_subtitle_font_style typography subtitle font style normal
--typography_subtitle_text_decoration typography subtitle text decoration none
--typography_body_font_family typography body font family
var(--fonts_primary_font)
--typography_body_font_size typography body font size 14px
--typography_body_font_weight typography body font weight normal
--typography_body_font_style typography body font style normal
--typography_body_text_decoration typography body text decoration none
--typography_button_text_font_family typography button text font family
var(--fonts_primary_font)
--typography_button_text_font_size typography button text font size 16px
--typography_button_text_font_weight typography button text font weight bold
--typography_button_text_font_style typography button text font style normal
--typography_button_text_text_decoration typography button text text decoration none
--typography_button_text_small_font_family typography button text small font family
var(--fonts_primary_font)
--typography_button_text_small_font_size typography button text small font size 16px
--typography_button_text_small_font_weight typography button text small font weight bold
--typography_button_text_small_font_style typography button text small font style normal
--typography_button_text_small_text_decoration
typography button text small text decoration
none
--buttons_primary_default_text_color buttons primary default text color
var(--colors_base_white)
--buttons_primary_default_fill_color buttons primary default fill color
var(--colors_primary_main)
--buttons_primary_default_border_width buttons primary default border width 0
--buttons_primary_default_border_color buttons primary default border color
var(--colors_base_transparent)
--buttons_primary_default_border_radius buttons primary default corner radius 100px
--buttons_primary_hover_text_color buttons primary hover text color
var(--colors_base_white)
--buttons_primary_hover_fill_color buttons primary hover fill color
var(--colors_primary_shade)
--buttons_primary_hover_border_width buttons primary hover border width 0
--buttons_primary_hover_border_color buttons primary hover border color
var(--colors_base_transparent)
--buttons_primary_hover_border_radius buttons primary hover corner radius 100px
--buttons_primary_clicked_text_color buttons primary clicked text color
var(--colors_base_white)
--buttons_primary_clicked_fill_color buttons primary clicked fill color
var(--colors_primary_shade)
--buttons_primary_clicked_border_width buttons primary clicked border width 0
--buttons_primary_clicked_border_color buttons primary clicked border color
var(--colors_base_transparent)
--buttons_primary_clicked_border_radius buttons primary clicked corner radius 100px
--buttons_secondary_default_text_color buttons secondary default text color
var(--colors_primary_main)
--buttons_secondary_default_fill_color buttons secondary default fill color
var(--colors_base_transparent)
--buttons_secondary_default_border_width buttons secondary default border width 1px
--buttons_secondary_default_border_color buttons secondary default border color
var(--colors_primary_main)
--buttons_secondary_default_border_radius buttons secondary default corner radius 100px
--buttons_secondary_hover_text_color buttons secondary hover text color
var(--colors_primary_shade)
--buttons_secondary_hover_fill_color buttons secondary hover fill color
var(--colors_base_transparent)
--buttons_secondary_hover_border_width buttons secondary hover border width 1px
--buttons_secondary_hover_border_color buttons secondary hover border color
var(--colors_primary_shade)
--buttons_secondary_hover_border_radius buttons secondary hover corner radius 100px
--buttons_secondary_clicked_text_color buttons secondary clicked text color
var(--colors_primary_shade)
--buttons_secondary_clicked_fill_color buttons secondary clicked fill color
var(--colors_base_transparent)
--buttons_secondary_clicked_border_width buttons secondary clicked border width 1px
--buttons_secondary_clicked_border_color buttons secondary clicked border color
var(--colors_primary_shade)
--buttons_secondary_clicked_border_radius buttons secondary clicked corner radius 100px
--buttons_text_link_default_text_color buttons text link default text color
var(--colors_primary_main)
--buttons_text_link_default_fill_color buttons text link default fill color
var(--colors_base_transparent)
--buttons_text_link_default_border_width buttons text link default border width 0
--buttons_text_link_default_border_color buttons text link default border color
var(--colors_base_transparent)
--buttons_text_link_default_border_radius buttons text link default corner radius 0
--buttons_text_link_hover_text_color buttons text link hover text color
var(--colors_primary_shade)
--buttons_text_link_hover_fill_color buttons text link hover fill color
var(--colors_base_transparent)
--buttons_text_link_hover_border_width buttons text link hover border width 0
--buttons_text_link_hover_border_color buttons text link hover border color
var(--colors_base_transparent)
--buttons_text_link_hover_border_radius buttons text link hover corner radius 0
--buttons_text_link_clicked_text_color buttons text link clicked text color
var(--colors_primary_shade)
--buttons_text_link_clicked_fill_color buttons text link clicked fill color
var(--colors_base_transparent)
--buttons_text_link_clicked_border_width buttons text link clicked border width 0
--buttons_text_link_clicked_border_color buttons text link clicked border color
var(--colors_base_transparent)
--buttons_text_link_clicked_border_radius buttons text link clicked corner radius 0
--buttons_success_default_text_color buttons success default text color
var(--colors_base_white)
--buttons_success_default_fill_color buttons success default fill color
var(--colors_success_main)
--buttons_success_default_border_width buttons success default border width 0
--buttons_success_default_border_color buttons success default border color
var(--colors_base_transparent)
--buttons_success_default_border_radius buttons success default corner radius 100px
--buttons_success_hover_text_color buttons success hover text color
var(--colors_base_white)
--buttons_success_hover_fill_color buttons success hover fill color
var(--colors_success_shade)
--buttons_success_hover_border_width buttons success hover border width 0
--buttons_success_hover_border_color buttons success hover border color
var(--colors_base_transparent)
--buttons_success_hover_border_radius buttons success hover corner radius 100px
--buttons_success_clicked_text_color buttons success clicked text color
var(--colors_base_white)
--buttons_success_clicked_fill_color buttons success clicked fill color
var(--colors_success_shade)
--buttons_success_clicked_border_width buttons success clicked border width 0
--buttons_success_clicked_border_color buttons success clicked border color
var(--colors_base_transparent)
--buttons_success_clicked_border_radius buttons success clicked corner radius 100px
--buttons_warning_default_text_color buttons warning default text color
var(--colors_base_white)
--buttons_warning_default_fill_color buttons warning default fill color
var(--colors_warning_main)
--buttons_warning_default_border_width buttons warning default border width 0
--buttons_warning_default_border_color buttons warning default border color
var(--colors_base_transparent)
--buttons_warning_default_border_radius buttons warning default corner radius 100px
--buttons_warning_hover_text_color buttons warning hover text color
var(--colors_base_white)
--buttons_warning_hover_fill_color buttons warning hover fill color
var(--colors_warning_shade)
--buttons_warning_hover_border_width buttons warning hover border width 0
--buttons_warning_hover_border_color buttons warning hover border color
var(--colors_base_transparent)
--buttons_warning_hover_border_radius buttons warning hover corner radius 100px
--buttons_warning_clicked_text_color buttons warning clicked text color
var(--colors_base_white)
--buttons_warning_clicked_fill_color buttons warning clicked fill color
var(--colors_warning_shade)
--buttons_warning_clicked_border_width buttons warning clicked border width 0
--buttons_warning_clicked_border_color buttons warning clicked border color
var(--colors_base_transparent)
--buttons_warning_clicked_border_radius buttons warning clicked corner radius 100px
--buttons_error_default_text_color buttons error default text color
var(--colors_base_white)
--buttons_error_default_fill_color buttons error default fill color
var(--colors_error_main)
--buttons_error_default_border_width buttons error default border width 0
--buttons_error_default_border_color buttons error default border color
var(--colors_base_transparent)
--buttons_error_default_border_radius buttons error default corner radius 100px
--buttons_error_hover_text_color buttons error hover text color
var(--colors_base_white)
--buttons_error_hover_fill_color buttons error hover fill color
var(--colors_error_shade)
--buttons_error_hover_border_width buttons error hover border width 0
--buttons_error_hover_border_color buttons error hover border color
var(--colors_base_transparent)
--buttons_error_hover_border_radius buttons error hover corner radius 100px
--buttons_error_clicked_text_color buttons error clicked text color
var(--colors_base_white)
--buttons_error_clicked_fill_color buttons error clicked fill color
var(--colors_error_shade)
--buttons_error_clicked_border_width buttons error clicked border width 0
--buttons_error_clicked_border_color buttons error clicked border color
var(--colors_base_transparent)
--buttons_error_clicked_border_radius buttons error clicked corner radius 100px
--buttons_primary_default_text_typography_font_family
buttons primary default text typography font family
var(--typography_button_text_font_family)
--buttons_primary_default_text_typography_font_size
buttons primary default text typography font size
var(--typography_button_text_font_size)
--buttons_primary_default_text_typography_font_weight
buttons primary default text typography font weight
var(--typography_button_text_font_weight)
--buttons_primary_default_text_typography_font_style
buttons primary default text typography font style
var(--typography_button_text_font_style)
--buttons_primary_default_text_typography_text_decoration
buttons primary default text typography text decoration
var(--typography_button_text_text_decoration)
--buttons_primary_hover_text_typography_font_family
buttons primary hover text typography font family
var(--typography_button_text_font_family)
--buttons_primary_hover_text_typography_font_size
buttons primary hover text typography font size
var(--typography_button_text_font_size)
--buttons_primary_hover_text_typography_font_weight
buttons primary hover text typography font weight
var(--typography_button_text_font_weight)
--buttons_primary_hover_text_typography_font_style
buttons primary hover text typography font style
var(--typography_button_text_font_style)
--buttons_primary_hover_text_typography_text_decoration
buttons primary hover text typography text decoration
var(--typography_button_text_text_decoration)
--buttons_primary_clicked_text_typography_font_family
buttons primary clicked text typography font family
var(--typography_button_text_font_family)
--buttons_primary_clicked_text_typography_font_size
buttons primary clicked text typography font size
var(--typography_button_text_font_size)
--buttons_primary_clicked_text_typography_font_weight
buttons primary clicked text typography font weight
var(--typography_button_text_font_weight)
--buttons_primary_clicked_text_typography_font_style
buttons primary clicked text typography font style
var(--typography_button_text_font_style)
--buttons_primary_clicked_text_typography_text_decoration
buttons primary clicked text typography text decoration
var(--typography_button_text_text_decoration)
--buttons_secondary_default_text_typography_font_family
buttons secondary default text typography font family
var(--typography_button_text_font_family)
--buttons_secondary_default_text_typography_font_size
buttons secondary default text typography font size
var(--typography_button_text_font_size)
--buttons_secondary_default_text_typography_font_weight
buttons secondary default text typography font weight
var(--typography_button_text_font_weight)
--buttons_secondary_default_text_typography_font_style
buttons secondary default text typography font style
var(--typography_button_text_font_style)
--buttons_secondary_default_text_typography_text_decoration
buttons secondary default text typography text decoration
var(--typography_button_text_text_decoration)
--buttons_secondary_hover_text_typography_font_family
buttons secondary hover text typography font family
var(--typography_button_text_font_family)
--buttons_secondary_hover_text_typography_font_size
buttons secondary hover text typography font size
var(--typography_button_text_font_size)
--buttons_secondary_hover_text_typography_font_weight
buttons secondary hover text typography font weight
var(--typography_button_text_font_weight)
--buttons_secondary_hover_text_typography_font_style
buttons secondary hover text typography font style
var(--typography_button_text_font_style)
--buttons_secondary_hover_text_typography_text_decoration
buttons secondary hover text typography text decoration
var(--typography_button_text_text_decoration)
--buttons_secondary_clicked_text_typography_font_family
buttons secondary clicked text typography font family
var(--typography_button_text_font_family)
--buttons_secondary_clicked_text_typography_font_size
buttons secondary clicked text typography font size
var(--typography_button_text_font_size)
--buttons_secondary_clicked_text_typography_font_weight
buttons secondary clicked text typography font weight
var(--typography_button_text_font_weight)
--buttons_secondary_clicked_text_typography_font_style
buttons secondary clicked text typography font style
var(--typography_button_text_font_style)
--buttons_secondary_clicked_text_typography_text_decoration
buttons secondary clicked text typography text decoration
var(--typography_button_text_text_decoration)
--buttons_text_link_default_text_typography_font_family
buttons text link default text typography font family
var(--typography_button_text_font_family)
--buttons_text_link_default_text_typography_font_size
buttons text link default text typography font size
var(--typography_button_text_font_size)
--buttons_text_link_default_text_typography_font_weight
buttons text link default text typography font weight
var(--typography_button_text_font_weight)
--buttons_text_link_default_text_typography_font_style
buttons text link default text typography font style
var(--typography_button_text_font_style)
--buttons_text_link_default_text_typography_text_decoration
buttons text link default text typography text decoration
var(--typography_button_text_text_decoration)
--buttons_text_link_hover_text_typography_font_family
buttons text link hover text typography font family
var(--typography_button_text_font_family)
--buttons_text_link_hover_text_typography_font_size
buttons text link hover text typography font size
var(--typography_button_text_font_size)
--buttons_text_link_hover_text_typography_font_weight
buttons text link hover text typography font weight
var(--typography_button_text_font_weight)
--buttons_text_link_hover_text_typography_font_style
buttons text link hover text typography font style
var(--typography_button_text_font_style)
--buttons_text_link_hover_text_typography_text_decoration
buttons text link hover text typography text decoration
var(--typography_button_text_text_decoration)
--buttons_text_link_clicked_text_typography_font_family
buttons text link clicked text typography font family
var(--typography_button_text_font_family)
--buttons_text_link_clicked_text_typography_font_size
buttons text link clicked text typography font size
var(--typography_button_text_font_size)
--buttons_text_link_clicked_text_typography_font_weight
buttons text link clicked text typography font weight
var(--typography_button_text_font_weight)
--buttons_text_link_clicked_text_typography_font_style
buttons text link clicked text typography font style
var(--typography_button_text_font_style)
--buttons_text_link_clicked_text_typography_text_decoration
buttons text link clicked text typography text decoration
var(--typography_button_text_text_decoration)
--buttons_success_default_text_typography_font_family
buttons success default text typography font family
var(--typography_button_text_font_family)
--buttons_success_default_text_typography_font_size
buttons success default text typography font size
var(--typography_button_text_font_size)
--buttons_success_default_text_typography_font_weight
buttons success default text typography font weight
var(--typography_button_text_font_weight)
--buttons_success_default_text_typography_font_style
buttons success default text typography font style
var(--typography_button_text_font_style)
--buttons_success_default_text_typography_text_decoration
buttons success default text typography text decoration
var(--typography_button_text_text_decoration)
--buttons_success_hover_text_typography_font_family
buttons success hover text typography font family
var(--typography_button_text_font_family)
--buttons_success_hover_text_typography_font_size
buttons success hover text typography font size
var(--typography_button_text_font_size)
--buttons_success_hover_text_typography_font_weight
buttons success hover text typography font weight
var(--typography_button_text_font_weight)
--buttons_success_hover_text_typography_font_style
buttons success hover text typography font style
var(--typography_button_text_font_style)
--buttons_success_hover_text_typography_text_decoration
buttons success hover text typography text decoration
var(--typography_button_text_text_decoration)
--buttons_success_clicked_text_typography_font_family
buttons success clicked text typography font family
var(--typography_button_text_font_family)
--buttons_success_clicked_text_typography_font_size
buttons success clicked text typography font size
var(--typography_button_text_font_size)
--buttons_success_clicked_text_typography_font_weight
buttons success clicked text typography font weight
var(--typography_button_text_font_weight)
--buttons_success_clicked_text_typography_font_style
buttons success clicked text typography font style
var(--typography_button_text_font_style)
--buttons_success_clicked_text_typography_text_decoration
buttons success clicked text typography text decoration
var(--typography_button_text_text_decoration)
--buttons_warning_default_text_typography_font_family
buttons warning default text typography font family
var(--typography_button_text_font_family)
--buttons_warning_default_text_typography_font_size
buttons warning default text typography font size
var(--typography_button_text_font_size)
--buttons_warning_default_text_typography_font_weight
buttons warning default text typography font weight
var(--typography_button_text_font_weight)
--buttons_warning_default_text_typography_font_style
buttons warning default text typography font style
var(--typography_button_text_font_style)
--buttons_warning_default_text_typography_text_decoration
buttons warning default text typography text decoration
var(--typography_button_text_text_decoration)
--buttons_warning_hover_text_typography_font_family
buttons warning hover text typography font family
var(--typography_button_text_font_family)
--buttons_warning_hover_text_typography_font_size
buttons warning hover text typography font size
var(--typography_button_text_font_size)
--buttons_warning_hover_text_typography_font_weight
buttons warning hover text typography font weight
var(--typography_button_text_font_weight)
--buttons_warning_hover_text_typography_font_style
buttons warning hover text typography font style
var(--typography_button_text_font_style)
--buttons_warning_hover_text_typography_text_decoration
buttons warning hover text typography text decoration
var(--typography_button_text_text_decoration)
--buttons_warning_clicked_text_typography_font_family
buttons warning clicked text typography font family
var(--typography_button_text_font_family)
--buttons_warning_clicked_text_typography_font_size
buttons warning clicked text typography font size
var(--typography_button_text_font_size)
--buttons_warning_clicked_text_typography_font_weight
buttons warning clicked text typography font weight
var(--typography_button_text_font_weight)
--buttons_warning_clicked_text_typography_font_style
buttons warning clicked text typography font style
var(--typography_button_text_font_style)
--buttons_warning_clicked_text_typography_text_decoration
buttons warning clicked text typography text decoration
var(--typography_button_text_text_decoration)
--buttons_error_default_text_typography_font_family
buttons error default text typography font family
var(--typography_button_text_font_family)
--buttons_error_default_text_typography_font_size
buttons error default text typography font size
var(--typography_button_text_font_size)
--buttons_error_default_text_typography_font_weight
buttons error default text typography font weight
var(--typography_button_text_font_weight)
--buttons_error_default_text_typography_font_style
buttons error default text typography font style
var(--typography_button_text_font_style)
--buttons_error_default_text_typography_text_decoration
buttons error default text typography text decoration
var(--typography_button_text_text_decoration)
--buttons_error_hover_text_typography_font_family
buttons error hover text typography font family
var(--typography_button_text_font_family)
--buttons_error_hover_text_typography_font_size
buttons error hover text typography font size
var(--typography_button_text_font_size)
--buttons_error_hover_text_typography_font_weight
buttons error hover text typography font weight
var(--typography_button_text_font_weight)
--buttons_error_hover_text_typography_font_style
buttons error hover text typography font style
var(--typography_button_text_font_style)
--buttons_error_hover_text_typography_text_decoration
buttons error hover text typography text decoration
var(--typography_button_text_text_decoration)
--buttons_error_clicked_text_typography_font_family
buttons error clicked text typography font family
var(--typography_button_text_font_family)
--buttons_error_clicked_text_typography_font_size
buttons error clicked text typography font size
var(--typography_button_text_font_size)
--buttons_error_clicked_text_typography_font_weight
buttons error clicked text typography font weight
var(--typography_button_text_font_weight)
--buttons_error_clicked_text_typography_font_style
buttons error clicked text typography font style
var(--typography_button_text_font_style)
--buttons_error_clicked_text_typography_text_decoration
buttons error clicked text typography text decoration
var(--typography_button_text_text_decoration)

Was this article helpful?

Thanks for your feedback!

Be part of something bigger.

Engage with peers, ask questions, share ideas

Ask the Community
×