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äre Tönungsfarbe
#f17951
--colors_primary_shade
Primäre Schattierungsfarbe
#cb3f11
--colors_secondary_main
Sekundäre Hauptfarbe
#fe997b
--colors_secondary_tint
Sekundäre Tönungsfarbe
#fead95
--colors_secondary_shade
Sekundäre Schattierungsfarbe
#fd602f
Hintergrund und Basis
CSS-Variable
Beschreibung
Beispielwert
--colors_background_main
Hintergrund-Hauptfarbe
#fdede7
--colors_background_tint
Hintergrund-Tönungsfarbe
#fdf1ec
--colors_background_shade
Hintergrundschattierungsfarbe
#f6aa8e
--colors_base_black
Basisschwarz
#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
Textschattierungsfarbe
#1b1f22
--colors_link_main
Link-Hauptfarbe
#2a1d8e
--colors_link_tint
Link-Farbton
#3b29c7
--colors_link_shade
Link-Schattierungsfarbe
#221772
Status
CSS-Variable
Beschreibung
Beispielwert
--colors_success_main
Erfolgshauptfarbe
#115f6a
--colors_success_tint
Erfolgstönungsfarbe
#1b9bab
--colors_success_shade
Erfolgsschattierungsfarbe
#0d4b54
--colors_warning_main
Warnhauptfarbe
#f4a939
--colors_warning_tint
Warnungsabtönungsfarbe
#f6ba60
--colors_warning_shade
Warnungsschattierungsfarbe
#e38d0d
--colors_error_main
Fehler-Hauptfarbe
#c62437
--colors_error_tint
Fehlerabtönungsfarbe
#dd4557
--colors_error_shade
Fehlerschattierungsfarbe
#a01d2c
--colors_info_main
Info-Hauptfarbe
#595959
--colors_info_tint
Info-Farbton
#7a7a7a
--colors_info_shade
Info-Farbton
#474747
Typografie
Schriftarten und Fließtext
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
Schriftfamilie für Fließtext
var(--fonts_primary_font)
--typography_body_font_size
Schriftgröße für Fließtext
14px
--typography_body_font_weight
Schriftstärke für Fließtext
normal
--typography_body_font_style
Schriftstil für Fließtext
normal
--typography_body_text_decoration
Körpertextdekoration
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
Schriftgewicht für Schaltflächentext
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ächentextschriftfamilie
var(--fonts_primary_font)
--typography_button_text_small_font_size
Kleine Schaltflächentextschriftgröße
16px
--typography_button_text_small_font_weight
Schriftgewicht für kleine Schaltflächen
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
Primär
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
Mauszeigertextfarbe
var(--colors_base_white)
--buttons_primary_hover_fill_color
Mauszeiger-Füllfarbe
var(--colors_primary_shade)
--buttons_primary_hover_border_width
Mauszeigerrandbreite
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
Angeklickter Eckenradius
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
Mauszeigertextfarbe
var(--colors_primary_shade)
--buttons_secondary_hover_fill_color
Mauszeiger-Füllfarbe
var(--colors_base_transparent)
--buttons_secondary_hover_border_width
Mauszeigerrandbreite
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
Angeklickter Eckenradius
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
Mauszeigertextfarbe
var(--colors_primary_shade)
--buttons_text_link_hover_fill_color
Mauszeiger-Füllfarbe
var(--colors_base_transparent)
--buttons_text_link_hover_border_width
Mauszeigerrandbreite
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
Angeklickter Eckenradius
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
Mauszeigertextfarbe
var(--colors_base_white)
--buttons_success_hover_fill_color
Mauszeiger-Füllfarbe
var(--colors_success_shade)
--buttons_success_hover_border_width
Mauszeigerrandbreite
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
Angeklickter Eckenradius
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
Mauszeigertextfarbe
var(--colors_base_white)
--buttons_warning_hover_fill_color
Mauszeiger-Füllfarbe
var(--colors_warning_shade)
--buttons_warning_hover_border_width
Mauszeigerrandbreite
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
Angeklickter Eckenradius
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
Mauszeigertextfarbe
var(--colors_base_white)
--buttons_error_hover_fill_color
Mauszeiger-Füllfarbe
var(--colors_error_shade)
--buttons_error_hover_border_width
Mauszeigerrandbreite
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
Angeklickter Eckenradius
100px
