mirror of https://github.com/lukin/keywind.git synced 2025-01-07 08:26:23 +00:00

Keywind is a component-based Keycloak Login Theme built with Tailwind CSS

Find a file

Paul Werner bdf966fdae feat: add password visibility button (#56 ) Co-authored-by: Paul Werner <paul.werner@almig.de> Co-authored-by: Anthony Lukin <anthony@lukin.dev>		2023-12-13 23:00:00 +04:00
html/login	feat: add password visibility button (#56 )	2023-12-13 23:00:00 +04:00
META-INF	Initial commit	2021-07-05 18:40:00 +07:00
scripts	feat: add script to create jar archive	2023-03-11 00:00:00 +04:00
src	feat: add password visibility button (#56 )	2023-12-13 23:00:00 +04:00
theme/keywind/login	feat: add password visibility button (#56 )	2023-12-13 23:00:00 +04:00
.editorconfig	Initial commit	2021-07-05 18:40:00 +07:00
.gitignore	feat: add script to create jar archive	2023-03-11 00:00:00 +04:00
.prettierrc	chore(deps): update dependencies	2021-11-21 18:40:00 +07:00
LICENSE	Initial commit	2021-07-05 18:40:00 +07:00
package.json	feat: add password visibility button (#56 )	2023-12-13 23:00:00 +04:00
pnpm-lock.yaml	test: add login theme tests	2023-09-24 00:00:00 +04:00
pom.xml	test: add login theme tests	2023-09-24 00:00:00 +04:00
postcss.config.js	feat!: migrate from snowpack to vite	2022-09-03 09:00:00 +01:00
preview.png	feat!: add identity provider icons	2022-10-16 18:00:00 +04:00
README.md	feat: add login x509 info page (#52 )	2023-10-22 14:00:00 +02:00
tailwind.config.ts	test: add login theme tests	2023-09-24 00:00:00 +04:00
tsconfig.json	test: add login theme tests	2023-09-24 00:00:00 +04:00
tsconfig.node.json	test: add login theme tests	2023-09-24 00:00:00 +04:00
vite.config.ts	feat: add recovery authn code and webauthn pages (#23 )	2022-11-08 14:57:53 +01:00

README.md

🌬️ Keywind

Keywind is a component-based Keycloak Login Theme built with Tailwind CSS and Alpine.js.

Styled Pages

Error
Login
Login Config TOTP
Login IDP Link Confirm
Login OAuth Grant
Login OTP
Login Page Expired
Login Password
Login Recovery Authn Code Config
Login Recovery Authn Code Input
Login Reset Password
Login Update Password
Login Update Profile
Login Username
Login X.509 Info
Logout Confirm
Register
Select Authenticator
Terms and Conditions
WebAuthn Authenticate
WebAuthn Error
WebAuthn Register

Identity Provider Icons

Apple
Bitbucket
Discord
Facebook
GitHub
GitLab
Google
Instagram
LinkedIn
Microsoft
OpenID
Red Hat OpenShift
PayPal
Slack
Stack Overflow
Twitter

Installation

Keywind has been designed with component-based architecture from the start, and you can customize as little or as much Keywind as you need:

Deploy Keywind Login Theme
Create your own Login Theme
Specify parent theme in theme properties:

parent=keywind

Brand and customize components with FreeMarker

Customization

Theme

When you do need to customize a palette, you can configure your colors under the colors key in the theme section of Tailwind config file:

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: colors.red,
      },
    },
  },
};

Read more about Tailwind CSS configuration in the documentation.

Components

You can update Keywind components in your own child theme. For example, create a copy of the body component and change the background:

theme/mytheme/login/components/atoms/body.ftl

<#macro kw>
  <body class="bg-primary-100">
    <#nested>
  </body>
</#macro>

Build

When you're ready to deploy your own theme, run the build command to generate a static production build.

pnpm install
pnpm build

To deploy a theme as an archive, create a JAR archive with the theme resources.

pnpm build:jar