customize css

.env.sample

@@ -18,6 +18,10 @@ PRODUCT_NAME="Support"
 ORGANIZATION="Test Org"
 # TIMEZONE="Europe/Berlin"
 LOCALE="de-de"
+#TEXT_MUTED="#7e7e7e"
+#MENU_TEXT="#7e7e7e"
+#BACKGROUND_1="#7e7e7e"
+#BACKGROUND_2="#7e7e7e"
 
 ADMIN_EMAIL=admin@example.com
 SMTP_HOST=mail.example.com

abra.sh

@@ -1,5 +1,6 @@
 export ENTRYPOINT_VERSION=v2
 export AUTO_WIZARD_VERSION=v1
+export CUSTOM_STYLE_VERSION=v1
 
 get_setting_changes() {
     /custom-entrypoint.sh "rails r 'puts JSON.pretty_generate(JSON.parse(Setting.all.select{ |setting| setting.state_current != setting.state_initial }.map { |setting| {name: setting.name, value: setting.state_current[\""value\""]} } .to_json))'"
@@ -50,3 +51,9 @@ set_logo() {
     "
     abra app cmd -T -C support.dev.local-it.cloud zammad-railsserver rails_run "$(printf "%q " $COMMAND )"
 }
+
+customize(){
+    apt update
+    apt install nodejs npm
+    /custom-entrypoint.sh "rails assets:precompile"
+}

compose.yml

@@ -37,6 +37,10 @@ x-shared:
       ZAMMAD_SESSION_JOBS:
       ZAMMAD_PROCESS_SCHEDULED:
       ZAMMAD_PROCESS_DELAYED_JOBS_WORKERS:
+      TEXT_MUTED: "${TEXT_MUTED:-hsl(213, 3%, 64%)}"
+      MENU_TEXT: "${MENU_TEXT:-hsl(0, 0%, 74%)}"
+      BACKGROUND_1: "${BACKGROUND_1:-hsl(231, 9%, 16%)}"
+      BACKGROUND_2: "${BACKGROUND_2:-hsl(233, 9%, 19%)}"
       PRODUCT_NAME:
       ORGANIZATION:
       LOCALE:
@@ -66,6 +70,8 @@ x-shared:
           mode: 0555
         - source: auto_wizard
           target: /opt/zammad/contrib/auto_wizard.json
+        - source: custom_style
+          target: /opt/zammad/app/assets/stylesheets/custom/custom_style.css
     secrets:
       - db_password
       - smtp_password
@@ -246,6 +252,10 @@ configs:
     name: ${STACK_NAME}_auto_wizard_${AUTO_WIZARD_VERSION}
     file: auto_wizard.json.tmpl
     template_driver: golang
+  custom_style:
+    name: ${STACK_NAME}_custom_style_${CUSTOM_STYLE_VERSION}
+    file: custom_style.css.tmpl
+    template_driver: golang
 
 secrets:
   db_password:

custom_style.css.tmpl

@@ -0,0 +1,6 @@
+:root {
+    --text-muted: {{ env "TEXT_MUTED" }};
+    --menu-text: {{ env "MENU_TEXT" }};
+    --background-quaternary: {{ env "BACKGROUND_1" }};
+    --background-tertiary: {{ env "BACKGROUND_2" }};
+}