Please log in to continue
WalkMe stores your data in the region chosen during account setup.
We have data centers in the US and EU that follow local privacy and compliance laws. If you're not sure which region to select, check with your admin.
Cet article explique comment personnaliser les couleurs et la typographie dans votre contenu WalkMe à l'aide de variables CSS de la thématisation. Vous pouvez appliquer ces variables directement dans votre CSS personnalisé pour correspondre à la marque de votre organisation.
| Variable CSS | DESCRIPTION | Exemple de valeur |
|---|---|---|
| --colors_primary_main | Couleur principale principale Couleur Couleur Couleur | #ed5725 |
| --colors_primary_tint | Couleur de teinte primaire | #f17951 |
| --colors_primary_shade | Couleur de teinte primaire Couleur Couleur | #cb3f11 |
| --colors_secondary_main | Couleur principale secondaire | #fe997b |
| --colors_secondary_tint | Couleur de teinte secondaire | #fead95 |
| --colors_secondary_shade | Couleur de teinte secondaire | #fd602f |
| Variable CSS | DESCRIPTION | Exemple de valeur |
|---|---|---|
| --colors_background_main | Couleur principale d'arrière-plan | #fdede7 |
| --colors_background_tint | Couleur de la teinte d'arrière-plan | #fdf1ec |
| --colors_background_shade | Couleur de la teinte d'arrière-plan | #f6aa8e |
| --colors_base_black | Noir de base | #000000 |
| --colors_base_white | Base blanche | #ffffff |
| --colors_base_transparent | Base transparente | Transparent |
| Variable CSS | DESCRIPTION | Exemple de valeur |
|---|---|---|
| --colors_text_main | Couleur principale du texte | #212529 |
| --colors_text_tint | Couleur de la teinte du texte | #49525a |
| --colors_text_shade | Couleur de la nuance du texte | #1b1f22 |
| --colors_link_main | Couleur principale du lien | #2a1d8e |
| --colors_link_tint | Couleur de la teinte du lien | #3b29c7 |
| --colors_link_shade | Couleur de la teinte du lien | #221772 |
| Variable CSS | DESCRIPTION | Exemple de valeur |
|---|---|---|
| --colors_success_main | Couleur principale de réussite | #115f6a |
| --colors_success_tint | Couleur de la teinte de succès | #1b9bab |
| --colors_success_shade | Couleur de la teinte de succès | #0d4b54 |
| --colors_warning_main | Couleur principale d'avertissement | #f4a939 |
| --colors_warning_tint | Couleur de la teinte d'avertissement | #f6ba60 |
| --colors_warning_shade | Couleur de teinte d'avertissement | #e38d0d |
| --colors_error_main | Couleur principale d'erreur | #c62437 |
| --colors_error_tint | Couleur de teinte d'erreur | #dd4557 |
| --colors_error_shade | Couleur de teinte d'erreur | #a01d2c |
| --colors_info_main | Couleur principale des infos | #595959 |
| --colors_info_tint | Couleur de la teinte de l'information | #7a7a7a |
| --colors_info_shade | Couleur de teinte d'information | #474747 |
| Variable CSS | DESCRIPTION | Exemple de valeur |
|---|---|---|
| --fonts_primary_font | Famille de polices principale | walkme-poppins |
| --fonts_secondary_font | Famille de polices secondaires | walkme-proxima-nova |
| --typography_body_font_family | Famille de polices du corps | var(--fonts_primary_font) |
| --typography_body_font_size | Taille de la police du corps | 14px |
| --typography_body_font_weight | Poids de la police du corps | Normal |
| --typography_body_font_style | Style de police du corps | Normal |
| --typography_body_text_decoration | Décoration du texte du corps | Aucun |
| Variable CSS | DESCRIPTION | Exemple de valeur |
|---|---|---|
| --typography_title_large_font_family | Grande famille de polices de titre | var(--fonts_primary_font) |
| --typography_title_large_font_size | Grande taille de police de titre | 24px |
| --typography_title_large_font_weight | Grand poids de police de titre | Gras |
| --typography_title_large_font_style | Style de police de titre grand | Normal |
| --typography_title_large_text_decoration | Décoration de texte de titre de grande taille | Aucun |
| --typography_title_font_family | Famille de polices de titre | var(--fonts_primary_font) |
| --typography_title_font_size | Taille de la police du titre | 20px |
| --typography_title_font_weight | Poids de la police du titre | Gras |
| --typography_title_font_style | Style de police de titre | Normal |
| --typography_title_text_decoration | Décoration du texte de titre | Aucun |
| --typography_subtitle_font_family | Famille de polices de sous-titres | var(--fonts_primary_font) |
| --typography_subtitle_font_size | Taille de la police des sous-titres | 16px |
| --typography_subtitle_font_weight | Poids de la police des sous-titres | Gras |
| --typography_subtitle_font_style | Style de police des sous-titres | Normal |
| --typography_subtitle_text_decoration | Décoration du texte des sous-titres | Aucun |
| Variable CSS | DESCRIPTION | Exemple de valeur |
|---|---|---|
| --typography_button_text_font_family | Famille de polices de texte de bouton | var(--fonts_primary_font) |
| --typography_button_text_font_size | Taille de la police du texte du bouton | 16px |
| --typography_button_text_font_weight | Poids de la police du texte du bouton | Gras |
| --typography_button_text_font_style | Style de police du texte du bouton | Normal |
| --typography_button_text_text_decoration | Décoration du texte des boutons | Aucun |
| --typography_button_text_small_font_family | Famille de polices de texte pour petits boutons | var(--fonts_primary_font) |
| --typography_button_text_small_font_size | Taille de la police de texte pour petit bouton | 16px |
| --typography_button_text_small_font_weight | Poids de police de texte de petit bouton | Gras |
| --typography_button_text_small_font_style | Style de police de texte pour petit bouton | Normal |
| --typography_button_text_small_text_decoration | Décoration de texte de petit bouton | Aucun |
| Variable CSS | DESCRIPTION | Exemple de valeur |
|---|---|---|
| --buttons_primary_default_text_color | Couleur du texte par défaut | var(--colors_base_white) |
| --buttons_primary_default_fill_color | Couleur de remplissage par défaut | var(--colors_primary_main) |
| --buttons_primary_default_border_width | Largeur de bordure par défaut | 0 |
| --buttons_primary_default_border_color | Couleur de la bordure par défaut | var(--colors_base_transparent) |
| --buttons_primary_default_border_radius | Rayon d'angle par défaut | 100px |
| --buttons_primary_hover_text_color | Couleur du texte lors du survol | var(--colors_base_white) |
| --buttons_primary_hover_fill_color | Couleur de remplissage du survol | var(--colors_primary_shade) |
| --buttons_primary_hover_border_width | Largeur de la bordure de survol | 0 |
| --buttons_primary_hover_border_color | Couleur de la bordure du survol | var(--colors_base_transparent) |
| --buttons_primary_hover_border_radius | Rayon du coin de survol | 100px |
| --buttons_primary_clicked_text_color | Couleur du texte cliqué | var(--colors_base_white) |
| --buttons_primary_clicked_fill_color | Couleur de remplissage cliquée | var(--colors_primary_shade) |
| --buttons_primary_clicked_border_width | Largeur de la bordure cliquée | 0 |
| --buttons_primary_clicked_border_color | Couleur de la bordure cliquée | var(--colors_base_transparent) |
| --buttons_primary_clicked_border_radius | Rayon des coins cliqués | 100px |
| Variable CSS | DESCRIPTION | Exemple de valeur |
|---|---|---|
| --buttons_secondary_default_text_color | Couleur du texte par défaut | var(--colors_primary_main) |
| --buttons_secondary_default_fill_color | Couleur de remplissage par défaut | var(--colors_base_transparent) |
| --buttons_secondary_default_border_width | Largeur de bordure par défaut | 1px |
| --buttons_secondary_default_border_color | Couleur de la bordure par défaut | var(--colors_primary_main) |
| --buttons_secondary_default_border_radius | Rayon d'angle par défaut | 100px |
| --buttons_secondary_hover_text_color | Couleur du texte lors du survol | var(--colors_primary_shade) |
| --buttons_secondary_hover_fill_color | Couleur de remplissage du survol | var(--colors_base_transparent) |
| --buttons_secondary_hover_border_width | Largeur de la bordure de survol | 1px |
| --buttons_secondary_hover_border_color | Couleur de la bordure du survol | var(--colors_primary_shade) |
| --buttons_secondary_hover_border_radius | Rayon du coin de survol | 100px |
| --buttons_secondary_clicked_text_color | Couleur du texte cliqué | var(--colors_primary_shade) |
| --buttons_secondary_clicked_fill_color | Couleur de remplissage cliquée | var(--colors_base_transparent) |
| --buttons_secondary_clicked_border_width | Largeur de la bordure cliquée | 1px |
| --buttons_secondary_clicked_border_color | Couleur de la bordure cliquée | var(--colors_primary_shade) |
| --buttons_secondary_clicked_border_radius | Rayon des coins cliqués | 100px |
| Variable CSS | DESCRIPTION | Exemple de valeur |
|---|---|---|
| --buttons_text_link_default_text_color | Couleur du texte par défaut | var(--colors_primary_main) |
| --buttons_text_link_default_fill_color | Couleur de remplissage par défaut | var(--colors_base_transparent) |
| --buttons_text_link_default_border_width | Largeur de bordure par défaut | 0 |
| --buttons_text_link_default_border_color | Couleur de la bordure par défaut | var(--colors_base_transparent) |
| --buttons_text_link_default_border_radius | Rayon d'angle par défaut | 0 |
| --buttons_text_link_hover_text_color | Couleur du texte lors du survol | var(--colors_primary_shade) |
| --buttons_text_link_hover_fill_color | Couleur de remplissage du survol | var(--colors_base_transparent) |
| --buttons_text_link_hover_border_width | Largeur de la bordure de survol | 0 |
| --buttons_text_link_hover_border_color | Couleur de la bordure du survol | var(--colors_base_transparent) |
| --buttons_text_link_hover_border_radius | Rayon du coin de survol | 0 |
| --buttons_text_link_clicked_text_color | Couleur du texte cliqué | var(--colors_primary_shade) |
| --buttons_text_link_clicked_fill_color | Couleur de remplissage cliquée | var(--colors_base_transparent) |
| --buttons_text_link_clicked_border_width | Largeur de la bordure cliquée | 0 |
| --buttons_text_link_clicked_border_color | Couleur de la bordure cliquée | var(--colors_base_transparent) |
| --buttons_text_link_clicked_border_radius | Rayon des coins cliqués | 0 |
| Variable CSS | DESCRIPTION | Exemple de valeur |
|---|---|---|
| --buttons_success_default_text_color | Couleur du texte par défaut | var(--colors_base_white) |
| --buttons_success_default_fill_color | Couleur de remplissage par défaut | var(--colors_success_main) |
| --buttons_success_default_border_width | Largeur de bordure par défaut | 0 |
| --buttons_success_default_border_color | Couleur de la bordure par défaut | var(--colors_base_transparent) |
| --buttons_success_default_border_radius | Rayon d'angle par défaut | 100px |
| --buttons_success_hover_text_color | Couleur du texte lors du survol | var(--colors_base_white) |
| --buttons_success_hover_fill_color | Couleur de remplissage du survol | var(--colors_success_shade) |
| --buttons_success_hover_border_width | Largeur de la bordure de survol | 0 |
| --buttons_success_hover_border_color | Couleur de la bordure du survol | var(--colors_base_transparent) |
| --buttons_success_hover_border_radius | Rayon du coin de survol | 100px |
| --buttons_success_clicked_text_color | Couleur du texte cliqué | var(--colors_base_white) |
| --buttons_success_clicked_fill_color | Couleur de remplissage cliquée | var(--colors_success_shade) |
| --buttons_success_clicked_border_width | Largeur de la bordure cliquée | 0 |
| --buttons_success_clicked_border_color | Couleur de la bordure cliquée | var(--colors_base_transparent) |
| --buttons_success_clicked_border_radius | Rayon des coins cliqués | 100px |
| Variable CSS | DESCRIPTION | Exemple de valeur |
|---|---|---|
| --buttons_warning_default_text_color | Couleur du texte par défaut | var(--colors_base_white) |
| --buttons_warning_default_fill_color | Couleur de remplissage par défaut | var(--colors_warning_main) |
| --buttons_warning_default_border_width | Largeur de bordure par défaut | 0 |
| --buttons_warning_default_border_color | Couleur de la bordure par défaut | var(--colors_base_transparent) |
| --buttons_warning_default_border_radius | Rayon d'angle par défaut | 100px |
| --buttons_warning_hover_text_color | Couleur du texte lors du survol | var(--colors_base_white) |
| --buttons_warning_hover_fill_color | Couleur de remplissage du survol | var(--colors_warning_shade) |
| --buttons_warning_hover_border_width | Largeur de la bordure de survol | 0 |
| --buttons_warning_hover_border_color | Couleur de la bordure du survol | var(--colors_base_transparent) |
| --buttons_warning_hover_border_radius | Rayon du coin de survol | 100px |
| --buttons_warning_clicked_text_color | Couleur du texte cliqué | var(--colors_base_white) |
| --buttons_warning_clicked_fill_color | Couleur de remplissage cliquée | var(--colors_warning_shade) |
| --buttons_warning_clicked_border_width | Largeur de la bordure cliquée | 0 |
| --buttons_warning_clicked_border_color | Couleur de la bordure cliquée | var(--colors_base_transparent) |
| --buttons_warning_clicked_border_radius | Rayon des coins cliqués | 100px |
| Variable CSS | DESCRIPTION | Exemple de valeur |
|---|---|---|
| --buttons_error_default_text_color | Couleur du texte par défaut | var(--colors_base_white) |
| --buttons_error_default_fill_color | Couleur de remplissage par défaut | var(--colors_error_main) |
| --buttons_error_default_border_width | Largeur de bordure par défaut | 0 |
| --buttons_error_default_border_color | Couleur de la bordure par défaut | var(--colors_base_transparent) |
| --buttons_error_default_border_radius | Rayon d'angle par défaut | 100px |
| --buttons_error_hover_text_color | Couleur du texte lors du survol | var(--colors_base_white) |
| --buttons_error_hover_fill_color | Couleur de remplissage du survol | var(--colors_error_shade) |
| --buttons_error_hover_border_width | Largeur de la bordure de survol | 0 |
| --buttons_error_hover_border_color | Couleur de la bordure du survol | var(--colors_base_transparent) |
| --buttons_error_hover_border_radius | Rayon du coin de survol | 100px |
| --buttons_error_clicked_text_color | Couleur du texte cliqué | var(--colors_base_white) |
| --buttons_error_clicked_fill_color | Couleur de remplissage cliquée | var(--colors_error_shade) |
| --buttons_error_clicked_border_width | Largeur de la bordure cliquée | 0 |
| --buttons_error_clicked_border_color | Couleur de la bordure cliquée | var(--colors_base_transparent) |
| --buttons_error_clicked_border_radius | Rayon des coins cliqués | 100px |