Configurando Tema 🎨

O tema é utilizado pela maioria dos componentes como referência para definir a paleta de cores e o contraste dos textos.

Opções da paleta customizáveis

Atualmente, os componentes distribuem a paleta de cores de acordo com seu nível de importância.

📝 Obs: A distribuição da paleta de cores varia conforme o componente. Por isso, a visualização do preview de cada um pode auxiliar na personalização correta das cores.

• primaryClr - Cor em hexadecimal (ex: #f00), distribuída como a tonalidade principal do componente.
• secondaryClr - Cor distribuída de forma moderada pelo componente.
• terciaryClr - Cor distribuída de forma sutil pelo componente.

Para garantir o contraste de textos e ícones nessas áreas, recomenda-se personalizar também as cores de contraste para cada tipo de paleta.

• primaryTextClr
• secondaryTextClr
• terciaryTextClr

Como configurar

Por padrão, a aplicação define o tema dos componentes por meio de uma propriedade do localStorage chamada prosas-theme, respeitando as limitações de armazenamento do localStorage.

Ex:

const theme = {
  primaryClr: '#f24b4c',
  primaryTextClr: '#fff',
  secondaryClr: '...',
  secondaryTextClr: '...',
  terciaryClr: '...',
  terciaryTextClr: '...',
}

/* Importando do bundle geral => webcomponents.bundle.js
  o prosas-sdk exporta uma função utilitária para facilitar na
  criação dessa entrada no localStorage. */
window.setProsasTheme(theme) // precisa que o bundle tenha carregado

// ou

// Importando do bundle isolado => ex: show_edital.bundle.js
localStorage.setItem('prosas-theme', JSON.stringify(theme)) // independe do bundle

📝 Obs: A aplicação utiliza valores padrão caso nenhuma cor seja especificada. Por exemplo, se definirmos const theme = { primaryClr: '#f24b4c', primaryTextClr: '#fff' }, as demais cores (como secondaryClr e terciaryClr) não serão afetadas e permanecerão com seus valores padrão.