From 94344d29c313da29c432bd6272333729adfae7a5 Mon Sep 17 00:00:00 2001
From: Philipp Rothmann <philipprothmann@posteo.de>
Date: Tue, 11 Oct 2022 13:05:29 +0200
Subject: [PATCH] add custom css

---
 abra.sh         |  1 +
 compose.yml     | 10 ++++++++++
 custom.css.tmpl | 24 ++++++++++++++++++++++++
 3 files changed, 35 insertions(+)
 create mode 100644 abra.sh
 create mode 100644 custom.css.tmpl

diff --git a/abra.sh b/abra.sh
new file mode 100644
index 0000000..f4b3f2a
--- /dev/null
+++ b/abra.sh
@@ -0,0 +1 @@
+export CUSTOM_CSS_VERSION=v1
diff --git a/compose.yml b/compose.yml
index a5f96f8..e1af4a0 100644
--- a/compose.yml
+++ b/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
diff --git a/custom.css.tmpl b/custom.css.tmpl
new file mode 100644
index 0000000..4ebe41c
--- /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: #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);
+}
+