From c39b6ad25ae52e1484005cff4cf2d674db231fec Mon Sep 17 00:00:00 2001
From: 3wc <3wc@doesthisthing.work>
Date: Sat, 27 Apr 2024 13:55:42 -0300
Subject: [PATCH] New approach to custom CSS relying on COPY_ASSETS

---
 .env.sample     |  7 ++++++-
 compose.css.yml | 14 ++++++++++++++
 compose.yml     |  6 ------
 custom.css.tmpl | 24 ++++++++++++++++++++++++
 4 files changed, 44 insertions(+), 7 deletions(-)
 create mode 100644 compose.css.yml
 create mode 100644 custom.css.tmpl

diff --git a/.env.sample b/.env.sample
index 1468df1..676b690 100644
--- a/.env.sample
+++ b/.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
diff --git a/compose.css.yml b/compose.css.yml
new file mode 100644
index 0000000..9702f20
--- /dev/null
+++ b/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
diff --git a/compose.yml b/compose.yml
index 3de9961..1c91ed6 100644
--- a/compose.yml
+++ b/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
diff --git a/custom.css.tmpl b/custom.css.tmpl
new file mode 100644
index 0000000..780eb76
--- /dev/null
+++ b/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);
+}
+