OwnID provides a set of CSS custom properties (variables) that allow you to customize the appearance of the authentication screens to match your application’s design. These variables control various aspects of the drawer’s style, including colors, text, and input fields.
Available CSS Custom Properties
--ownid-flow-color-primary: #0072EF;
--ownid-flow-color-primary-hover: #0165FF;
--ownid-flow-color-primary-disabled: #97C0FF;
--ownid-flow-color-text-primary: #050102;
--ownid-flow-color-secondary: #64748B;
--ownid-flow-font-family: "Helvetica Neue", Helvetica, sans-serif;
--ownid-flow-letter-spacing: .5px;
--ownid-flow-title-font-size: 22px;
--ownid-flow-title-font-weight: 500;
--ownid-flow-title-line-height: 44px;
--ownid-flow-description-font-size: 16px;
--ownid-flow-description-font-weight: 300;
--ownid-flow-description-line-height: 23.2px;
--ownid-flow-note-font-size: 14px;
--ownid-flow-note-font-weight: 300;
--ownid-flow-note-line-height: 20.3px;
--ownid-flow-input-border-color: #E2E8F0;
--ownid-flow-input-border-focus-color: var(--ownid-flow-color-secondary);
--ownid-flow-input-border-radius: 10px;
--ownid-flow-input-font-size: 16px;
--ownid-flow-input-font-weight: 300;
--ownid-flow-input-line-height: 24px;
--ownid-flow-input-background-color: #FFF;
--ownid-flow-input-placeholder-color: #76767D;
--ownid-flow-input-color: #000;
--ownid-flow-input-disabled-color: #737373;
--ownid-flow-input-error-color: #ED0D00;
--ownid-flow-btn-color: #FFF;
--ownid-flow-btn-background-color: var(--ownid-flow-color-primary);
--ownid-flow-btn-hover-background-color: var(--ownid-flow-color-primary-hover);
--ownid-flow-btn-disabled-background-color: var(--ownid-flow-color-primary-disabled);
--ownid-flow-btn-border-radius: 10px;
--ownid-flow-btn-border: 1px solid var(--ownid-flow-btn-background-color);
--ownid-flow-btn-font-size: 18px;
--ownid-flow-btn-font-weight: 500;
--ownid-flow-btn-line-height: 23px;
--ownid-flow-btn-text-transform: none;
--ownid-flow-btn-secondary-color: var(--ownid-flow-color-primary);
--ownid-flow-btn-secondary-hover-color: var(--ownid-flow-color-primary-hover);
--ownid-flow-btn-secondary-disabled-color: var(--ownid-flow-color-primary-disabled);
--ownid-flow-btn-secondary-border-radius: 10px;
--ownid-flow-btn-secondary-border: none;
--ownid-flow-btn-secondary-background-color: none;
--ownid-flow-btn-secondary-font-size: 14px;
--ownid-flow-btn-secondary-font-weight: 300;
--ownid-flow-btn-secondary-line-height: 20px;
--ownid-flow-btn-secondary-text-transform: none;
--ownid-flow-btn-tertiary-color: var(--ownid-flow-color-text-primary);
--ownid-flow-btn-tertiary-hover-color: var(--ownid-flow-color-primary-hover);
--ownid-flow-btn-tertiary-border: 1px solid var(--ownid-flow-color-text-primary);
--ownid-flow-btn-tertiary-background-color: transparent;
--ownid-flow-btn-tertiary-font-size: 18px;
--ownid-flow-btn-tertiary-font-weight: 500;
--ownid-flow-btn-tertiary-line-height: 20px;
Customization Example
To customize the OwnID drawer, you can override these CSS custom properties in your stylesheet. Here’s an example of how to change the primary color, hover color, and disabled color of the drawer:
ownid-flow {
--ownid-drawer-font-family: "Comic Sans MS", Arial, serif;
--ownid-flow-color-primary: #0072EF;
--ownid-flow-color-primary-hover: #0165FF;
--ownid-flow-color-primary-disabled: #97C0FF;
--ownid-flow-color-text-primary: #050102;
--ownid-flow-color-secondary: #64748B;
}
