Kurzübersicht
Dieser Artikel erklärt, wie Sie Farben und Typografie in Ihren WalkMe-Inhalten mithilfe von CSS-Variablen aus Theming anpassen können. Sie können diese Variablen direkt in Ihrem benutzerdefinierten CSS anwenden, um sie an die Marke Ihrer Organisation anzupassen.
Theming: Getting Started Guide
Colors (Farben)
Primär und sekundär
| CSS-Variable |
Beschreibung |
Beispielwert |
| --colors_primary_main |
Primäre Hauptfarbe |
#ed5725 |
| --colors_primary_tint |
Primärfarbe |
#f17951 |
| --colors_primary_shade |
Primärfarbe |
#cb3f11 |
| --colors_secondary_main |
Sekundäre Hauptfarbe |
#fe997b |
| --colors_secondary_tint |
Sekundäre Tönungsfarbe |
#fead95 |
| --colors_secondary_shade |
Sekundäre Farbtonfarbe |
#fd602f |
Hintergrund und Basis
| CSS-Variable |
Beschreibung |
Beispielwert |
| --colors_background_main |
Hintergrund-Hauptfarbe |
#fdede7 |
| --colors_background_tint |
Hintergrundfarbe |
#fdf1ec |
| --colors_background_shade |
Hintergrundfarbe |
#f6aa8e |
| --colors_base_black |
Basis schwarz |
#000000 |
| --colors_base_white |
Basisweiß |
#ffffff |
| --colors_base_transparent |
Basis transparent |
transparent |
Text und Link
| CSS-Variable |
Beschreibung |
Beispielwert |
| --colors_text_main |
Text-Hauptfarbe |
#212529 |
| --colors_text_tint |
Textfarbe |
#49525a |
| --colors_text_shade |
Textfarbe |
#1b1f22 |
| --colors_link_main |
Link-Hauptfarbe |
#2a1d8e |
| --colors_link_tint |
Link-Farbton |
#3b29c7 |
| --colors_link_shade |
Link-Farbton |
#221772 |
Status
| CSS-Variable |
Beschreibung |
Beispielwert |
| --colors_success_main |
Erfolg-Hauptfarbe |
#115f6a |
| --colors_success_tint |
Erfolgstönungsfarbe |
#1b9bab |
| --colors_success_shade |
Erfolgsfarbe |
#0d4b54 |
| --colors_warning_main |
Warnhauptfarbe |
#f4a939 |
| --colors_warning_tint |
Warnfarbe |
#f6ba60 |
| --colors_warning_shade |
Warnfarbe |
#e38d0d |
| --colors_error_main |
Fehler-Hauptfarbe |
#c62437 |
| --colors_error_tint |
Fehlerfarbe |
#dd4557 |
| --colors_error_shade |
Fehlerfarbe |
#a01d2c |
| --colors_info_main |
Info-Hauptfarbe |
#595959 |
| --colors_info_tint |
Info-Farbton |
#7a7a7a |
| --colors_info_shade |
Info-Farbton |
#474747 |
Typografie
Schriftarten und Körper
| CSS-Variable |
Beschreibung |
Beispielwert |
| --fonts_primary_font |
Primäre Schriftfamilie |
walkme-poppins |
| --fonts_secondary_font |
Sekundäre Schriftfamilie |
walkme-proxima-nova |
| --typography_body_font_family |
Textfamilie |
var(--fonts_primary_font) |
| --typography_body_font_size |
Schriftgröße |
14px |
| --typography_body_font_weight |
Körperschriftgewicht |
normal |
| --typography_body_font_style |
Schriftartstil |
normal |
| --typography_body_text_decoration |
Textdekoration |
keine |
Titel und Untertitel
| CSS-Variable |
Beschreibung |
Beispielwert |
| --typography_title_large_font_family |
Große Titelschriftfamilie |
var(--fonts_primary_font) |
| --typography_title_large_font_size |
Große Titelschriftgröße |
24px |
| --typography_title_large_font_weight |
Großes Titelschriftgewicht |
fett |
| --typography_title_large_font_style |
Großer Titelschriftstil |
normal |
| --typography_title_large_text_decoration |
Große Titeltextdekoration |
keine |
| --typography_title_font_family |
Titelschriftfamilie |
var(--fonts_primary_font) |
| --typography_title_font_size |
Titelschriftgröße |
20px |
| --typography_title_font_weight |
Titelschriftgewicht |
fett |
| --typography_title_font_style |
Titelschriftstil |
normal |
| --typography_title_text_decoration |
Titeltextdekoration |
keine |
| --typography_subtitle_font_family |
Untertitel-Schriftfamilie |
var(--fonts_primary_font) |
| --typography_subtitle_font_size |
Untertitel-Schriftgröße |
16px |
| --typography_subtitle_font_weight |
Schriftgewicht für Untertitel |
fett |
| --typography_subtitle_font_style |
Untertitel-Schriftstil |
normal |
| --typography_subtitle_text_decoration |
Untertitel-Textdekoration |
keine |
Schaltflächentext
| CSS-Variable |
Beschreibung |
Beispielwert |
| --typography_button_text_font_family |
Schaltflächentextschriftfamilie |
var(--fonts_primary_font) |
| --typography_button_text_font_size |
Schaltflächentextschriftgröße |
16px |
| --typography_button_text_font_weight |
Schaltflächentextschriftgewicht |
fett |
| --typography_button_text_font_style |
Schaltflächentextschriftstil |
normal |
| --typography_button_text_text_decoration |
Schaltflächentextdekoration |
keine |
| --typography_button_text_small_font_family |
Kleine Schaltflächen-Textschriftfamilie |
var(--fonts_primary_font) |
| --typography_button_text_small_font_size |
Kleine Schaltflächentextschriftgröße |
16px |
| --typography_button_text_small_font_weight |
Kleines Schaltflächentextschriftgewicht |
fett |
| --typography_button_text_small_font_style |
Textschriftstil für kleine Schaltflächen |
normal |
| --typography_button_text_small_text_decoration |
Kleine Schaltflächen-Textdekoration |
keine |
Schaltflächen
Primary
| CSS-Variable |
Beschreibung |
Beispielwert |
| --buttons_primary_default_text_color |
Standardtextfarbe |
var(--colors_base_white) |
| --buttons_primary_default_fill_color |
Standardfüllfarbe |
var(--colors_primary_main) |
| --buttons_primary_default_border_width |
Standardrandbreite |
0 |
| --buttons_primary_default_border_color |
Standard-Rahmenfarbe |
var(--colors_base_transparent) |
| --buttons_primary_default_border_radius |
Standard-Eckenradius |
100px |
| --buttons_primary_hover_text_color |
Mauszeiger-Textfarbe |
var(--colors_base_white) |
| --buttons_primary_hover_fill_color |
Mauszeiger-Füllfarbe |
var(--colors_primary_shade) |
| --buttons_primary_hover_border_width |
Hover-Rahmenbreite |
0 |
| --buttons_primary_hover_border_color |
Farbe des Mauszeigerrahmens |
var(--colors_base_transparent) |
| --buttons_primary_hover_border_radius |
Hover-Eckradius |
100px |
| --buttons_primary_clicked_text_color |
Angeklickte Textfarbe |
var(--colors_base_white) |
| --buttons_primary_clicked_fill_color |
Angeklickte Füllfarbe |
var(--colors_primary_shade) |
| --buttons_primary_clicked_border_width |
Angeklickte Rahmenbreite |
0 |
| --buttons_primary_clicked_border_color |
Angeklickte Rahmenfarbe |
var(--colors_base_transparent) |
| --buttons_primary_clicked_border_radius |
Angeklickte Eckradius |
100px |
Sekundär
| CSS-Variable |
Beschreibung |
Beispielwert |
| --buttons_secondary_default_text_color |
Standardtextfarbe |
var(--colors_primary_main) |
| --buttons_secondary_default_fill_color |
Standardfüllfarbe |
var(--colors_base_transparent) |
| --buttons_secondary_default_border_width |
Standardrandbreite |
1px |
| --buttons_secondary_default_border_color |
Standard-Rahmenfarbe |
var(--colors_primary_main) |
| --buttons_secondary_default_border_radius |
Standard-Eckenradius |
100px |
| --buttons_secondary_hover_text_color |
Mauszeiger-Textfarbe |
var(--colors_primary_shade) |
| --buttons_secondary_hover_fill_color |
Mauszeiger-Füllfarbe |
var(--colors_base_transparent) |
| --buttons_secondary_hover_border_width |
Hover-Rahmenbreite |
1px |
| --buttons_secondary_hover_border_color |
Farbe des Mauszeigerrahmens |
var(--colors_primary_shade) |
| --buttons_secondary_hover_border_radius |
Hover-Eckradius |
100px |
| --buttons_secondary_clicked_text_color |
Angeklickte Textfarbe |
var(--colors_primary_shade) |
| --buttons_secondary_clicked_fill_color |
Angeklickte Füllfarbe |
var(--colors_base_transparent) |
| --buttons_secondary_clicked_border_width |
Angeklickte Rahmenbreite |
1px |
| --buttons_secondary_clicked_border_color |
Angeklickte Rahmenfarbe |
var(--colors_primary_shade) |
| --buttons_secondary_clicked_border_radius |
Angeklickte Eckradius |
100px |
Textlink
| CSS-Variable |
Beschreibung |
Beispielwert |
| --buttons_text_link_default_text_color |
Standardtextfarbe |
var(--colors_primary_main) |
| --buttons_text_link_default_fill_color |
Standardfüllfarbe |
var(--colors_base_transparent) |
| --buttons_text_link_default_border_width |
Standardrandbreite |
0 |
| --buttons_text_link_default_border_color |
Standard-Rahmenfarbe |
var(--colors_base_transparent) |
| --buttons_text_link_default_border_radius |
Standard-Eckenradius |
0 |
| --buttons_text_link_hover_text_color |
Mauszeiger-Textfarbe |
var(--colors_primary_shade) |
| --buttons_text_link_hover_fill_color |
Mauszeiger-Füllfarbe |
var(--colors_base_transparent) |
| --buttons_text_link_hover_border_width |
Hover-Rahmenbreite |
0 |
| --buttons_text_link_hover_border_color |
Farbe des Mauszeigerrahmens |
var(--colors_base_transparent) |
| --buttons_text_link_hover_border_radius |
Hover-Eckradius |
0 |
| --buttons_text_link_clicked_text_color |
Angeklickte Textfarbe |
var(--colors_primary_shade) |
| --buttons_text_link_clicked_fill_color |
Angeklickte Füllfarbe |
var(--colors_base_transparent) |
| --buttons_text_link_clicked_border_width |
Angeklickte Rahmenbreite |
0 |
| --buttons_text_link_clicked_border_color |
Angeklickte Rahmenfarbe |
var(--colors_base_transparent) |
| --buttons_text_link_clicked_border_radius |
Angeklickte Eckradius |
0 |
Erfolg
| CSS-Variable |
Beschreibung |
Beispielwert |
| --buttons_success_default_text_color |
Standardtextfarbe |
var(--colors_base_white) |
| --buttons_success_default_fill_color |
Standardfüllfarbe |
var(--colors_success_main) |
| --buttons_success_default_border_width |
Standardrandbreite |
0 |
| --buttons_success_default_border_color |
Standard-Rahmenfarbe |
var(--colors_base_transparent) |
| --buttons_success_default_border_radius |
Standard-Eckenradius |
100px |
| --buttons_success_hover_text_color |
Mauszeiger-Textfarbe |
var(--colors_base_white) |
| --buttons_success_hover_fill_color |
Mauszeiger-Füllfarbe |
var(--colors_success_shade) |
| --buttons_success_hover_border_width |
Hover-Rahmenbreite |
0 |
| --buttons_success_hover_border_color |
Farbe des Mauszeigerrahmens |
var(--colors_base_transparent) |
| --buttons_success_hover_border_radius |
Hover-Eckradius |
100px |
| --buttons_success_clicked_text_color |
Angeklickte Textfarbe |
var(--colors_base_white) |
| --buttons_success_clicked_fill_color |
Angeklickte Füllfarbe |
var(--colors_success_shade) |
| --buttons_success_clicked_border_width |
Angeklickte Rahmenbreite |
0 |
| --buttons_success_clicked_border_color |
Angeklickte Rahmenfarbe |
var(--colors_base_transparent) |
| --buttons_success_clicked_border_radius |
Angeklickte Eckradius |
100px |
Warnung
| CSS-Variable |
Beschreibung |
Beispielwert |
| --buttons_warning_default_text_color |
Standardtextfarbe |
var(--colors_base_white) |
| --buttons_warning_default_fill_color |
Standardfüllfarbe |
var(--colors_warning_main) |
| --buttons_warning_default_border_width |
Standardrandbreite |
0 |
| --buttons_warning_default_border_color |
Standard-Rahmenfarbe |
var(--colors_base_transparent) |
| --buttons_warning_default_border_radius |
Standard-Eckenradius |
100px |
| --buttons_warning_hover_text_color |
Mauszeiger-Textfarbe |
var(--colors_base_white) |
| --buttons_warning_hover_fill_color |
Mauszeiger-Füllfarbe |
var(--colors_warning_shade) |
| --buttons_warning_hover_border_width |
Hover-Rahmenbreite |
0 |
| --buttons_warning_hover_border_color |
Farbe des Mauszeigerrahmens |
var(--colors_base_transparent) |
| --buttons_warning_hover_border_radius |
Hover-Eckradius |
100px |
| --buttons_warning_clicked_text_color |
Angeklickte Textfarbe |
var(--colors_base_white) |
| --buttons_warning_clicked_fill_color |
Angeklickte Füllfarbe |
var(--colors_warning_shade) |
| --buttons_warning_clicked_border_width |
Angeklickte Rahmenbreite |
0 |
| --buttons_warning_clicked_border_color |
Angeklickte Rahmenfarbe |
var(--colors_base_transparent) |
| --buttons_warning_clicked_border_radius |
Angeklickte Eckradius |
100px |
Fehler
| CSS-Variable |
Beschreibung |
Beispielwert |
| --buttons_error_default_text_color |
Standardtextfarbe |
var(--colors_base_white) |
| --buttons_error_default_fill_color |
Standardfüllfarbe |
var(--colors_error_main) |
| --buttons_error_default_border_width |
Standardrandbreite |
0 |
| --buttons_error_default_border_color |
Standard-Rahmenfarbe |
var(--colors_base_transparent) |
| --buttons_error_default_border_radius |
Standard-Eckenradius |
100px |
| --buttons_error_hover_text_color |
Mauszeiger-Textfarbe |
var(--colors_base_white) |
| --buttons_error_hover_fill_color |
Mauszeiger-Füllfarbe |
var(--colors_error_shade) |
| --buttons_error_hover_border_width |
Hover-Rahmenbreite |
0 |
| --buttons_error_hover_border_color |
Farbe des Mauszeigerrahmens |
var(--colors_base_transparent) |
| --buttons_error_hover_border_radius |
Hover-Eckradius |
100px |
| --buttons_error_clicked_text_color |
Angeklickte Textfarbe |
var(--colors_base_white) |
| --buttons_error_clicked_fill_color |
Angeklickte Füllfarbe |
var(--colors_error_shade) |
| --buttons_error_clicked_border_width |
Angeklickte Rahmenbreite |
0 |
| --buttons_error_clicked_border_color |
Angeklickte Rahmenfarbe |
var(--colors_base_transparent) |
| --buttons_error_clicked_border_radius |
Angeklickte Eckradius |
100px |
