2021-07-05 11:40:00 +00:00
# :wind_face: Keywind
Keywind is a component-based Keycloak Login Theme built with [Tailwind CSS ](https://github.com/tailwindlabs/tailwindcss ) and [Alpine.js ](https://github.com/alpinejs/alpine ).
2021-11-21 12:20:00 +00:00
### Styled Pages
- Login
2022-04-05 20:30:00 +00:00
- Login Config TOTP
2021-11-21 12:20:00 +00:00
- Login IDP Link Confirm
2022-12-17 20:00:00 +00:00
- Login OAuth Grant
2022-04-05 20:30:00 +00:00
- Login OTP
2021-11-21 12:20:00 +00:00
- Login Reset Password
- Login Update Password
- Login Update Profile
2022-09-25 19:00:00 +00:00
- Logout Confirm
2021-11-21 12:20:00 +00:00
- Register
2022-10-16 14:00:00 +00:00
### Identity Provider Icons
2021-11-21 12:20:00 +00:00
2022-10-16 14:00:00 +00:00
- Bitbucket
2021-11-21 12:20:00 +00:00
- Facebook
- GitHub
2022-10-16 14:00:00 +00:00
- GitLab
2021-11-21 12:20:00 +00:00
- Google
2022-10-16 14:00:00 +00:00
- Instagram
- LinkedIn
2021-11-21 12:20:00 +00:00
- Microsoft
2022-10-16 14:00:00 +00:00
- OpenID
- Red Hat OpenShift
- PayPal
- Stack Overflow
- Twitter
2021-11-21 12:20:00 +00:00
2021-07-05 11:40:00 +00:00
## 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** :
1. [Deploy Keywind Login Theme ](https://www.keycloak.org/docs/latest/server_development/#deploying-themes )
2. [Create your own Login Theme ](https://www.keycloak.org/docs/latest/server_development/#creating-a-theme )
3. Specify parent theme in [theme properties ](https://www.keycloak.org/docs/latest/server_development/#theme-properties ):
```
parent=keywind
```
2021-11-21 12:20:00 +00:00
4. Brand and customize components with [FreeMaker ](https://freemarker.apache.org/docs/dgui_quickstart_template.html )
2021-07-05 11:40:00 +00:00
2021-11-21 12:20:00 +00:00
## Customization
2021-07-05 11:40:00 +00:00
2021-11-21 12:20:00 +00:00
### Theme
2021-07-05 11:40:00 +00:00
2023-01-14 20:00:00 +00:00
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`
2021-07-05 11:40:00 +00:00
```js
module.exports = {
theme: {
extend: {
colors: {
primary: colors.red,
},
},
},
2021-11-21 12:20:00 +00:00
};
2021-07-05 11:40:00 +00:00
```
Read more about Tailwind CSS configuration in the [documentation ](https://tailwindcss.com/docs/configuration ).
2021-11-21 12:20:00 +00:00
### Components
2021-07-05 11:40:00 +00:00
2023-01-14 20:00:00 +00:00
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`
2021-07-05 11:40:00 +00:00
```
2023-01-14 20:00:00 +00:00
< #macro kw>
< body class = "bg-primary-100" >
2021-07-05 11:40:00 +00:00
< #nested>
2023-01-14 20:00:00 +00:00
< / body >
2021-07-05 11:40:00 +00:00
< /#macro>
```
2021-11-21 12:20:00 +00:00
## Build
2021-07-05 11:40:00 +00:00
When you're ready to deploy your own theme, run the build command to generate a static production build.
```bash
2022-04-05 20:30:00 +00:00
pnpm install
pnpm build
2021-07-05 11:40:00 +00:00
```
