To change the appearance of the login screen for your application, navigate to Applications. Click “settings” on the appropriate application then click the “Branding” tab below the name of your application.
Good to know: You can try out different combinations of branding options in real time while developing. Simply change the appropriate option and reload the page displaying the login screen.
Kenni ensures that the login experience remains cohesive with your brand image and provides a personalized touch for your users by allowing the customization of a set of options:
- Logo - Use the same logo as the application your end-user will be redirected to. If your application supports dark mode, and your logo would be presented differently on a dark background, use the dark-mode tab to upload a dark-mode logo. In cases where your logo presents the same on both light and dark backgrounds, uploading a light-mode logo only would suffice.
- Theme - Contains a set of customization options related to branding for your application
- Accent color - a curated set of colors used to accentuate typographical, input and button components. Choose a color that closely resembles your application’s brand.
- Border radius - The border radius of text fields, buttons, cards and images. A full border-radius would for instance cause your logo to be displayed in a circular container.
- Appearance - Dictates the appearance of your login screen:
- Inherit - The login screen will either be displayed in light mode, or dark mode, depending on the user’s system preference. To make the redirect to the login screen less jarring to your end user, do not choose this option if your application only supports one color mode.
- Light - The login screen will always only be presented in light mode. Choose this option if your application only supports light mode.
- Dark - The login screen will always only be presented in dark mode. Choose this option if your application only supports dark mode.
Overriding your application’s default appearance
Good to know: Use the
appearance authorization parameter to override the setting chosen under theme settings.In cases where your application allows overriding the user’s system preference for light or dark mode, having the login screen default to a predefined appearance would not suffice. The user might have updated their preferred color mode for your application to a value that is different from their system preference. In this case, use the
appearance authorization param in the authorization request to ensure the login screen matches your user’s preference. Valid values are light or dark.