Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lukin/keywind
Keywind is a component-based Keycloak Login Theme built with Tailwind CSS
https://github.com/lukin/keywind
keycloak keycloak-theme tailwindcss
Last synced: about 1 month ago
JSON representation
Keywind is a component-based Keycloak Login Theme built with Tailwind CSS
- Host: GitHub
- URL: https://github.com/lukin/keywind
- Owner: lukin
- License: apache-2.0
- Created: 2021-06-25T18:18:00.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2024-02-09T13:50:27.000Z (5 months ago)
- Last Synced: 2024-02-10T10:11:03.755Z (5 months ago)
- Topics: keycloak, keycloak-theme, tailwindcss
- Language: HTML
- Homepage:
- Size: 520 KB
- Stars: 592
- Watchers: 13
- Forks: 196
- Open Issues: 35
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-keycloak - Keywind: Component-based theme built with Tailwind CSS
README
# :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).
### 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**:
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
```
4. Brand and customize components with [FreeMarker](https://freemarker.apache.org/docs/dgui_quickstart_template.html)
## 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`
```js
module.exports = {
theme: {
extend: {
colors: {
primary: colors.red,
},
},
},
};
```
Read more about Tailwind CSS configuration in the [documentation](https://tailwindcss.com/docs/configuration).
### 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>
<#nested>
#macro>
```
## Build
When you're ready to deploy your own theme, run the build command to generate a static production build.
```bash
pnpm install
pnpm build
```
To deploy a theme as an archive, create a JAR archive with the theme resources.
```bash
pnpm build:jar
```