set theme colors with envs

.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"

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

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

custom.css.tmpl

@@ -4,16 +4,16 @@
 :root {
     --ak-accent: #fd4b2d;
 
-    --ak-dark-foreground: #fafafa;
+    --ak-dark-foreground: #{{ env "AUTHENTIK_COLOR_FOREGROUND" }};
-    --ak-dark-foreground-darker: #bebebe;
+    --ak-dark-foreground-darker: #{{ env "AUTHENTIK_COLOR_FOREGROUND_DARKER" }};
-    --ak-dark-foreground-link: #5a5cb9;
+    --ak-dark-foreground-link: #{{ env "AUTHENTIK_COLOR_FOREGROUND_LINK" }};
-    --ak-dark-background: #18191a;
+    --ak-dark-background: #{{ env "AUTHENTIK_COLOR_BACKGROUND" }};
-    --ak-dark-background-darker: #000000;
+    --ak-dark-background-darker: #{{ env "AUTHENTIK_COLOR_BACKGROUND_DARKER" }};
 
 
-    --ak-dark-background-light: {{ env "AUTHENTIK_COLOR_BACKGROUND_LIGHT" }};
+    --ak-dark-background-light: #{{ env "AUTHENTIK_COLOR_BACKGROUND_LIGHT" }};
-    --ak-dark-background-light-ish: #212427;
+    --ak-dark-background-light-ish: #{{ env "AUTHENTIK_COLOR_BACKGROUND_LIGHTISH" }};
-    --ak-dark-background-lighter: #2b2e33;
+    --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);