Histórico da Página
...
| Bloco de código | ||||
|---|---|---|---|---|
| ||||
.my-widget .custom-container {
background-color: var(--fs-color-brand-01-base);
padding: 16px;
}
.my-widget .custom-title {
color: var(--fs-color-neutral-light-00);
font-size: 24px;
} |
Exemplo
...
de estilo específico para modo claro ou escuro
...
Caso precise definir estilos específicos para o modo claro e para cada o modo , utilize @media (prefers-color-scheme: <mode>) como escuro, siga como no exemplo abaixo:
| Bloco de código | ||||||
|---|---|---|---|---|---|---|
| ||||||
/* Definições de variáveis para o modo light */ :root@media (prefers-color-scheme: light) { .my--widget .my-custon-button { background-color: var(--fs-color-neutral-light-00); color: var(--fs-color-neutral-dark-70); } } @media (prefers-color-scheme: dark) { custom-color: #0000ff; // azul } /* Definições de variáveis para o modo dark */ html.theme-dark { --my-custom-color: #ff0000; // vermelho } /* uso aplicando a variável em algum elemento */ .my-widget .my-custoncustom-button { background-color: var(--my-fscustom-color-neutral-light-05); color: var(--fs-color-neutral-dark-80); }); // se for modo claro será azul, se for modo escuro será vermelho } |
Dúvidas ou suporte
...
Em caso de dúvidas, procure o time responsável pelo Fluig ou abra um chamado pela central de suporte.
...
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas