From 0db0d8eeaf8b869aaf1f59c9ed94630ac78587d6 Mon Sep 17 00:00:00 2001
From: Moritz <moritz.m@local-it.org>
Date: Tue, 14 Nov 2023 17:49:54 +0100
Subject: [PATCH] set theme colors with envs

---
 .env.sample     |  9 ++++++++-
 abra.sh         |  2 +-
 compose.yml     |  9 ++++++++-
 custom.css.tmpl | 16 ++++++++--------
 4 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/.env.sample b/.env.sample
index 92fdb87..9f3cc29 100644
--- a/.env.sample
+++ b/.env.sample
@@ -34,7 +34,14 @@ SECRET_ADMIN_PASS_VERSION=v1
 SECRET_EMAIL_PASS_VERSION=v1
 
 # X_FRAME_OPTIONS_ALLOW_FROM=dashboard.example.org
-AUTHENTIK_COLOR_BACKGROUND_LIGHT=#1c1e21
+# AUTHENTIK_COLOR_FOREGROUND=fafafa
+# AUTHENTIK_COLOR_FOREGROUND_DARKER=bebebe
+# AUTHENTIK_COLOR_FOREGROUND_LINK=5a5cb9
+# AUTHENTIK_COLOR_BACKGROUND=18191a
+# AUTHENTIK_COLOR_BACKGROUND_DARKER=000000
+# AUTHENTIK_COLOR_BACKGROUND_LIGHT=1c1e21
+# AUTHENTIK_COLOR_BACKGROUND_LIGHTISH=212427
+# AUTHENTIK_COLOR_BACKGROUND_LIGHTER=2b2e33
 
 ## FLOW OPTIONS
 # WELCOME_MESSAGE="Welcome to Authentik"
diff --git a/abra.sh b/abra.sh
index f813c59..9322906 100644
--- a/abra.sh
+++ b/abra.sh
@@ -1,4 +1,4 @@
-export CUSTOM_CSS_VERSION=v2
+export CUSTOM_CSS_VERSION=v3
 export FLOW_AUTHENTICATION_VERSION=v3
 export FLOW_INVITATION_VERSION=v1
 export FLOW_INVALIDATION_VERSION=v2
diff --git a/compose.yml b/compose.yml
index f69c5a8..8567146 100644
--- a/compose.yml
+++ b/compose.yml
@@ -18,7 +18,14 @@ x-env: &env
     - AUTHENTIK_EMAIL__FROM
     - AUTHENTIK_LOG_LEVEL
     - AUTHENTIK_SETTINGS__THEME__BACKGROUND
-    - AUTHENTIK_COLOR_BACKGROUND_LIGHT
+    - AUTHENTIK_COLOR_FOREGROUND=${AUTHENTIK_COLOR_FOREGROUND:-fafafa}
+    - AUTHENTIK_COLOR_FOREGROUND_DARKER=${AUTHENTIK_COLOR_FOREGROUND_DARKER:-bebebe}
+    - AUTHENTIK_COLOR_FOREGROUND_LINK=${AUTHENTIK_COLOR_FOREGROUND_LINK:-5a5cb9}
+    - AUTHENTIK_COLOR_BACKGROUND=${AUTHENTIK_COLOR_BACKGROUND:-18191a}
+    - AUTHENTIK_COLOR_BACKGROUND_DARKER=${AUTHENTIK_COLOR_BACKGROUND_DARKER:-000000}
+    - AUTHENTIK_COLOR_BACKGROUND_LIGHT=${AUTHENTIK_COLOR_BACKGROUND_LIGHT:-1c1e21}
+    - AUTHENTIK_COLOR_BACKGROUND_LIGHTISH=${AUTHENTIK_COLOR_BACKGROUND_LIGHTISH:-212427}
+    - AUTHENTIK_COLOR_BACKGROUND_LIGHTER=${AUTHENTIK_COLOR_BACKGROUND_LIGHTER:-2b2e33}
     - AUTHENTIK_FOOTER_LINKS
     - AUTHENTIK_IMPERSONATION
     - WELCOME_MESSAGE
diff --git a/custom.css.tmpl b/custom.css.tmpl
index 780eb76..0b8fe6f 100644
--- a/custom.css.tmpl
+++ b/custom.css.tmpl
@@ -4,16 +4,16 @@
 :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-foreground: #{{ env "AUTHENTIK_COLOR_FOREGROUND" }};
+    --ak-dark-foreground-darker: #{{ env "AUTHENTIK_COLOR_FOREGROUND_DARKER" }};
+    --ak-dark-foreground-link: #{{ env "AUTHENTIK_COLOR_FOREGROUND_LINK" }};
+    --ak-dark-background: #{{ env "AUTHENTIK_COLOR_BACKGROUND" }};
+    --ak-dark-background-darker: #{{ env "AUTHENTIK_COLOR_BACKGROUND_DARKER" }};
 
 
-    --ak-dark-background-light: {{ env "AUTHENTIK_COLOR_BACKGROUND_LIGHT" }};
-    --ak-dark-background-light-ish: #212427;
-    --ak-dark-background-lighter: #2b2e33;
+    --ak-dark-background-light: #{{ env "AUTHENTIK_COLOR_BACKGROUND_LIGHT" }};
+    --ak-dark-background-light-ish: #{{ env "AUTHENTIK_COLOR_BACKGROUND_LIGHTISH" }};
+    --ak-dark-background-lighter: #{{ env "AUTHENTIK_COLOR_BACKGROUND_LIGHTER" }};
 
     --pf-c-background-image--BackgroundImage: var(--ak-flow-background);
     --pf-c-background-image--BackgroundImage-2x: var(--ak-flow-background);