💬 [Question] Authentik Design Options

[ulfgebhardt]

💬 Question

Present Hardi the design options for Authentik with all data so he can provide the correct formats, Images and other Ressources.

[ulfgebhardt]

This describes what options we have to customize the design in Authentik.

Processes

We currently have the following processes which is each individually designable:

• Authentication (login)
• Authorization
• Enrollment (register)
• Invalidation (logout)

Layout

In Authentik we can display processes in 5 different layout modes:

• Stacked:
• Content left:
• Content right:
• Sidebar left:
• Sidebar right:

Darmkode

There is also a darkmode

Options

We can define the following things out of the box:

• Background
• Logo (global)
• Favicon (global)
• Almost all texts

Furthermore we can mount a custom.css file to adjust the style like colors, margins, ...

Library

Authentik also has an userinterface, which we wont use as of current planning.

He we see the global logo and the AppIcon we can define for each App.

Ressources

• https://docs.goauthentik.io/docs/interfaces/user/customization#custom-css
• https://github.com/goauthentik/authentik/issues/2364
• https://www.youtube.com/watch?v=YawgyM509ng
• https://www.reddit.com/r/selfhosted/comments/18ymm49/how_do_i_enable_dark_mode_in_authentik/

[Hardy-Hart-am-Start]

Login.pdf Register.pdf

Mein Vorschlag für die FELDER

[mahula]

• [x] layout (choice sidebar_right): flow YAMl files / in Authentik admin interface flows
• [ ] dark mode: custom.css (mounted via volume in docker.compose.ym)
• [x] styling (colors, margins, input fields, buttons, etc.): custom.css (mounted via volume in docker.compose.ym)
• [ ] footer links
  • [ ] remove default links
  • [x] add links
• [ ] background
• [ ] mobile