Customization

Since flows can be executed authenticated or unauthenticated, the default settings can be set via brands attributes.

settings.theme.base

Configure the base color scheme. Defaults to automatic, which switches between dark and light mode based on the users' browsers' preference. Choices: automatic, dark, light.

Global customization

Custom CSS

To further modify the look of authentik, a custom CSS file can be created. Creating such a file is outside the scope of this document.

docker-compose

Create a docker-compose.override.yml file and add this block to mount the custom CSS file:

version: "3.2"

services:
    server:
        volumes:
            - ./my-css-file.css:/web/dist/custom.css

Afterwards, run the upgrade commands from the latest release notes.

Kubernetes

Create a ConfigMap with your css file:

apiVersion: v1
kind: ConfigMap
metadata:
    name: authentik-custom-css
    namespace: authentik
data:
    custom.css: |
        ...

Then, in the helm chart add this to your values.yaml file:

volumes:
    - name: custom-css
      configMap:
          name: authentik-custom-css
volumeMounts:
    - name: custom-css
      mountPath: /web/dist/custom.css
      subPath: custom.css

Afterwards, run the upgrade commands from the latest release notes.