New approach to custom CSS relying on COPY_ASSETS

.env.sample

@@ -34,7 +34,6 @@ SECRET_ADMIN_PASS_VERSION=v1
 SECRET_EMAIL_PASS_VERSION=v1
 
 # X_FRAME_OPTIONS_ALLOW_FROM=dashboard.example.org
-AUTHENTIK_COLOR_BACKGROUND_LIGHT=#1c1e21
 
 ## FLOW OPTIONS
 # WELCOME_MESSAGE="Welcome to Authentik"
@@ -47,6 +46,12 @@ COPY_ASSETS="flow_background.jpg|app:/web/dist/assets/images/"
 COPY_ASSETS="$COPY_ASSETS icon_left_brand.svg|app:/web/dist/assets/icons/"
 COPY_ASSETS="$COPY_ASSETS icon.png|app:/web/dist/assets/icons/"
 
+# Default CSS customisation, just background colour
+COMPOSE_FILE="$COMPOSE_FILE:compose.css.yml"
+AUTHENTIK_COLOR_BACKGROUND_LIGHT=#1c1e21
+# Custommise the entire custom CSS file
+#COMPOSE_FILE="$COMPOSE_FILE:compose.css.yml"
+
 # COMPOSE_FILE="$COMPOSE_FILE:compose.nextcloud.yml"
 # NEXTCLOUD_DOMAIN=nextcloud.example.com
 # SECRET_NEXTCLOUD_ID_VERSION=v1

compose.css.yml

@@ -0,0 +1,14 @@
+---
+version: '3.8'
+
+services:
+  app:
+    configs: 
+      - source: custom_css
+        target: /web/dist/custom.css
+
+configs:
+  custom_css:
+    name: ${STACK_NAME}_custom_css_${CUSTOM_CSS_VERSION}
+    file: custom.css.tmpl
+    template_driver: golang

compose.yml

@@ -47,7 +47,6 @@ services:
       - media:/media
       - assets:/web/dist/assets
       - templates:/templates
-      - webdist:/web/dist
     networks:
       - internal
       - proxy
@@ -178,17 +177,12 @@ networks:
 
 volumes:
   backups:
-  webdist:
   media:
   templates:
   assets:
   database:
 
 configs:
-  custom_css:
-    name: ${STACK_NAME}_custom_css_${CUSTOM_CSS_VERSION}
-    file: custom.css.tmpl
-    template_driver: golang
   flow_authentication:
     name: ${STACK_NAME}_flow_authentication_${FLOW_AUTHENTICATION_VERSION}
     file: flow_authentication.yaml.tmpl

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: {{ env "AUTHENTIK_COLOR_BACKGROUND_LIGHT" }};
+    --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);
+}
+