CSS in Theming
Kurzübersicht
Dieser Artikel bietet die Design-Zuordnung der Theming-App und erklärt, wie Sie CSS verwenden, wenn Sie die Farben und die Typografie ändern möchten, damit sie sich von dem unterscheiden, was ein Thema bietet.
Zuordnung
| CSS Var | Themen-Anwendung: Farben | Themen-Anwendung: Typografie | Themen-Anwendung: Schaltflächen |
| --colors_text_main: | Hauptext | ||
| --colors_text_tint: | Texttönung | ||
| --colors_text_shade: | Textschatten | ||
| --colors_primary_main: | primärer Haupt | ||
| --colors_primary y_tint: | primäre Tönung | ||
| --colors_primary y_shade: | primärer Schatten | ||
| --colors_secondary_main | sekundärer Haupt | ||
| --colors_secondary_tint: | sekundäre Tönung | ||
| --colors_secondary_shade: | sekundärer Schatten | ||
| --colors_background_main: | Haupthintergrund | ||
| --colors_background_tint: | Hintergrundtönung | ||
| --colors_background_shade: | Hintergrundschatten | ||
| --colors_success_main: | Haupterfolg | ||
| --colors_success_tint: | Erfolgstönung | ||
| --colors_success_shade: | Erfolgsschatten | ||
| --colors_warning_main: | Hauptwarnung | ||
| --colors_warning_tint: | Warnungstönung | ||
| --colors_warning_shade: | Warnungsschatten | ||
| --colors_error_main: | Hauptfehler | ||
| --colors_error_tint: | Fehlertönung | ||
| --colors_error_shade: | Fehlerschatten | ||
| --colors_info_main: | Hauptinfo | ||
| --colors_info_tint: | Infotönung | ||
| --colors_info_shade: | Infoschatten | ||
| --colors_link_main: | Hauptlink | ||
| --colors_link_tint: | Tönungslink | ||
| --colors_link_shade: | Linkschatten | ||
| --colors_base_black: | Basis Schwarz | ||
| --colors_base_white: | Basis Weiß | ||
| --typography_title1_font_family: | Typografie Titel 1 Schriftfamilie | ||
| --typography_title1_font_size: | Typografie Titel 1 Schriftgröße | ||
| --typography_title1_font_weight: | Typografie Titel 1 Schriftgewicht | ||
| --typography_title1_font_style: | Typografie Titel 1 Schriftstil | ||
| --typography_title1_text_decoration: | Typografie Titel 1 Schriftdekoration | ||
| --typography_title2_font_family: | Typografie Titel 1 Schriftfamilie | ||
| --typography_title2_font_size: | Typografie Titel 2 Schriftgröße | ||
| --typography_title2_font_weight: | Typografie Titel 2 Schriftgewicht | ||
| --typography_title2_font_style: | Typografie Titel 2 Schriftstil | ||
| --typography_title2_text_decoration: | Typografie Body 2 Schriftdekoration | ||
| --typography_body1_font_family: | Typografie Body 1 Schriftfamilie | ||
| --typography_body1_font_size: | Typografie Body 1 Schriftgröße | ||
| --typography_body1_font_weight: | Typografie Body 1 Schriftgewicht | ||
| --typography_body1_font_style: | Typografie Body 1 Schriftstil | ||
| --typography_body1_text_decoration: | Typografie Body 1 Schriftdekoration | ||
| --typography_body2_font_family: | Typografie Body 2 Schriftfamilie | ||
| --typography_body2_font_size: | Typografie Body 2 Schriftgröße | ||
| --typography_body2_font_weight: | Typografie Body 2 Schriftgewicht | ||
| --typography_body2_font_style: | Typografie Body 2 Schriftstil | ||
| --typography_body2_text_decoration: | Typografie Body 2 Schriftart-Dekoration | ||
| --typography_tooltip1_font_family: | Typografie Tooltip 1 Schriftfamilie | ||
| --typography_tooltip1_font_size: | Typografie Tooltip 1 Schriftgröße | ||
| --typography_tooltip1_font_weight: | Typografie Tooltip 1 Schriftgewicht | ||
| --typography_tooltip1_font_style: | Typografie Titel 1 Schriftstil | ||
| --typography_tooltip1_text_decoration: | Typografie Tooltip 1 Schriftdekoration | ||
| --typography_tooltip2_font_family: | Typografie Tooltip 2 Schriftfamilie | ||
| --typography_tooltip2_font_size: | Typografie Body 2 Schriftgröße | ||
| --typography_tooltip2_font_weight: | Typografie Tooltip 2 Schriftgewicht | ||
| --typography_tooltip2_font_style: | Typografie Tooltip 2 Schriftstil | ||
| --typography_tooltip2_text_decoration: | Typografie Tooltip 2 Schriftdekoration | ||
| --typography_info_font_family: | Typografie Info Schriftfamilie | ||
| --typography_info_font_size: | Typografie Info Schriftgröße | ||
| --typography_info_font_weight: | Typografie Info Schriftgewicht | ||
| --typography_info_font_style: | Typografie Info Schriftstil | ||
| --typography_info_text_decoration: | Typografie Info Schriftdekoration/ | ||
| --typography_link_font_family: | Typografie Link Schriftfamilie | ||
| --typography_link_font_size: | Typografie Link Schriftgröße | ||
| --typography_link_font_weight: | Typografie Link Schriftgewicht | ||
| --typography_link_font_style: | Typografie Link Schriftstil | ||
| --typography_link_text_decoration: | Typografie Link Schriftdekoration | ||
| --typography_stepnumber_font_family: | Typografie Schrittanzahl Schriftfamilie | ||
| --typography_stepnumber_font_size: | Typografie Schrittanzahl Schriftgröße | ||
| --typography_stepnumber_font_weight: | Typografie Schrittanzahl Schriftgewicht | ||
| --typography_stepnumber_font_style: | Typografie Schrittanzahl Schriftstil | ||
| --typography_stepnumber_text_decoration: | Typografie Schrittanzahl Schriftdekoration | ||
| --buttons_primary_default_border_width: | Schaltflächen primäre Standard-Rahmenbreite | ||
| --buttons_primary_hover_border_width: | Schaltflächen Primäre Hover-Rahmenbreite | ||
| --buttons_primary_default_text_color: | Schaltflächen primäre Standardtextfarbe | ||
| --buttons_primary_default_fill_color: | Schaltflächen primäre Standard-Füllfarbe | ||
| --buttons_primary_default_border_color1: | Schaltflächen primäre Standardbegrenzung Farbe 1 | ||
| --buttons_primary_default_corner_radius: | Schaltflächen primärer Standard-Eckradius | ||
| --buttons_primary_hover_text_color: | Schaltflächen primäre Hover-Textfarbe | ||
| --buttons_primary_hover_fill_color: | Schaltflächen primäre Hover-Füllfarbe | ||
| --buttons_primary_hover_corner_radius: | Schaltflächen primärer Hover-Eckenradius | ||
| --buttons_primary_clicked_text_color: | Schaltflächen primäre Standardtextfarbe | ||
| --buttons_primary_clicked_fill_color: | Schaltflächen Primär angeklickte Füllfarbe | ||
| --buttons_primary_clicked_border_width: | Schaltflächen Primäre geklickte Hover-Rahmenbreite | ||
| --buttons_primary_clicked_corner_radius: | Schaltflächen Primärer angeklickter Eckenradius | ||
| --buttons_secondary_default_text_color: | Schaltflächen Sekundäre Standard-Textfarbe | ||
| --buttons_secondary_default_border_color: | Schaltflächen Sekundäre Standardrandfarbe | ||
| --buttons_secondary_default_border_width: | Schaltflächen Sekundäre Standard-Rahmenbreite | ||
| --buttons_secondary_default_corner_radius: | Schaltflächen Sekundärer Standard-Eckradius | ||
| --buttons_secondary_hover_text_color: | Schaltflächen Sekundäre Hover-Textfarbe | ||
| --buttons_secondary_hover_border_color: | Schaltflächen Sekundäre Hover-Rahmenfarbe | ||
| --buttons_secondary_hover_border_width: | Schaltflächen Sekundäre Hover-Rahmenbreite | ||
| --buttons_secondary_hover_corner_radius: | Schaltflächen Sekundärer Hover-Eckradius | ||
| --buttons_secondary_clicked_text_color: | Schaltflächen Sekundäre angeklickte Textfarbe | ||
| --buttons_secondary_clicked_border_color: | Schaltflächen Sekundäre angeklickte Rahmenfarbe | ||
| --buttons_secondary_clicked_border_width: | Schaltflächen Sekundäre geklickte Rahmenbreite | ||
| --buttons_secondary_clicked_corner_radius: | Schaltflächen Sekundär angeklickter Eckenradius | ||
| --buttons_textprimary_default_border_width: | Schaltflächen textprimär Standard-Rahmenbreite | ||
| --buttons_textprimary_default_text_color: | Schaltflächen textprimäre Standard-Textfarbe | ||
| --buttons_textprimary_default_corner_radius: | Schaltflächen textprimärer standard-Eckradius | ||
| --buttons_textprimary_hover_text_color: | Schaltflächen textprimäre Hover-Textfarbe | ||
| --buttons_textprimary_hover_border_color: | Schaltflächen textprimäre Hover-Rahmenfarbe | ||
| --buttons_textprimary_hover_border_width: | Schaltflächen textprimäre Hover-Rahmenbreite | ||
| --buttons_textprimary_hover_corner_radius: | Schaltflächen textprimäre Hover-Eckenradius | ||
| --buttons_textprimary_clicked_text_color: | Schaltflächen textprimäre Standardtextfarbe | ||
| --buttons_textprimary_clicked_border_color: | Schaltflächen textprimäre angeklickte Rahmenfarbe | ||
| --buttons_textprimary_clicked_border_width: | Schaltflächen textprimäre geklickte Hover-Rahmenbreite | ||
| --buttons_textprimary_clicked_corner_radius: | Schaltflächen textprimärer angeklickter Eckenradius | ||
| --buttons_textsecondary_default_text_color: | Schaltflächen textsekundäre Standard-Textfarbe | ||
| --buttons_textsecondary_default_border_width: | Schaltflächen textsekundäre Standard-Rahmenbreite | ||
| --buttons_textsecondary_default_corner_radius: | Schaltflächen textsekundärer Standard-Eckradius | ||
| --buttons_textsecondary_hover_text_color: | Schaltflächen textsekundäre Hover-Textfarbe | ||
| --buttons_textsecondary_hover_border_color: | Schaltflächen textsekundäre Hover-Rahmenfarbe | ||
| --buttons_textsecondary_hover_border_width: | Schaltflächen textsekundäre Hover-Rahmenbreite | ||
| --buttons_textsecondary_hover_corner_radius: | Schaltflächen textsekundärer Hover-Eckenradius | ||
| --buttons_textsecondary_clicked_text_color: | Schaltflächen textsekundäre geklickte Hover-Textfarbe | ||
| --buttons_textsecondary_clicked_fill_color: | Schaltflächen textsekundäre angeklickte Füllfarbe | ||
| --buttons_textsecondary_clicked_border_color: | Schaltflächen textsekundäre angeklickte Rahmenfarbe | ||
| --buttons_textsecondary_clicked_border_width: | Schaltflächen textsekundäre geklickte Rahmenbreite | ||
| --buttons_textsecondary_clicked_corner_radius: | Schaltflächen TexteVerketteter Eckenradius | ||
| --buttons_closebutton_default_text_color: | Schaltflächen Schließschaltfläche Standardtextfarbe | ||
| --buttons_closebutton_default_border_color: | Schaltflächen Schließschaltfläche Standardrahmenfarbe | ||
| --buttons_closebutton_default_border_width: | Schaltflächen Schließschaltfläche Standard-Rahmenbreite | ||
| --buttons_closebutton_default_corner_radius: | Schaltflächen Schliesschaltfläche Standard-Eckradius | ||
| --buttons_closebutton_hover_text_color: | Schaltflächen Schließschaltfläche Hover-Textfarbe | ||
| --buttons_closebutton_hover_border_color: | Schaltflächen Schließschaltfläche Hover-Rahmenfarbe | ||
| --buttons_closebutton_hover_border_width: | Schaltflächen Schließschaltfläche Hover-Rahmenbreite | ||
| --buttons_closebutton_hover_corner_radius: | Schaltflächen Schließschaltfläche Hover-Eckenradius | ||
| --buttons_closebutton_clicked_text_color: | Schaltflächen Schließschaltfläche geklickte Textfarbe | ||
| --buttons_closebutton_clicked_border_color: | Schaltflächen Schließschaltfläche geklickte Rahmenfarbe | ||
| --buttons_closebutton_clicked_border_width: | Schaltflächen Schließschaltfläche geklickte Rahmenbreite | ||
| --buttons_closebutton_clicked_corner_radius: | Schaltflächen Schliesschaltfläche geklickter Eckradius | ||
| --buttons_success_default_text_color: | Schaltflächen Erfolgsstandard-Textfarbe | ||
| --buttons_success_default_fill_color: | Schaltflächen Erfolgsstandard-Füllfarbe | ||
| --buttons_success_default_border_width: | Schaltflächen Erfolgsstandard-Rahmenbreite | ||
| --buttons_success_default_corner_radius: | Schaltflächen Erfolgsstandard-Eckradius | ||
| --buttons_success_hover_text_color: | Schaltflächen Erfolgshover-Textfarbe | ||
| --buttons_success_hover_fill_color: | Schaltflächen Erfolgshover-Füllfarbe | ||
| --buttons_success_hover_border_width: | Schaltflächen Erfolgshover-Rahmenbreite | ||
| --buttons_success_hover_corner_radius: | Schaltflächen Erfolgshover-Eckradius | ||
| --buttons_success_clicked_text_color: | Schaltflächen geklickte Erfolgstextfarbe | ||
| --buttons_success_clicked_fill_color: | Schaltflächen angeklickte Erfolgsfüllfarbe | ||
| --buttons_success_clicked_border_width: | Schaltflächen geklickte Erfolgsrahmenbreite | ||
| --buttons_success_clicked_corner_radius: | Schaltflächen Erfolg geklickter Eckradius | ||
| --buttons_warning_default_text_color: | Schaltflächen Warnung Standard-Textfarbe | ||
| --buttons_warning_default_fill_color: | Schaltflächen Warnung Standardfüllfarbe | ||
| --buttons_warning_default_border_width: | Schaltflächen Warnung Standard-Rahmenbreite | ||
| --buttons_warning_default_corner_radius: | Schaltflächen Warnung Standard-Eckradius | ||
| --buttons_warning_hover_text_color: | Schaltflächen Warnung Hover-Textfarbe | ||
| --buttons_warning_hover_fill_color: | Schaltflächen Warnung Füllfarbe | ||
| --buttons_warning_hover_border_width: | Schaltflächen Warnung Hover-Rahmenbreite | ||
| --buttons_warning_hover_corner_radius: | Schaltflächen Warnung Hover-Eckenradius | ||
| --buttons_warning_clicked_text_color: | Schaltflächen Warnung Textfarbe | ||
| --buttons_warning_clicked_fill_color: | Schaltflächen Warnung geklickte Füllfarbe | ||
| --buttons_warning_clicked_border_width: | Schaltflächen Warnung geklickte Rahmenbreite | ||
| --buttons_warning_clicked_corner_radius: | Schaltflächen Warnung geklickter Eckradius | ||
| --buttons_error_default_text_color: | Schaltflächen Fehler Standard-Textfarbe | ||
| --buttons_error_default_fill_color: | Schaltflächen Fehler Standardfüllfarbe | ||
| --buttons_error_default_border_width: | Schaltflächen Fehler Standard-Rahmenbreite | ||
| --buttons_error_default_corner_radius: | Schaltflächen Fehler Standard-Eckradius | ||
| --buttons_error_hover_text_color: | Schaltflächen Fehler Hover-Textfarbe | ||
| --buttons_error_hover_fill_color: | Schaltflächen Fehler Hover-Füllfarbe | ||
| --buttons_error_hover_border_width: | Schaltflächen Fehler Hover-Rahmenbreite | ||
| --buttons_error_hover_corner_radius: | Schaltflächen Fehler Hover-Eckenradius | ||
| --buttons_error_clicked_text_color: | Schaltflächen Fehler geklickte Hover-Textfarbe | ||
| --buttons_error_clicked_fill_color: | Schaltflächen Fehler geklickte Füllfarbe | ||
| --buttons_error_clicked_border_width: | Schaltflächen Fehler geklickte Hover-Rahmenbreite | ||
| --buttons_error_clicked_corner_radius: | Schaltflächen Fehler geklickter Eckenradius | ||
| --buttons_info_default_text_color: | Schaltflächen Info Standard-Textfarbe | ||
| --buttons_info_default_fill_color: | Schaltflächen Info Standardfüllfarbe | ||
| --buttons_info_default_border_width: | Schaltflächen Info Standard-Rahmenbreite | ||
| --buttons_info_default_corner_radius: | Schaltflächen Info Standard-Eckradius | ||
| --buttons_info_hover_text_color: | Schaltflächen Info Hover-Textfarbe | ||
| --buttons_info_hover_fill_color: | Schaltflächen Info Hover-Füllfarbe | ||
| --buttons_info_hover_border_width: | Schaltflächen Info Hover-Rahmenbreite | ||
| --buttons_info_hover_corner_radius: | Schaltflächen Info Hover-Eckradius | ||
| --buttons_info_clicked_text_color: | Schaltflächen Info geklickte Textfarbe | ||
| --buttons_info_clicked_fill_color: | Schaltflächen Info geklickte Farbe | ||
| --buttons_info_clicked_border_width: | Schaltflächen Info geklickte Rahmenbreite | ||
| --buttons_info_clicked_corner_radius: | Schaltflächeninfo angeklickter Eckenradius |
War dies hilfreich?
Ja
Nein
Vielen Dank für Ihr Feedback!