Tema forkado do Keywind para ser utilizado como tema de autenticação do keycloak.
O Keywind foi projetado com arquitetura baseada em componentes desde o início, e você pode personalizar o Keywind o quanto precisar:
- Deploy Keywind Login Theme
- Create your own Login Theme
- Specify parent theme in theme properties:
parent=keywind
- Marque e personalize os componentes com FreeMarker
Quando for necessário personalizar uma paleta, você poderá configurar as cores na chave colors na seção theme do arquivo de configuração do Tailwind:
tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: colors.red,
},
},
},
};Atualmente usamos a paleta de cores do @pierdigital/shared-token, configurando os botões, links, etc.
Você pode atualizar os componentes do Keywind em seu próprio tema filho. Por exemplo, crie uma cópia do componente body e altere o plano de fundo:
theme/mytheme/login/components/atoms/body.ftl
<#macro kw>
<body class="bg-primary-100">
<#nested>
</body>
</#macro>
Quando estiver pronto para implantar seu próprio tema, execute o comando de compilação para gerar uma compilação de produção estática.
Além disso, o arquivo .jar necessário para ser usado no keycloak será criado na pasta /out.
pnpm install
pnpm build:jarO projeto está implementado para usar a localização/internacionalização do Keycloak, por conta disso, toda e qualquer criação de chave deve ser feita la e replicada aqui.
Atualmente, temos as seguintes chaves customizadas:
Basicamente, é necessário dois passos:
1 - Copiar o .jar criado na pasta /out na pasta dentro do container do keycloak alvo /opt/keycloak/providers/.
2 - Reiniciar o container do keycloak.
3 - Selecionar o tema no realm alvo.