​
CSS Variables

You can use CSS variables to customize the appearance of hanko-auth and hanko-profile elements to match your design requirements. The complete list of available CSS variables and their default values is shown below: 
hanko-auth,
hanko-profile {
  /* Color Scheme */
  --color: #333333;
  --color-shade-1: #8f9095;
  --color-shade-2: #e5e6ef;

  --brand-color: #506cf0;
  --brand-color-shade-1: #6b84fb;
  --brand-contrast-color: white;

  --background-color: white;
  --error-color: #e82020;
  --link-color: #506cf0;

  /* Font Styles */
  --font-weight: 400;
  --font-size: 16px;
  --font-family: sans-serif;

  /* Border Styles */
  --border-radius: 8px;
  --border-style: solid;
  --border-width: 1px;

  /* Item Styles */
  --item-height: 34px;
  --item-margin: 0.5rem 0;

  /* Container Styles */
  --container-padding: 30px;
  --container-max-width: 410px;

  /* Headline Styles */
  --headline1-font-size: 24px;
  --headline1-font-weight: 600;
  --headline1-margin: 0 0 1rem;

  --headline2-font-size: 16px;
  --headline2-font-weight: 600;
  --headline2-margin: 1rem 0 0.5rem;

  /* Divider Styles */
  --divider-padding: 0 42px;
  --divider-visibility: visible;

  /* Link Styles */
  --link-text-decoration: none;
  --link-text-decoration-hover: underline;

  /* Input Styles */
  --input-min-width: 14em;

  /* Button Styles */
  --button-min-width: max-content;
}

​
CSS Shadow Parts

In addition to CSS variables, you can use the ::part selector to customize specific elements within the components. Note that shadow parts only work when the web components are attached to the shadow DOM, which is the default behavior. You can enable the shadow DOM for the components using the following code: 
register("https://hanko.yourdomain.com", { shadow: true });

// equals
register("https://hanko.yourdomain.com");
NameDescription
containerthe UI container
headline1the “h1” headlines
headline2the “h2” headlines
paragraphthe paragraph elements
buttonevery button element
primary-buttonthe primary button
secondary-buttonthe secondary button on the email login page
inputevery input field
text-inputevery input field not used for passcodes
passcode-inputthe passcode input fields
linkthe links in the footer section
errorthe error message container
error-textthe error message
dividerthe horizontal divider on the login page
divider-textthe divider text
divider-linethe line before and after the divider-text
form-itemthe container of a form item, e.g. an input field or a button

​
Examples

The following examples show how to apply custom styles to specific shadow parts:

​
Stacking hanko-auth component fields vertically

This example demonstrates how to force the input fields and buttons within the hanko-auth component to stack vertically. The ::part(form-item) selector targets the form-item shadow part within the hanko-auth component, which is applied using the tag name. 
<style>
  hanko-auth::part(form-item) {
    /* Force the input fields and buttons are on top of each other */
    min-width: 100%;
  }
</style>
<hanko-auth></hanko-auth>

​
Modifying the main headlines for hanko components

This example shows how to adjust the main headlines for all hanko components by targeting the headline1 shadow part. The .hankoComponent::part(headline1) selector applies the styles to the headline1 shadow part within elements that have the hankoComponent class. 
<style>
  .hankoComponent::part(headline1) {
    /* Adjust the main headlines for all hanko components */
    font-size: 1.3em;
    font-weight: 400;
  }
</style>

<hanko-auth class="hankoComponent"></hanko-auth>
<hanko-profile class="hankoComponent"></hanko-profile>

​
Applying box shadow on button of hanko-auth component

In this example, a box shadow is applied to the button shadow part of the hanko-auth component when hovering over it. The #hankoAuth::part(button):hover selector targets the button shadow part within the hanko-auth component using the ID selector #hankoAuth and applies the styles when the :hover pseudo-class is active. 
<style>
  #hankoAuth::part(button):hover {
    box-shadow: 3px 3px 2px #888;
  }
</style>

<hanko-auth id="hankoAuth"></hanko-auth>
For more examples and design inspiration, check out our blog post, Make Hanko Components Shine.