add custom css

abra.sh

@@ -0,0 +1 @@
+export CUSTOM_CSS_VERSION=v1

compose.yml

@@ -19,6 +19,7 @@ x-env: &env
     - AUTHENTIK_EMAIL__TIMEOUT
     - AUTHENTIK_EMAIL__FROM
     - AUTHENTIK_LOG_LEVEL
+    - AUTHENTIK_SETTINGS__THEME__BACKGROUND
 
 
 version: '3.8'
@@ -34,6 +35,9 @@ services:
     volumes:
       - media:/media
       - custom-templates:/templates
+    configs:
+      - source: custom_css
+        target: /web/dist/custom.css
     networks:
       - internal
       - proxy
@@ -141,3 +145,9 @@ volumes:
   media:
   custom-templates:
   database:
+
+configs:
+  custom_css:
+    name: ${STACK_NAME}_custom_css_${CUSTOM_CSS_VERSION}
+    file: custom.css.tmpl
+    template_driver: golang

custom.css.tmpl

@@ -0,0 +1,24 @@
+/* my custom css */
+
+
+:root {
+    --ak-accent: #fd4b2d;
+
+    --ak-dark-foreground: #fafafa;
+    --ak-dark-foreground-darker: #bebebe;
+    --ak-dark-foreground-link: #5a5cb9;
+    --ak-dark-background: #18191a;
+    --ak-dark-background-darker: #000000;
+
+    --ak-dark-background-light: #3f607d;
+
+    --ak-dark-background-light-ish: #212427;
+    --ak-dark-background-lighter: #2b2e33;
+
+    --pf-c-background-image--BackgroundImage: var(--ak-flow-background);
+    --pf-c-background-image--BackgroundImage-2x: var(--ak-flow-background);
+    --pf-c-background-image--BackgroundImage--sm: var(--ak-flow-background);
+    --pf-c-background-image--BackgroundImage--sm-2x: var(--ak-flow-background);
+    --pf-c-background-image--BackgroundImage--lg: var(--ak-flow-background);
+}
+