--- title: Temas source: https://tdn.totvs.com/display/fluig/Temas path: \Plataforma Documentação técnica\Personalização\Temas.md --- # Índice - 1 [Obtendo o tema via CSS](#Temas-ObtendootemaviaCSS) - 2 [Obtendo o tema via FTL](#Temas-ObtendootemaviaFTL) - 3 [Obtendo o tema via JavaScript](#Temas-ObtendootemaviaJavaScript) - 4 [Variáveis CSS do tema responsivo](#Temas-VariáveisCSSdotemaresponsivo) - 5 [Descrição das variáveis](#Temas-Descriçãodasvariáveis) - 6 [Como utilizar as variáveis em meu desenvolvimento](#Temas-Comoutilizarasvariáveisemmeudesenvolvimento) Este guia visa orientar os desenvolvedores a como obter que está em uso no TOTVS Fluig Plataforma. Hoje temos 3 formas de obter o tema selecionado em sua empresa. Via **CSS**, via **FTL** e via **JavaScript**. ### **Obtendo o tema via CSS** --- Hoje, no Fluig Plataforma, será adicionado sempre na tag da página, o código do tema selecionado como uma classe, conforme exemplo abaixo: ![](..\..\images\tag%20body.png) Com essa classe sendo aplicada no body, você pode construir o seu CSS como no exemplo abaixo: ![](..\..\images\css%20exemplo.png) ### Obtendo o tema via FTL --- Também é possível obter o tema via FTL através da variável freemarker `*${fluigThemeCode}*` com o código do tema selecionado, como no exemplo abaixo: ![](..\..\images\tema%20via%20FLT.png) Recomendamos que seja feita essa validação para garantir que o código funcione corretamente. Dessa forma, a variável `*${fluigThemeCode}*` será preenchida com o código do tema selecionado, permitindo que seja utilizada da forma que o desenvolvedor preferir. ### Obtendo o tema via JavaScript --- Para obter o tema selecionado via JavaScript, é necessário acessar uma API Rest que retorna o código do tema, como no exemplo abaixo: ![](..\..\images\tema%20via%20javascript.png) ### Variáveis CSS do tema responsivo --- As variáveis CSS abaixo são exportadas **somente pelo tema responsivo**. Nos demais temas **não é possível obter essas variáveis**. Hoje, no tema responsivo, é exportado diversas variáveis CSS para auxiliar na construção do tema da sua empresa. - Para maiores informações sobre Variáveis CSS, acesse o link de referência: ### Descrição das variáveis --- | Variável | Descrição | | --- | --- | | --themeResponsiveBgColor | Hexadecimal da cor de fundo da página | | --themeResponsiveBgContrastColor | Hexadecimal da cor contrastante da cor de fundo da página | | --themeResponsiveMenuBgColor | Hexadecimal da cor de fundo do menu | | --themeResponsiveMenuBgHoverColor | Hexadecimal da cor de hover dos itens de menu | | --themeResponsiveMenuActiveColor | Hexadecimal da cor do menu ativo | | --themeResponsiveMenuActionColor | Hexadecimal da cor do menu de ação | | --themeResponsiveHeaderBgColor | Hexadecimal da cor de fundo do header | | --themeResponsiveHeaderActionColor | Hexadecimal da cor das ações no header | | --themeResponsiveBrandColor | Hexadecimal da cor da marca da empresa | | --themeResponsiveBgImage | Url da imagem de fundo da página | | --themeResponsiveHeaderBgImage | Url da imagem de fundo do header | | --themeResponsiveBgImageRepeat | Propriedade com a informação se a imagem de fundo da página irá se repetir (repeat | no-repeat) | | --themeResponsiveBgImageCover | Propriedade com a informação se a imagem de fundo da página irá ocupar o espaço todo disponível (cover | unset) | | --themeResponsiveHeaderBgImageRepeat | Propriedade com a informação se a imagem de fundo do header irá se repetir (repeat | no-repeat) | | --themeResponsiveHeaderBgImageCover | Propriedade com a informação se a imagem de fundo do header irá ocupar o espaço todo disponível (cover | unset) | ### Como utilizar as variáveis em meu desenvolvimento --- Para utilizar essas variáveis CSS, pode ser usado o exemplo abaixo: ![](..\..\images\variavel%20desenvolvimento.png)