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.
Este artículo explica cómo personalizar los colores y la tipografía en el contenido de WalkMe utilizando variables de CSS de Theming. Puedes aplicar estas variables directamente en tu CSS personalizado para que coincida con la marca de tu organización.
| Variable CSS | Descripción | Valor de ejemplo |
|---|---|---|
| --colors_primary_main | Color principal | #ed5725 |
| --colors_primary_tint | Color de tinte principal | #f17951 |
| --colors_primary_shade | Color de sombra principal | #cb3f11 |
| --colors_secondary_main | Color principal secundario | #fe997b |
| --colors_secondary_tint | Color de tinte secundario | #fead95 |
| --colors_secondary_shade | Color de sombra secundario | #fd602f |
| Variable CSS | Descripción | Valor de ejemplo |
|---|---|---|
| --colors_background_main | Color principal de fondo | #fdede7 |
| --colors_background_tint | Color de tinte de fondo | #fdf1ec |
| --colors_background_shade | Color de sombra de fondo | #f6aa8e |
| --colors_base_black | Base negra | #000000 |
| --colors_base_white | Base blanca | #ffffff |
| --colors_base_transparent | Base transparente | transparente |
| Variable CSS | Descripción | Valor de ejemplo |
|---|---|---|
| --colors_text_main | Color principal del texto | #212529 |
| --colors_text_tint | Color de tinte de texto | #49525a |
| --colors_text_shade | Color de sombra del texto | #1b1f22 |
| --colors_link_main | Color principal del enlace | #2a1d8e |
| --colors_link_tint | Color de tinte del enlace | #3b29c7 |
| --colors_link_shade | Color de sombra del enlace | #221772 |
| Variable CSS | Descripción | Valor de ejemplo |
|---|---|---|
| --colors_success_main | Color principal de éxito | #115f6a |
| --colors_success_tint | Color de tinte de éxito | #1b9bab |
| --colors_success_shade | Color de sombra de éxito | #0d4b54 |
| --colors_warning_main | Color principal de advertencia | #f4a939 |
| --colors_warning_tint | Color de tinte de advertencia | #f6ba60 |
| --colors_warning_shade | Color de sombra de advertencia | #e38d0d |
| --colors_error_main | Color principal de error | #c62437 |
| --colors_error_tint | Color de tinte de error | #dd4557 |
| --colors_error_shade | Color de sombra de error | #a01d2c |
| --colors_info_main | Color principal de información | #595959 |
| --colors_info_tint | Color de tinte de información | #7a7a7a |
| --colors_info_shade | Color de sombra de información | #474747 |
| Variable CSS | Descripción | Valor de ejemplo |
|---|---|---|
| --fonts_primary_font | Familia de fuentes principal | walkme-poppins |
| --fonts_secondary_font | Familia de fuentes secundaria | walkme-proxima-nova |
| --typography_body_font_family | Familia tipográfica del cuerpo | var(--fonts_primary_font) |
| --typography_body_font_size | Tamaño tipográfico del cuerpo | 14px |
| --typography_body_font_weight | Peso tipográfico del cuerpo | normal |
| --typography_body_font_style | Estilo tipográfico del cuerpo | normal |
| --typography_body_text_decoration | Decoración tipográfica del cuerpo | Ninguno |
| Variable CSS | Descripción | Valor de ejemplo |
|---|---|---|
| --typography_title_large_font_family | Familia de fuentes de título grande | var(--fonts_primary_font) |
| --typography_title_large_font_size | Tamaño de fuente de título grande | 24px |
| --typography_title_large_font_weight | Peso de fuente de título grande | negrita |
| --typography_title_large_font_style | Estilo de fuente de título grande | normal |
| --typography_title_large_text_decoration | Decoración de texto de título grande | Ninguno |
| --typography_title_font_family | Familia de fuentes de título | var(--fonts_primary_font) |
| --typography_title_font_size | Tamaño de fuente de título | 20px |
| --typography_title_font_weight | Peso de fuente de título | negrita |
| --typography_title_font_style | Estilo de fuente de título | normal |
| --typography_title_text_decoration | Decoración del texto de título | Ninguno |
| --typography_subtitle_font_family | Familia de fuentes de subtítulo | var(--fonts_primary_font) |
| --typography_subtitle_font_size | Tamaño de fuente de subtítulo | 16px |
| --typography_subtitle_font_weight | Peso de fuente de subtítulo | negrita |
| --typography_subtitle_font_style | Estilo de fuente de subtítulo | normal |
| --typography_subtitle_text_decoration | Decoración de texto de subtítulos | Ninguno |
| Variable CSS | Descripción | Valor de ejemplo |
|---|---|---|
| --typography_button_text_font_family | Familia de fuentes de texto de botón | var(--fonts_primary_font) |
| --typography_button_text_font_size | Tamaño de fuente del texto del botón | 16px |
| --typography_button_text_font_weight | Peso de fuente de texto del botón | negrita |
| --typography_button_text_font_style | Estilo de fuente de texto de botón | normal |
| --typography_button_text_text_decoration | Decoración de texto de botón | Ninguno |
| --typography_button_text_small_font_family | Familia de fuentes de texto de botón pequeño | var(--fonts_primary_font) |
| --typography_button_text_small_font_size | Tamaño de fuente de texto de botón pequeño | 16px |
| --typography_button_text_small_font_weight | Peso de fuente de texto de botón pequeño | negrita |
| --typography_button_text_small_font_style | Estilo de fuente de texto de botón pequeño | normal |
| --typography_button_text_small_text_decoration | Decoración de texto de botón pequeño | Ninguno |
| Variable CSS | Descripción | Valor de ejemplo |
|---|---|---|
| --buttons_primary_default_text_color | Color de texto predeterminado | var(--colors_base_white) |
| --buttons_primary_default_fill_color | Color de relleno predeterminado | var(--colors_primary_main) |
| --buttons_primary_default_border_width | Ancho de borde predeterminado | 0 |
| --buttons_primary_default_border_color | Color de borde predeterminado | var(--colors_base_transparent) |
| --buttons_primary_default_border_radius | Radio de esquina predeterminado | 100px |
| --buttons_primary_hover_text_color | Color de texto al pasar el cursor | var(--colors_base_white) |
| --buttons_primary_hover_fill_color | Color de relleno al pasar el cursor | var(--colors_primary_shade) |
| --buttons_primary_hover_border_width | Ancho del borde al pasar el cursor | 0 |
| --buttons_primary_hover_border_color | Color del borde al pasar el cursor | var(--colors_base_transparent) |
| --buttons_primary_hover_border_radius | Radio de la esquina al pasar el cursor | 100px |
| --buttons_primary_clicked_text_color | Color del texto en el que se hizo clic | var(--colors_base_white) |
| --buttons_primary_clicked_fill_color | Color de relleno en el que se hizo clic | var(--colors_primary_shade) |
| --buttons_primary_clicked_border_width | Ancho del borde al hacer clic | 0 |
| --buttons_primary_clicked_border_color | Color del borde al hacer clic | var(--colors_base_transparent) |
| --buttons_primary_clicked_border_radius | Radio de la esquina al hacer clic | 100px |
| Variable CSS | Descripción | Valor de ejemplo |
|---|---|---|
| --buttons_secondary_default_text_color | Color de texto predeterminado | var(--colors_primary_main) |
| --buttons_secondary_default_fill_color | Color de relleno predeterminado | var(--colors_base_transparent) |
| --buttons_secondary_default_border_width | Ancho de borde predeterminado | 1px |
| --buttons_secondary_default_border_color | Color de borde predeterminado | var(--colors_primary_main) |
| --buttons_secondary_default_border_radius | Radio de esquina predeterminado | 100px |
| --buttons_secondary_hover_text_color | Color de texto al pasar el cursor | var(--colors_primary_shade) |
| --buttons_secondary_hover_fill_color | Color de relleno al pasar el cursor | var(--colors_base_transparent) |
| --buttons_secondary_hover_border_width | Ancho del borde al pasar el cursor | 1px |
| --buttons_secondary_hover_border_color | Color del borde al pasar el cursor | var(--colors_primary_shade) |
| --buttons_secondary_hover_border_radius | Radio de la esquina al pasar el cursor | 100px |
| --buttons_secondary_clicked_text_color | Color del texto en el que se hizo clic | var(--colors_primary_shade) |
| --buttons_secondary_clicked_fill_color | Color de relleno en el que se hizo clic | var(--colors_base_transparent) |
| --buttons_secondary_clicked_border_width | Ancho del borde al hacer clic | 1px |
| --buttons_secondary_clicked_border_color | Color del borde al hacer clic | var(--colors_primary_shade) |
| --buttons_secondary_clicked_border_radius | Radio de la esquina al hacer clic | 100px |
| Variable CSS | Descripción | Valor de ejemplo |
|---|---|---|
| --buttons_text_link_default_text_color | Color de texto predeterminado | var(--colors_primary_main) |
| --buttons_text_link_default_fill_color | Color de relleno predeterminado | var(--colors_base_transparent) |
| --buttons_text_link_default_border_width | Ancho de borde predeterminado | 0 |
| --buttons_text_link_default_border_color | Color de borde predeterminado | var(--colors_base_transparent) |
| --buttons_text_link_default_border_radius | Radio de esquina predeterminado | 0 |
| --buttons_text_link_hover_text_color | Color de texto al pasar el cursor | var(--colors_primary_shade) |
| --buttons_text_link_hover_fill_color | Color de relleno al pasar el cursor | var(--colors_base_transparent) |
| --buttons_text_link_hover_border_width | Ancho del borde al pasar el cursor | 0 |
| --buttons_text_link_hover_border_color | Color del borde al pasar el cursor | var(--colors_base_transparent) |
| --buttons_text_link_hover_border_radius | Radio de la esquina al pasar el cursor | 0 |
| --buttons_text_link_clicked_text_color | Color del texto en el que se hizo clic | var(--colors_primary_shade) |
| --buttons_text_link_clicked_fill_color | Color de relleno en el que se hizo clic | var(--colors_base_transparent) |
| --buttons_text_link_clicked_border_width | Ancho del borde al hacer clic | 0 |
| --buttons_text_link_clicked_border_color | Color del borde al hacer clic | var(--colors_base_transparent) |
| --buttons_text_link_clicked_border_radius | Radio de la esquina al hacer clic | 0 |
| Variable CSS | Descripción | Valor de ejemplo |
|---|---|---|
| --buttons_success_default_text_color | Color de texto predeterminado | var(--colors_base_white) |
| --buttons_success_default_fill_color | Color de relleno predeterminado | var(--colors_success_main) |
| --buttons_success_default_border_width | Ancho de borde predeterminado | 0 |
| --buttons_success_default_border_color | Color de borde predeterminado | var(--colors_base_transparent) |
| --buttons_success_default_border_radius | Radio de esquina predeterminado | 100px |
| --buttons_success_hover_text_color | Color de texto al pasar el cursor | var(--colors_base_white) |
| --buttons_success_hover_fill_color | Color de relleno al pasar el cursor | var(--colors_success_shade) |
| --buttons_success_hover_border_width | Ancho del borde al pasar el cursor | 0 |
| --buttons_success_hover_border_color | Color del borde al pasar el cursor | var(--colors_base_transparent) |
| --buttons_success_hover_border_radius | Radio de la esquina al pasar el cursor | 100px |
| --buttons_success_clicked_text_color | Color del texto en el que se hizo clic | var(--colors_base_white) |
| --buttons_success_clicked_fill_color | Color de relleno en el que se hizo clic | var(--colors_success_shade) |
| --buttons_success_clicked_border_width | Ancho del borde al hacer clic | 0 |
| --buttons_success_clicked_border_color | Color del borde al hacer clic | var(--colors_base_transparent) |
| --buttons_success_clicked_border_radius | Radio de la esquina al hacer clic | 100px |
| Variable CSS | Descripción | Valor de ejemplo |
|---|---|---|
| --buttons_warning_default_text_color | Color de texto predeterminado | var(--colors_base_white) |
| --buttons_warning_default_fill_color | Color de relleno predeterminado | var(--colors_warning_main) |
| --buttons_warning_default_border_width | Ancho de borde predeterminado | 0 |
| --buttons_warning_default_border_color | Color de borde predeterminado | var(--colors_base_transparent) |
| --buttons_warning_default_border_radius | Radio de esquina predeterminado | 100px |
| --buttons_warning_hover_text_color | Color de texto al pasar el cursor | var(--colors_base_white) |
| --buttons_warning_hover_fill_color | Color de relleno al pasar el cursor | var(--colors_warning_shade) |
| --buttons_warning_hover_border_width | Ancho del borde al pasar el cursor | 0 |
| --buttons_warning_hover_border_color | Color del borde al pasar el cursor | var(--colors_base_transparent) |
| --buttons_warning_hover_border_radius | Radio de la esquina al pasar el cursor | 100px |
| --buttons_warning_clicked_text_color | Color del texto en el que se hizo clic | var(--colors_base_white) |
| --buttons_warning_clicked_fill_color | Color de relleno en el que se hizo clic | var(--colors_warning_shade) |
| --buttons_warning_clicked_border_width | Ancho del borde al hacer clic | 0 |
| --buttons_warning_clicked_border_color | Color del borde al hacer clic | var(--colors_base_transparent) |
| --buttons_warning_clicked_border_radius | Radio de la esquina al hacer clic | 100px |
| Variable CSS | Descripción | Valor de ejemplo |
|---|---|---|
| --buttons_error_default_text_color | Color de texto predeterminado | var(--colors_base_white) |
| --buttons_error_default_fill_color | Color de relleno predeterminado | var(--colors_error_main) |
| --buttons_error_default_border_width | Ancho de borde predeterminado | 0 |
| --buttons_error_default_border_color | Color de borde predeterminado | var(--colors_base_transparent) |
| --buttons_error_default_border_radius | Radio de esquina predeterminado | 100px |
| --buttons_error_hover_text_color | Color de texto al pasar el cursor | var(--colors_base_white) |
| --buttons_error_hover_fill_color | Color de relleno al pasar el cursor | var(--colors_error_shade) |
| --buttons_error_hover_border_width | Ancho del borde al pasar el cursor | 0 |
| --buttons_error_hover_border_color | Color del borde al pasar el cursor | var(--colors_base_transparent) |
| --buttons_error_hover_border_radius | Radio de la esquina al pasar el cursor | 100px |
| --buttons_error_clicked_text_color | Color del texto en el que se hizo clic | var(--colors_base_white) |
| --buttons_error_clicked_fill_color | Color de relleno en el que se hizo clic | var(--colors_error_shade) |
| --buttons_error_clicked_border_width | Ancho del borde al hacer clic | 0 |
| --buttons_error_clicked_border_color | Color del borde al hacer clic | var(--colors_base_transparent) |
| --buttons_error_clicked_border_radius | Radio de la esquina al hacer clic | 100px |