authentik-frosted-theme

Authentik Frosted Glass Theme

Scroll all the way down for preview pics

Please open issues if you find any visual bugs!

Download theme.css, copy content and paste into Admin Dashboard -> System -> Brands -> Authentik Default OR create a new brand under your domain -> Branding settings -> Custom CSS field

if you also want the earth background shown in the demo pics you can download flow.jpg, upload via Admin Interface -> Customization -> Files, and then set it as your default flow background in Brand settings

then go to your brand, scroll down to Atrributes and paste this:

settings:
  theme:
    base: dark
    background: >
      background:
        radial-gradient(circle at 15% 10%, rgba(62, 132, 180, 0.16), transparent 35%),
        radial-gradient(circle at 85% 85%, rgba(72, 79, 112, 0.12), transparent 35%),
        linear-gradient(135deg, #05070b 0%, #0a1018 55%, #080b10 100%);
      background-attachment: fixed;
  layout:
    type: 3-column
  navbar:
    userDisplay: name
  enabledFeatures:
    search: true
    settings: true
    apiDrawer: false
    applicationEdit: false
    notificationDrawer: false

Then, in Admin Interface -> Flow & Stages -> Flows -> default-authentication-flow -> EDIT BUTTON -> Appearance settings -> Layout -> Choose "Stacked"

After that go to Flows and Stages → Stages.

Open Password Stages.

Edit the Password stage used by the authentication flow, commonly named something like:

default-authentication-password

Configure the required password backends, normally at least:

User database + standard password

Enable Allow show password

Save the stage.

Open Flows and Stages → Stages.

Open Identification Stages.

Edit the Identification stage used at the beginning of the authentication flow, commonly:

default-authentication-identification

Set User fields to:

Username
Email

Set Password stage to the Password stage configured in the previous section (dedefault is default-authentication-password unless you changed/customized it)

Enable:

Enable remember me on this device

Then under Passkey settings on the same page, set WebAuthn Authenticator Validation stage to a validation stage that allows WebAuthn devices (default should be passkey-autofill-validation)

Save the stage.

Open **Flows