Skip to content

Latest commit

 

History

History
85 lines (63 loc) · 2.24 KB

README.md

File metadata and controls

85 lines (63 loc) · 2.24 KB
Raw

🌬️ Keywind

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

Preview

Styled Pages

  • Login
  • Login Config TOTP
  • Login IDP Link Confirm
  • Login OTP
  • Login Reset Password
  • Login Update Password
  • Login Update Profile
  • Register

Social Media Icons

  • Facebook
  • GitHub
  • Google
  • Microsoft

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
  2. Create your own Login Theme
  3. Specify parent theme in theme properties:
parent=keywind
  1. Brand and customize components with FreeMaker

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.js file:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: colors.red,
      },
    },
  },
};

Read more about Tailwind CSS configuration in the documentation.

Components

You can inherit Keywind components in your own theme. For example, to resize the primary button you should create a styled theme/mytheme/components/button/primary.ftl file:

<#macro kw component="button" rest...>
  <${component}
    class="bg-primary-600 flex justify-center px-6 py-3 relative rounded-lg text-md text-white w-full focus:outline-none focus:ring-2 focus:ring-primary-600 focus:ring-offset-2 hover:bg-primary-700"
    <#list rest as attrName, attrValue>
      ${attrName}="${attrValue}"
    </#list>
  >
    <#nested>
  </${component}>
</#macro>

Build and run

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

pnpm install
pnpm build
docker-compose up