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 artigo explica como personalizar cores e tipografia no conteúdo do WalkMe usando variáveis CSS do Theming. Você pode aplicar essas variáveis diretamente no CSS personalizado para combinar com a marca da sua organização.
| Variável CSS | Descrição | Valor do exemplo |
|---|---|---|
| --colors_primary_main | Cor principal principal | #ed5725 |
| --colors_primary_tint | Cor de matiz principal | #f17951 |
| --colors_primary_shade | Cor de sombra primária | #cb3f11 |
| --colors_secondary_main | Cor principal secundária | #fe997b |
| --colors_secondary_tint | Cor de tonalidade secundária | #fead95 |
| --colors_secondary_shade | Cor de sombra secundária | #fd602f |
| Variável CSS | Descrição | Valor do exemplo |
|---|---|---|
| --colors_background_main | Cor principal do fundo | #fdede7 |
| --colors_background_tint | Cor da tonalidade de fundo | #fdf1ec |
| --colors_background_shade | Cor da sombra de fundo | #f6aa8e |
| --colors_base_black | Base preta | #000000 |
| --colors_base_white | Base branca | #ffffff |
| --colors_base_transparent | Base transparente | transparente |
| Variável CSS | Descrição | Valor do exemplo |
|---|---|---|
| --colors_text_main | Cor principal do texto | #212529 |
| --colors_text_tint | Cor da tonalidade do texto | #49525a |
| --colors_text_shade | Cor da sombra do texto | #1b1f22 |
| --colors_link_main | Cor principal do link | #2a1d8e |
| --colors_link_tint | Cor da tonalidade do link | #3b29c7 |
| --colors_link_shade | Cor do tom do link | #221772 |
| Variável CSS | Descrição | Valor do exemplo |
|---|---|---|
| --colors_success_main | Cor principal de sucesso | #115f6a |
| --colors_success_tint | Cor da tonalidade de sucesso | #1b9bab |
| --colors_success_shade | Cor da tonalidade de sucesso | #0d4b54 |
| --colors_warning_main | Cor principal de aviso | #f4a939 |
| --colors_warning_tint | Cor de tinta de aviso | #f6ba60 |
| --colors_warning_shade | Cor da tonalidade de aviso | #e38d0d |
| --colors_error_main | Erro na cor principal | #c62437 |
| --colors_error_tint | Erro na cor da tonalidade | #dd4557 |
| --colors_error_shade | Erro na cor da sombra | #a01d2c |
| --colors_info_main | Cor principal da informação | #595959 |
| --colors_info_tint | Cor da tonalidade das informações | #7a7a7a |
| --colors_info_shade | Cor da sombra da informação | #474747 |
| Variável CSS | Descrição | Valor do exemplo |
|---|---|---|
| --fonts_primary_font | Família de fontes principal | walkme-poppins |
| --fonts_secondary_font | Família de fontes secundária | walkme-proxima-nova |
| --typography_body_font_family | Família de fontes do corpo | var(--fonts_primary_font) |
| --typography_body_font_size | Tamanho da fonte do corpo | 14px |
| --typography_body_font_weight | Peso da fonte corporal | normal |
| --typography_body_font_style | Estilo de fonte do corpo | normal |
| --typography_body_text_decoration | Decoração do texto do corpo | nenhum |
| Variável CSS | Descrição | Valor do exemplo |
|---|---|---|
| --typography_title_large_font_family | Grande família de fontes de título | var(--fonts_primary_font) |
| --typography_title_large_font_size | Tamanho da fonte do título grande | 24px |
| --typography_title_large_font_weight | Peso da fonte de título grande | negrito |
| --typography_title_large_font_style | Estilo de fonte de título grande | normal |
| --typography_title_large_text_decoration | Decoração de texto de título grande | nenhum |
| --typography_title_font_family | Família de fontes de título | var(--fonts_primary_font) |
| --typography_title_font_size | Tamanho da fonte do título | 20px |
| --typography_title_font_weight | Peso da fonte do título | negrito |
| --typography_title_font_style | Estilo da fonte do título | normal |
| --typography_title_text_decoration | Decoração do texto do título | nenhum |
| --typography_subtitle_font_family | Família de fontes de legenda | var(--fonts_primary_font) |
| --typography_subtitle_font_size | Tamanho da fonte das legendas | 16px |
| --typography_subtitle_font_weight | Peso da fonte das legendas | negrito |
| --typography_subtitle_font_style | Estilo de fonte de legenda | normal |
| --typography_subtitle_text_decoration | Decoração do texto das legendas | nenhum |
| Variável CSS | Descrição | Valor do exemplo |
|---|---|---|
| --typography_button_text_font_family | Família de fontes do texto do botão | var(--fonts_primary_font) |
| --typography_button_text_font_size | Tamanho da fonte do texto do botão | 16px |
| --typography_button_text_font_weight | Peso da fonte do texto do botão | negrito |
| --typography_button_text_font_style | Estilo da fonte do texto do botão | normal |
| --typography_button_text_text_decoration | Decoração do texto do botão | nenhum |
| --typography_button_text_small_font_family | Família de fontes de texto de botão pequeno | var(--fonts_primary_font) |
| --typography_button_text_small_font_size | Tamanho da fonte do texto do botão pequeno | 16px |
| --typography_button_text_small_font_weight | Peso da fonte de texto do botão pequeno | negrito |
| --typography_button_text_small_font_style | Estilo de fonte de texto de botão pequeno | normal |
| --typography_button_text_small_text_decoration | Decoração de texto com botão pequeno | nenhum |
| Variável CSS | Descrição | Valor do exemplo |
|---|---|---|
| --buttons_primary_default_text_color | Cor do texto padrão | var(--colors_base_white) |
| --buttons_primary_default_fill_color | Cor de preenchimento padrão | var(--colors_primary_main) |
| --buttons_primary_default_border_width | Largura da borda padrão | 0 |
| --buttons_primary_default_border_color | Cor da borda padrão | var(--colors_base_transparent) |
| --buttons_primary_default_border_radius | Raio de canto padrão | 100px |
| --buttons_primary_hover_text_color | Cor do texto sobre o mouse | var(--colors_base_white) |
| --buttons_primary_hover_fill_color | Cor de preenchimento com o mouse | var(--colors_primary_shade) |
| --buttons_primary_hover_border_width | Passe o mouse sobre a largura da borda | 0 |
| --buttons_primary_hover_border_color | Cor da borda do mouse | var(--colors_base_transparent) |
| --buttons_primary_hover_border_radius | Raio de canto do mouse | 100px |
| --buttons_primary_clicked_text_color | Cor do texto clicado | var(--colors_base_white) |
| --buttons_primary_clicked_fill_color | Clicou na cor de preenchimento | var(--colors_primary_shade) |
| --buttons_primary_clicked_border_width | Largura da borda clicada | 0 |
| --buttons_primary_clicked_border_color | Cor da borda clicada | var(--colors_base_transparent) |
| --buttons_primary_clicked_border_radius | Raio de canto clicado | 100px |
| Variável CSS | Descrição | Valor do exemplo |
|---|---|---|
| --buttons_secondary_default_text_color | Cor do texto padrão | var(--colors_primary_main) |
| --buttons_secondary_default_fill_color | Cor de preenchimento padrão | var(--colors_base_transparent) |
| --buttons_secondary_default_border_width | Largura da borda padrão | 1px |
| --buttons_secondary_default_border_color | Cor da borda padrão | var(--colors_primary_main) |
| --buttons_secondary_default_border_radius | Raio de canto padrão | 100px |
| --buttons_secondary_hover_text_color | Cor do texto sobre o mouse | var(--colors_primary_shade) |
| --buttons_secondary_hover_fill_color | Cor de preenchimento com o mouse | var(--colors_base_transparent) |
| --buttons_secondary_hover_border_width | Passe o mouse sobre a largura da borda | 1px |
| --buttons_secondary_hover_border_color | Cor da borda do mouse | var(--colors_primary_shade) |
| --buttons_secondary_hover_border_radius | Raio de canto do mouse | 100px |
| --buttons_secondary_clicked_text_color | Cor do texto clicado | var(--colors_primary_shade) |
| --buttons_secondary_clicked_fill_color | Clicou na cor de preenchimento | var(--colors_base_transparent) |
| --buttons_secondary_clicked_border_width | Largura da borda clicada | 1px |
| --buttons_secondary_clicked_border_color | Cor da borda clicada | var(--colors_primary_shade) |
| --buttons_secondary_clicked_border_radius | Raio de canto clicado | 100px |
| Variável CSS | Descrição | Valor do exemplo |
|---|---|---|
| --buttons_text_link_default_text_color | Cor do texto padrão | var(--colors_primary_main) |
| --buttons_text_link_default_fill_color | Cor de preenchimento padrão | var(--colors_base_transparent) |
| --buttons_text_link_default_border_width | Largura da borda padrão | 0 |
| --buttons_text_link_default_border_color | Cor da borda padrão | var(--colors_base_transparent) |
| --buttons_text_link_default_border_radius | Raio de canto padrão | 0 |
| --buttons_text_link_hover_text_color | Cor do texto sobre o mouse | var(--colors_primary_shade) |
| --buttons_text_link_hover_fill_color | Cor de preenchimento com o mouse | var(--colors_base_transparent) |
| --buttons_text_link_hover_border_width | Passe o mouse sobre a largura da borda | 0 |
| --buttons_text_link_hover_border_color | Cor da borda do mouse | var(--colors_base_transparent) |
| --buttons_text_link_hover_border_radius | Raio de canto do mouse | 0 |
| --buttons_text_link_clicked_text_color | Cor do texto clicado | var(--colors_primary_shade) |
| --buttons_text_link_clicked_fill_color | Clicou na cor de preenchimento | var(--colors_base_transparent) |
| --buttons_text_link_clicked_border_width | Largura da borda clicada | 0 |
| --buttons_text_link_clicked_border_color | Cor da borda clicada | var(--colors_base_transparent) |
| --buttons_text_link_clicked_border_radius | Raio de canto clicado | 0 |
| Variável CSS | Descrição | Valor do exemplo |
|---|---|---|
| --buttons_success_default_text_color | Cor do texto padrão | var(--colors_base_white) |
| --buttons_success_default_fill_color | Cor de preenchimento padrão | var(--colors_success_main) |
| --buttons_success_default_border_width | Largura da borda padrão | 0 |
| --buttons_success_default_border_color | Cor da borda padrão | var(--colors_base_transparent) |
| --buttons_success_default_border_radius | Raio de canto padrão | 100px |
| --buttons_success_hover_text_color | Cor do texto sobre o mouse | var(--colors_base_white) |
| --buttons_success_hover_fill_color | Cor de preenchimento com o mouse | var(--colors_success_shade) |
| --buttons_success_hover_border_width | Passe o mouse sobre a largura da borda | 0 |
| --buttons_success_hover_border_color | Cor da borda do mouse | var(--colors_base_transparent) |
| --buttons_success_hover_border_radius | Raio de canto do mouse | 100px |
| --buttons_success_clicked_text_color | Cor do texto clicado | var(--colors_base_white) |
| --buttons_success_clicked_fill_color | Clicou na cor de preenchimento | var(--colors_success_shade) |
| --buttons_success_clicked_border_width | Largura da borda clicada | 0 |
| --buttons_success_clicked_border_color | Cor da borda clicada | var(--colors_base_transparent) |
| --buttons_success_clicked_border_radius | Raio de canto clicado | 100px |
| Variável CSS | Descrição | Valor do exemplo |
|---|---|---|
| --buttons_warning_default_text_color | Cor do texto padrão | var(--colors_base_white) |
| --buttons_warning_default_fill_color | Cor de preenchimento padrão | var(--colors_warning_main) |
| --buttons_warning_default_border_width | Largura da borda padrão | 0 |
| --buttons_warning_default_border_color | Cor da borda padrão | var(--colors_base_transparent) |
| --buttons_warning_default_border_radius | Raio de canto padrão | 100px |
| --buttons_warning_hover_text_color | Cor do texto sobre o mouse | var(--colors_base_white) |
| --buttons_warning_hover_fill_color | Cor de preenchimento com o mouse | var(--colors_warning_shade) |
| --buttons_warning_hover_border_width | Passe o mouse sobre a largura da borda | 0 |
| --buttons_warning_hover_border_color | Cor da borda do mouse | var(--colors_base_transparent) |
| --buttons_warning_hover_border_radius | Raio de canto do mouse | 100px |
| --buttons_warning_clicked_text_color | Cor do texto clicado | var(--colors_base_white) |
| --buttons_warning_clicked_fill_color | Clicou na cor de preenchimento | var(--colors_warning_shade) |
| --buttons_warning_clicked_border_width | Largura da borda clicada | 0 |
| --buttons_warning_clicked_border_color | Cor da borda clicada | var(--colors_base_transparent) |
| --buttons_warning_clicked_border_radius | Raio de canto clicado | 100px |
| Variável CSS | Descrição | Valor do exemplo |
|---|---|---|
| --buttons_error_default_text_color | Cor do texto padrão | var(--colors_base_white) |
| --buttons_error_default_fill_color | Cor de preenchimento padrão | var(--colors_error_main) |
| --buttons_error_default_border_width | Largura da borda padrão | 0 |
| --buttons_error_default_border_color | Cor da borda padrão | var(--colors_base_transparent) |
| --buttons_error_default_border_radius | Raio de canto padrão | 100px |
| --buttons_error_hover_text_color | Cor do texto sobre o mouse | var(--colors_base_white) |
| --buttons_error_hover_fill_color | Cor de preenchimento com o mouse | var(--colors_error_shade) |
| --buttons_error_hover_border_width | Passe o mouse sobre a largura da borda | 0 |
| --buttons_error_hover_border_color | Cor da borda do mouse | var(--colors_base_transparent) |
| --buttons_error_hover_border_radius | Raio de canto do mouse | 100px |
| --buttons_error_clicked_text_color | Cor do texto clicado | var(--colors_base_white) |
| --buttons_error_clicked_fill_color | Clicou na cor de preenchimento | var(--colors_error_shade) |
| --buttons_error_clicked_border_width | Largura da borda clicada | 0 |
| --buttons_error_clicked_border_color | Cor da borda clicada | var(--colors_base_transparent) |
| --buttons_error_clicked_border_radius | Raio de canto clicado | 100px |