A frosted-glass custom CSS theme for authentik.

Compatible with 2026.8

1. Download theme.css and copy its entire contents.
2. In the authentik Admin interface, go to System → Brands.
3. Edit authentik Default or the Brand assigned to your domain.
4. Under Branding settings, replace the contents of Custom CSS with the downloaded stylesheet, then save the Brand.
5. Refresh the page. If an older version is still visible, perform a hard refresh or clear the browser cache.

To use the Earth image shown in the screenshots:

1. Download flow.jpg.
2. In the Admin interface, go to Customization → Files and upload it.
3. Edit your Brand and select the uploaded image as its default flow background.

The following Brand attributes reproduce the dark background, three-column layout, and navigation options used for the screenshots. They are optional and are not required for the login theme.

Add them under System → Brands → your Brand → Attributes:

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

The theme does not add a label by default. To display a domain or company name beside the logo, find this line in theme.css:

--iu-brand-label: none;

Replace none with a quoted label:

--iu-brand-label: "example.com";