Optimized CSS and LDAP role

group_vars/all/07_applications.yml

@@ -80,6 +80,7 @@ defaults_applications:
     lam:
       version:                        "latest"
       administrator_password:         "{{user_administrator_initial_password}}" # CHANGE for security reasons
+      oauth2_proxy_active:            true
     openldap:
       version:                        "latest"
       network:
@@ -154,7 +155,8 @@ defaults_applications:
 
   ## Open Project
   openproject:
-    version:            "13" # Update when available. Sadly no rolling release implemented
+    version:              "13" # Update when available. Sadly no rolling release implemented
+    oauth2_proxy_active:  true
 
   ## Peertube
   peertube:
@@ -162,8 +164,9 @@ defaults_applications:
 
   ## PHPMyAdmin
   phpmyadmin:
-    version:         "latest"
+    version:              "latest"
-    autologin:       false     # This is a high security risk. Just activate this option if you know what you're doing
+    autologin:            false     # This is a high security risk. Just activate this option if you know what you're doing
+    oauth2_proxy_active:  true
 
   ## Pixelfed
   pixelfed:

group_vars/all/13_theming.yml

@@ -4,9 +4,7 @@ global_theming:
     colors:
       # General Colors
       base: "#001f3f"
-
+      
-      # Special Action Colors
-
       # Sucess Color
       success: "#B2D3B2"
       # As the warning color – a light brown (earth)
@@ -15,4 +13,8 @@ global_theming:
       error: "#DC3545"
       # As the info color – a very light blue (symbolizing the sky)
       info: "#F0F8FF"
+    filters:
+      saturation_change:  100
+      hue_shift:          0
+
 global_theming_enabled: true

roles/backup-docker-to-local/tasks/seed-database-to-backup.yml

@@ -1,3 +1,5 @@
+# This file is also used by docker-matrix-compose
+
 - name: Display all database variables
   debug:
     msg: |

roles/docker-keycloak/vars/main.yml

@@ -1,4 +1,5 @@
-application_id:  	      "keycloak"
+application_id:  	  "keycloak"
-database_type:          "postgres"
+database_type:      "postgres"
-database_password:      "{{applications.keycloak.database_password}}"
+database_password:  "{{applications.keycloak.database_password}}"
-ldap_enabled:   True
+ldap_enabled:       True
+realm:              "{{primary_domain}}" # This is the name of the default realm which is used by the applications

roles/docker-ldap/vars/main.yml

@@ -5,7 +5,7 @@ ldap_enabled:         True
 
 # OAuth2 Proxy Configuration
 oauth2_proxy_upstream_application_and_port: "{{ applications.ldap.webinterface }}:{% if applications.ldap.webinterface == 'phpldapadmin' %}8080{% else %}80{% endif %}"
-oauth2_proxy_active:                        true
+oauth2_proxy_active:                        "{{ applications.ldap.lam.oauth2_proxy_active | bool }}"
 
 enable_wildcard_certificate:  false # Activate dedicated Certificate
 

roles/docker-matomo/README.md

@@ -1,6 +1,6 @@
 # Docker Matomo Role
 
-This Ansible role deploys a Matomo analytics platform instance using Docker.
+This Ansible role deploys a [Matomo](https://matomo.org/) analytics platform instance using Docker.
 
 ## Requirements
 
@@ -16,17 +16,8 @@ This Ansible role deploys a Matomo analytics platform instance using Docker.
 - `http_port`: The host port that Matomo will be accessible on.
 - `matomo_database_password`: Password for the Matomo database.
 
-## Dependencies
-
-- `nginx-docker-reverse-proxy`: An Ansible role for configuring the reverse proxy.
-
-## Example Playbook
-
-```yaml
-- hosts: servers
-  roles:
-    - { role: docker-matomo, domain: 'example.com', http_port: 8080 }
-```
-
 ## AI Generated
-This script was created with the help of ChatGPT. The full conversation is [here](https://chat.openai.com/share/49e0c7e4-a2af-4a04-adad-7a735bdd85c4) available.
+This script was created with the help of ChatGPT. The full conversation is [here](https://chat.openai.com/share/49e0c7e4-a2af-4a04-adad-7a735bdd85c4) available.
+
+## Author
+-  [Kevin Veen-Birkenbach](https://www.veen.world/)

roles/docker-matomo/vars/main.yml

@@ -2,6 +2,7 @@
 application_id:  	              "matomo"
 database_type:                  "mariadb"
 database_password:              "{{matomo_database_password}}"
+domain:                         "{{domains.matomo}}"
 
 # Disable matomo tracking for matomo, because otherwise recursiv loading technics would be neccessary
 # global_matomo_tracking_enabled: false 

roles/docker-matrix-compose/tasks/create-and-seed-database.yml

@@ -10,4 +10,4 @@
   when: enable_central_database | bool
 
 - name: "include seed-database-to-backup.yml"
-  include_tasks: seed-database-to-backup.yml
+  include_tasks: ""{{ playbook_dir }}/roles/backup-docker-to-local/tasks/seed-database-to-backup.yml"

roles/docker-mybb/tasks/main.yml

@@ -3,8 +3,8 @@
   include_role: 
     name: docker-central-database
 
-- name: "include tasks create-proxy-with-domain-replace.yml"
+- name: "include tasks setup-domain.yml with {{domain}}"
-  include_tasks: create-proxy-with-domain-replace.yml
+  include_tasks: setup-domain.yml
   loop: "{{ mybb_domains + [source_domain] }}"
   loop_control:
     loop_var: domain

roles/docker-mybb/tasks/setup-domain.yml

@@ -0,0 +1,13 @@
+# Recieves https certificate and setup proxy with domain replace
+
+- name: "include role receive certbot certificate"
+  include_role: 
+    name: nginx-https-recieve-certificate
+
+- name: configure {{domain}}.conf
+  template: 
+    src:  "roles/nginx-docker-reverse-proxy/templates/domain.conf.j2" 
+    dest: "{{nginx.directories.http.servers}}{{domain}}.conf"
+  notify: restart nginx
+  vars: 
+    nginx_docker_reverse_proxy_extra_configuration: "sub_filter '{{source_domain}}' '{{domain}}';"

roles/docker-openproject/vars/main.yml

@@ -13,6 +13,6 @@ dummy_volume:                                 "{{docker_compose.directories.volu
 
 # OAuth2 Proxy Configuration
 oauth2_proxy_upstream_application_and_port:   "proxy:80"
-oauth2_proxy_active:                          true
+oauth2_proxy_active:                          "{{ applications.openproject.oauth2_proxy_active | bool }}"
 
 ldap_enabled:                                 True

roles/docker-phpmyadmin/vars/main.yml

@@ -1,5 +1,4 @@
 application_id:       "phpmyadmin"
 database_type:        "mariadb"
 database_host:        "{{ 'central-' + database_type if enable_central_database}}"
-# OAuth2 Proxy Configuration
+oauth2_proxy_active:  "{{ applications.phpmyadmin.oauth2_proxy_active | bool }}"
-oauth2_proxy_active:  true

roles/nginx-global-css/filter_plugins/color_filters.py

@@ -1,18 +1,18 @@
 import colorsys
 
-def adjust_color(hex_color, lightness_change=0, hue_shift=0, saturation_change=0):
+def adjust_color(hex_color, target_lightness=None, lightness_change=0, hue_shift=0, saturation_change=0):
     """
     Adjust a HEX color in HSL space.
-    @See https://chatgpt.com/c/67b08ad4-eb58-800f-80cc-f1b22d8c64f3
+
-    
+    - target_lightness: If provided (0 to 1), the lightness is set absolutely to this value.
-    - lightness_change: Percentage points to add or subtract from lightness (0-100 => 0-1 in HSL).
+      Otherwise, lightness_change is applied additively (in percentage points, where 100 => 1 in HSL).
+    - lightness_change: Percentage points to add or subtract from lightness (if target_lightness is None).
     - hue_shift: Degrees to shift hue (e.g., +180 for complementary).
-    - saturation_change: Percentage points to add or subtract from saturation (0-100 => 0-1 in HSL).
+    - saturation_change: Percentage points to add or subtract from saturation.
     
-    Uses a 'cyclical' approach for lightness and saturation:
+    Uses a 'cyclical' approach for lightness and saturation if no target_lightness is provided:
       If the new value goes above 1, it wraps around (subtract 1).
       If it goes below 0, it wraps around (add 1).
-    This creates strong contrast when crossing boundaries.
     """
 
     # Strip leading '#' if present
@@ -28,34 +28,33 @@ def adjust_color(hex_color, lightness_change=0, hue_shift=0, saturation_change=0
     g /= 255.0
     b /= 255.0
     
-    # Convert RGB -> HLS (note: in Python, it's Hue, Lightness, Saturation)
+    # Convert RGB -> HLS (colorsys uses HLS, also hier: Hue, Lightness, Saturation)
-    # Hue, Lightness, Saturation are each in [0..1]
     h, l, s = colorsys.rgb_to_hls(r, g, b)
     
     # Shift hue by (hue_shift / 360)
-    # e.g., hue_shift=180 => shift by 0.5 in HLS space
     h = (h + (hue_shift / 360.0)) % 1.0
     
-    # Shift saturation (cyc wrap)
+    # Adjust saturation (cyclically)
-    # saturation_change is e.g. +20 => +0.20 in HLS
     s_new = s + (saturation_change / 100.0)
     if s_new > 1:
         s_new -= 1
     elif s_new < 0:
         s_new += 1
-    
+
-    # Shift lightness (cyc wrap)
+    # Adjust lightness: either set to a target or change it additively (cyclically)
-    # lightness_change is e.g. +30 => +0.30 in HLS
+    if target_lightness is not None:
-    l_new = l + (lightness_change / 100.0)
+        l_new = target_lightness
-    if l_new > 1:
+    else:
-        l_new -= 1
+        l_new = l + (lightness_change / 100.0)
-    elif l_new < 0:
+        if l_new > 1:
-        l_new += 1
+            l_new -= 1
-    
+        elif l_new < 0:
+            l_new += 1
+
     # Convert back to RGB
     new_r, new_g, new_b = colorsys.hls_to_rgb(h, l_new, s_new)
     
-    # Scale back to [0..255]
+    # Scale back to [0..255] and format as HEX
     new_r = int(new_r * 255)
     new_g = int(new_g * 255)
     new_b = int(new_b * 255)

roles/nginx-global-css/templates/global.css.j2

@@ -8,30 +8,9 @@ HINT: Better overwritte CSS variables instead of individual elements.
 
 :root {
     /** Derived Colors from the Base Color **/
-
+    {% for i in range(1, 100) %}
-    /* Primary Color: the base color itself */
+        --color-{{ "%02d"|format(i) }}: {{ global_theming.css.colors.base | adjust_color(target_lightness=(i / 100),saturation_change=global_theming.css.filters.saturation_change,hue_shift=global_theming.css.filters.hue_shift) }};
-    --primary-color:       {{ global_theming.css.colors.base }};
+    {% endfor %}
-    
-    /* Secondary Color: slightly lightened */
-    --secondary-color:     {{ global_theming.css.colors.base | adjust_color(15) }};
-    
-    /* Complementary Color: moderately lightened to fall within a mid-brightness range */
-    --complementary-color: {{ global_theming.css.colors.base | adjust_color(30) }};
-    
-    /* Bright Background: significantly lightened */
-    --bright-color:        {{ global_theming.css.colors.base | adjust_color(45) }};
-    
-    /* Brightest Tone (e.g., for button text or accents): nearly white */
-    --brightest-color:     {{ global_theming.css.colors.base | adjust_color(60) }};
-    
-    /* Dark Background: a darker variant of the base color */
-    --dark-color:          {{ global_theming.css.colors.base | adjust_color(-30) }};
-    
-    /* Border Color: slightly offset with a light adjustment */
-    --border-color:        {{ global_theming.css.colors.base | adjust_color(10) }};
-    
-    /* Button Background: a gentle lightening for soft contrast */
-    --button-bg-color:     {{ global_theming.css.colors.base | adjust_color(20) }};
 
     /** Special Action Colors **/
     --success-color:    {{ global_theming.css.colors.success }};
@@ -41,81 +20,463 @@ HINT: Better overwritte CSS variables instead of individual elements.
 
 }
 
+@media (prefers-color-scheme: dark) {
+    :root {
+        /** Dark Mode Derived Colors from the Base Color **/
+        {% for i in range(1, 100) %}
+            --color-{{ "%02d"|format(i) }}: {{ global_theming.css.colors.base | adjust_color(target_lightness=(1 - (i / 100)),saturation_change=global_theming.css.filters.saturation_change,hue_shift=global_theming.css.filters.hue_shift) }};
+        {% endfor %}
 
+        /** Special Action Colors **/
+        --success-color:    {{ global_theming.css.colors.success | adjust_color(target_lightness=(1 - 0.2)) }};
+        --warning-color:    {{ global_theming.css.colors.warning | adjust_color(target_lightness=(1 - 0.3)) }};
+        --error-color:      {{ global_theming.css.colors.error   | adjust_color(target_lightness=(1 - 0.3)) }};
+        --info-color:       {{ global_theming.css.colors.info    | adjust_color(target_lightness=(1 - 0.2)) }};
+    }
+}
+
+
+:root, ::after, ::before, ::backdrop {
+    /* For Dark Mode Plugin
+     * @See https://chromewebstore.google.com/detail/dark-mode/dmghijelimhndkbmpgbldicpogfkceaj
+     */
+    --native-dark-accent-color:         var(--color-60);  /* was #a9a9a9 */
+    --native-dark-bg-blend-mode:        multiply;
+    --native-dark-bg-color:             var(--color-10);  /* was #292929 */
+    --native-dark-bg-image-color:      rgba(0, 0, 0, 0.10); /* remains the same, or adjust if needed */
+    --native-dark-bg-image-filter:      brightness(50%) contrast(200%);
+    --native-dark-border-color:         var(--color-40);  /* was #555555 */
+    --native-dark-box-shadow:           0 0 0 1px rgb(255 255 255 / 10%);
+    --native-dark-brightness:           0.85;
+    --native-dark-cite-color:           var(--color-70);  /* was #92de92 – you might adjust if a green tone is needed */
+    --native-dark-fill-color:           var(--color-50);  /* was #7d7d7d */
+    --native-dark-font-color:           var(--color-95);  /* was #dcdcdc */
+    --native-dark-link-color:           var(--color-80);  /* was #8db2e5 */
+    --native-dark-opacity:              0.85;
+    --native-dark-text-shadow:          none;
+    --native-dark-transparent-color:    transparent;
+    --native-dark-visited-link-color:   var(--color-85);  /* was #c76ed7 */
+}
 
 /* Bootstrap Overrides (Color/Shadow Variables Only) */
 :root {
-    --bs-primary: var(--primary-color);
+    --bs-primary: var(--color-50);
-    --bs-secondary: var(--secondary-color);
+    --bs-secondary: var(--color-65);
-    --bs-body-bg: var(--bright-color);
+    --bs-body-bg: var(--color-90);
-    --bs-body-color: var(--dark-color);
+    --bs-body-color: var(--color-40);
     --bs-danger: var(--error-color);
     --bs-warning: var(--warning-color);
     --bs-success: var(--success-color);
     --bs-info: var(--info-color);
-    --bs-link-color: var(--primary-color);
+    --bs-link-color: var(--color-50);
-    --bs-btn-color: var(--dark-color);
+    --bs-btn-color: var(--color-40);
+}
+
+/* Discourse */
+:root {
+  --scheme-type: light;
+
+  /* Base Colors */
+  --primary:                   var(--color-20); /* originally #203243 */
+  --secondary:                 var(--color-95); /* originally #eef4f7 */
+  --tertiary:                  var(--color-40); /* originally #416376 */
+  --quaternary:                var(--color-50); /* originally #5e99b9 */
+
+  /* Header & Highlight */
+  --header_background:         var(--color-70); /* originally #86bddb */
+  --header_primary:            var(--color-20); /* same as --primary */
+  --highlight:                 var(--color-70); /* same as header_background */
+  --d-selected:                var(--color-85); /* originally #bee0f2 */
+  --d-hover:                   var(--color-90); /* originally #d2efff */
+
+  /* RGB values remain unchanged */
+  --always-black-rgb:          0, 0, 0;
+  --primary-rgb:               32, 50, 67;
+  --primary-low-rgb:           227, 235, 242;
+  --primary-very-low-rgb:      247, 249, 251;
+  --secondary-rgb:             238, 244, 247;
+  --header_background-rgb:     134, 189, 219;
+  --tertiary-rgb:              65, 99, 118;
+  --highlight-rgb:             134, 189, 219;
+  --success-rgb:               112, 219, 130;
+
+  /* Primary Scale */
+  --primary-very-low:          var(--color-100); /* originally #f7f9fb */
+  --primary-low:               var(--color-95);  /* originally #e3ebf2 */
+  --primary-low-mid:           var(--color-75);  /* originally #acc2d7 */
+  --primary-medium:            var(--color-60);  /* originally #7499bd */
+  --primary-high:              var(--color-40);  /* originally #487096 */
+  --primary-very-high:         var(--color-20);  /* originally #34516d */
+  --primary-50:                var(--color-100); /* originally #f7f9fb */
+  --primary-100:               var(--color-95);  /* originally #eef3f7 */
+  --primary-200:               var(--color-90);  /* originally #e3ebf2 */
+  --primary-300:               var(--color-80);  /* originally #c7d6e4 */
+  --primary-400:               var(--color-75);  /* originally #acc2d7 */
+  --primary-500:               var(--color-70);  /* originally #90aeca */
+  --primary-600:               var(--color-60);  /* originally #7499bd */
+  --primary-700:               var(--color-50);  /* originally #5381ad */
+  --primary-800:               var(--color-40);  /* originally #487096 */
+  --primary-900:               var(--color-20);  /* originally #34516d */
+
+  /* Header Primary Scale */
+  --header_primary-low:        var(--color-75);  /* rgb(128, 180, 209) */
+  --header_primary-low-mid:    var(--color-70);  /* rgb(110, 155, 181) */
+  --header_primary-medium:     var(--color-60);  /* rgb(93, 132, 155) */
+  --header_primary-high:       var(--color-50);  /* rgb(78, 112, 132) */
+  --header_primary-very-high:  var(--color-20);  /* rgb(52, 76, 94) */
+
+  /* Secondary Scale */
+  --secondary-low:             var(--color-20);  /* originally #2f5163 */
+  --secondary-medium:          var(--color-40);  /* originally #4e88a5 */
+  --secondary-high:            var(--color-60);  /* originally #7ba9c1 */
+  --secondary-very-high:       var(--color-90);  /* originally #d7e5ec */
+
+  /* Tertiary Scale */
+  --tertiary-very-low:         var(--color-100); /* originally #eaf0f3 */
+  --tertiary-low:              var(--color-95);  /* originally #dfe8ee */
+  --tertiary-medium:           var(--color-60);  /* originally #96b4c5 */
+  --tertiary-high:             var(--color-40);  /* originally #5886a0 */
+  --tertiary-hover:            var(--color-20);  /* originally #314a59 */
+  --tertiary-50:               var(--color-100); /* originally #eaf0f3 */
+  --tertiary-100:              var(--color-95);  /* originally #e6edf1 */
+  --tertiary-200:              var(--color-90);  /* originally #e4ebf0 */
+  --tertiary-300:              var(--color-85);  /* originally #dfe8ee */
+  --tertiary-400:              var(--color-75);  /* originally #c8d8e1 */
+  --tertiary-500:              var(--color-65);  /* originally #b1c7d4 */
+  --tertiary-600:              var(--color-60);  /* originally #96b4c5 */
+  --tertiary-700:              var(--color-55);  /* originally #80a5b9 */
+  --tertiary-800:              var(--color-50);  /* originally #6b96ae */
+  --tertiary-900:              var(--color-40);  /* originally #5886a0 */
+
+  /* Quaternary */
+  --quaternary-low:           var(--color-80);  /* originally #cfe0ea */
+
+  /* Highlight */
+  --highlight-bg:             var(--color-90);  /* originally #dbebf4 */
+  --highlight-low:            var(--color-90);  /* originally #dbebf4 */
+  --highlight-medium:         var(--color-80);  /* originally #c3deed */
+  --highlight-high:           var(--color-30);  /* originally #286688 */
+
+  /* Combination Variables */
+  --blend-primary-secondary-5:        var(--color-95);  /* originally rgb(232, 238, 241) */
+  --primary-med-or-secondary-med:       var(--color-60);  /* originally #7499bd */
+  --primary-med-or-secondary-high:      var(--color-60);  /* originally #7499bd */
+  --primary-high-or-secondary-low:      var(--color-40);  /* originally #487096 */
+  --primary-low-mid-or-secondary-high:   var(--color-75);  /* originally #acc2d7 */
+  --primary-low-mid-or-secondary-low:    var(--color-75);  /* originally #acc2d7 */
+  --primary-or-primary-low-mid:         var(--color-20);  /* originally #203243 */
+  --highlight-low-or-medium:            var(--color-90);  /* originally #dbebf4 */
+  --tertiary-or-tertiary-low:           var(--color-40);  /* originally #416376 */
+  --tertiary-low-or-tertiary-high:        var(--color-95);  /* originally #dfe8ee */
+  --tertiary-med-or-tertiary:             var(--color-60);  /* originally #96b4c5 */
+  --secondary-or-primary:               var(--color-95);  /* originally #eef4f7 */
+  --tertiary-or-white:                  var(--color-40);  /* originally #416376 */
+
+  /* Float Kit */
+  --float-kit-arrow-stroke-color:       var(--primary-low);  /* already mapped above */
+  --float-kit-arrow-fill-color:         var(--secondary);      /* already mapped above */
 }
 
 /** Keycloak Overrides **/ 
 :root{
-    --pf-v5-global--Color--100:         {{  global_theming.css.colors.base | adjust_color(-30) }};
+    --pf-v5-global--Color--100:         var(--color-40);
-    --pf-v5-global--Color--200:         {{  global_theming.css.colors.base | adjust_color(-10) }};
+    --pf-v5-global--Color--200:         var(--color-60);
-    --pf-v5-global--Color--light-100:   {{  global_theming.css.colors.base | adjust_color(-30) }};
+    --pf-v5-global--Color--light-100:   var(--color-40);
-    --pf-v5-global--Color--light-200:   {{  global_theming.css.colors.base | adjust_color(-10) }};
+    --pf-v5-global--Color--light-200:   var(--color-60);
-    --pf-v5-global--Color--light-300:   {{  global_theming.css.colors.base | adjust_color(10) }};
+    --pf-v5-global--Color--light-300:   var(--color-70);
 } 
 
 /** Mastodon Overrides **/
 :root{
-    --surface-variant-background-color: var(--button-bg-color);
+    --surface-variant-background-color: var(--color-80);
 }
 
 /** Nextcloud Specific**/
 :root{
-    --color-main-background:        var(--bright-color);
+    --color-main-background:        None;
-    --color-main-background-rgb:    var(--bright-color);
+    --color-main-background-rgb:    None;
-    --color-primary-element:        var(--button-bg-color);
+    --color-primary-element:        var(--color-80);
-    --color-main-text:              var(--dark-color);
+    --color-main-text:              var(--color-40);
-    --color-background-hover:       var(--secondary-color);
+    --color-background-hover:       var(--color-65);
 
     /** Calendar **/
     --color-background-dark:        var(--info-color); /** Days which aren't in the current month **/
-    --color-primary-element-light:  var(--secondary-color);
+    --color-primary-element-light:  var(--color-65);
 }
 
 /** Peertube **/
 :root {
-    --mainColor: var(--primary-color);
+    --mainColor: var(--color-50);
 }
 
 /** Pixelfed **/
+
 :root {
-    --card-bg:          var(--complementary-color);
+    /* Base Colors */
-    --light-gray:       var(--complementary-color);
+    --light:                  var(--color-05);    /* Very dark (was #000) */
+    --dark:                   var(--color-100);   /* Very light (was #fff) */
+    
+    /* Backgrounds */
+    --body-bg:                var(--color-05);    /* Main background: very dark */
+    --nav-bg:                 var(--color-05);    /* Navigation background: very dark */
+    
+    /* Text Colors */
+    --body-color:             var(--color-70);    /* Main text – mid brightness */
+    --text-lighter:           var(--color-60);    /* Lighter text for less prominent elements */
+    
+    /* Section Backgrounds and Cards */
+    --bg-light:               var(--color-95);    /* Lighter background areas */
+    --card-bg:                var(--color-90);    /* Card background */
+    --light-gray:             var(--color-75);    /* For less dominant elements */
+    --light-hover-bg:         var(--color-85);    /* Slightly lighter hover background */
+    
+    /* Borders and Input Fields */
+    --btn-light-border:       var(--color-10);    /* Dark border for buttons */
+    --input-border:           var(--color-10);    /* Border color for inputs */
+    --border-color:           var(--color-85);    /* General border: slightly lighter than background */
+    
+    /* Other Areas */
+    --comment-bg:             var(--color-85);    /* Background for comments */
+    --card-header-accent:     var(--color-85);    /* Accent color in card headers */
+    
+    /* Dropdown Menus */
+    --dropdown-item-hover-bg: var(--color-05);    /* Hover background: very dark */
+    --dropdown-item-hover-color: var(--color-60);  /* Hover text: a bit lighter */
+    --dropdown-item-color:     var(--color-70);    /* Regular dropdown item text */
+    --dropdown-item-active-color: var(--color-99);/* Active state: very light (white) */
 }
 
+/* Keycloak */
+:root{
+  /* --- Palette Black (Graustufen) --- */
+  --pf-v5-global--palette--black-100:   var(--color-95);  /* #fafafa */
+  --pf-v5-global--palette--black-150:   var(--color-90);  /* #f5f5f5 */
+  --pf-v5-global--palette--black-200:   var(--color-85);  /* #f0f0f0 */
+  --pf-v5-global--palette--black-300:   var(--color-75);  /* #d2d2d2 */
+  --pf-v5-global--palette--black-400:   var(--color-65);  /* #b8bbbe */
+  --pf-v5-global--palette--black-500:   var(--color-50);  /* #8a8d90 */
+  --pf-v5-global--palette--black-600:   var(--color-40);  /* #6a6e73 */
+  --pf-v5-global--palette--black-700:   var(--color-30);  /* #4f5255 */
+  --pf-v5-global--palette--black-800:   var(--color-25);  /* #3c3f42 */
+  --pf-v5-global--palette--black-850:   var(--color-20);  /* #212427 */
+  --pf-v5-global--palette--black-900:   var(--color-10);  /* #151515 */
+  --pf-v5-global--palette--black-1000:  var(--color-05);  /* #030303 */
+
+  /* --- Blue Palette --- */
+  --pf-v5-global--palette--blue-50:    var(--color-98);  /* #e7f1fa */
+  --pf-v5-global--palette--blue-100:   var(--color-95);  /* #bee1f4 */
+  --pf-v5-global--palette--blue-200:   var(--color-85);  /* #73bcf7 */
+  --pf-v5-global--palette--blue-300:   var(--color-75);  /* #2b9af3 */
+  --pf-v5-global--palette--blue-400:   var(--color-65);  /* #06c */
+  --pf-v5-global--palette--blue-500:   var(--color-40);  /* #004080 */
+  --pf-v5-global--palette--blue-600:   var(--color-30);  /* #002952 */
+  --pf-v5-global--palette--blue-700:   var(--color-10);  /* #001223 */
+
+  /* --- Cyan Palette --- */
+  --pf-v5-global--palette--cyan-50:    var(--color-98);  /* #f2f9f9 */
+  --pf-v5-global--palette--cyan-100:   var(--color-85);  /* #a2d9d9 */
+  --pf-v5-global--palette--cyan-200:   var(--color-75);  /* #73c5c5 */
+  --pf-v5-global--palette--cyan-300:   var(--color-65);  /* #009596 */
+  --pf-v5-global--palette--cyan-400:   var(--color-40);  /* #005f60 */
+  --pf-v5-global--palette--cyan-500:   var(--color-30);  /* #003737 */
+  --pf-v5-global--palette--cyan-600:   var(--color-20);  /* #002323 */
+  --pf-v5-global--palette--cyan-700:   var(--color-10);  /* #000f0f */
+
+  /* --- Gold Palette --- */
+  --pf-v5-global--palette--gold-50:    var(--color-98);  /* #fdf7e7 */
+  --pf-v5-global--palette--gold-100:   var(--color-90);  /* #f9e0a2 */
+  --pf-v5-global--palette--gold-200:   var(--color-80);  /* #f6d173 */
+  --pf-v5-global--palette--gold-300:   var(--color-70);  /* #f4c145 */
+  --pf-v5-global--palette--gold-400:   var(--color-60);  /* #f0ab00 */
+  --pf-v5-global--palette--gold-500:   var(--color-50);  /* #c58c00 */
+  --pf-v5-global--palette--gold-600:   var(--color-40);  /* #795600 */
+  --pf-v5-global--palette--gold-700:   var(--color-30);  /* #3d2c00 */
+
+  /* --- Green Palette --- */
+  --pf-v5-global--palette--green-50:   var(--color-98);  /* #f3faf2 */
+  --pf-v5-global--palette--green-100:  var(--color-85);  /* #bde5b8 */
+  --pf-v5-global--palette--green-200:  var(--color-75);  /* #95d58e */
+  --pf-v5-global--palette--green-300:  var(--color-65);  /* #6ec664 */
+  --pf-v5-global--palette--green-400:  var(--color-60);  /* #5ba352 */
+  --pf-v5-global--palette--green-500:  var(--color-50);  /* #3e8635 */
+  --pf-v5-global--palette--green-600:  var(--color-40);  /* #1e4f18 */
+  --pf-v5-global--palette--green-700:  var(--color-20);  /* #0f280d */
+
+  /* --- Light Blue Palette --- */
+  --pf-v5-global--palette--light-blue-100: var(--color-95);  /* #beedf9 */
+  --pf-v5-global--palette--light-blue-200: var(--color-85);  /* #7cdbf3 */
+  --pf-v5-global--palette--light-blue-300: var(--color-75);  /* #35caed */
+  --pf-v5-global--palette--light-blue-400: var(--color-65);  /* #00b9e4 */
+  --pf-v5-global--palette--light-blue-500: var(--color-50);  /* #008bad */
+  --pf-v5-global--palette--light-blue-600: var(--color-40);  /* #005c73 */
+  --pf-v5-global--palette--light-blue-700: var(--color-20);  /* #002d39 */
+
+  /* --- Light Green Palette --- */
+  --pf-v5-global--palette--light-green-100: var(--color-95); /* #e4f5bc */
+  --pf-v5-global--palette--light-green-200: var(--color-85); /* #c8eb79 */
+  --pf-v5-global--palette--light-green-300: var(--color-75); /* #ace12e */
+  --pf-v5-global--palette--light-green-400: var(--color-65); /* #92d400 */
+  --pf-v5-global--palette--light-green-500: var(--color-50); /* #6ca100 */
+  --pf-v5-global--palette--light-green-600: var(--color-40); /* #486b00 */
+  --pf-v5-global--palette--light-green-700: var(--color-20); /* #253600 */
+
+  /* --- Orange Palette --- */
+  --pf-v5-global--palette--orange-50:  var(--color-98);  /* #fff6ec */
+  --pf-v5-global--palette--orange-100: var(--color-85);  /* #f4b678 */
+  --pf-v5-global--palette--orange-200: var(--color-75);  /* #ef9234 */
+  --pf-v5-global--palette--orange-300: var(--color-65);  /* #ec7a08 */
+  --pf-v5-global--palette--orange-400: var(--color-50);  /* #c46100 */
+  --pf-v5-global--palette--orange-500: var(--color-40);  /* #8f4700 */
+  --pf-v5-global--palette--orange-600: var(--color-30);  /* #773d00 */
+  --pf-v5-global--palette--orange-700: var(--color-20);  /* #3b1f00 */
+
+  /* --- Purple Palette --- */
+  --pf-v5-global--palette--purple-50:   var(--color-98);  /* #f2f0fc */
+  --pf-v5-global--palette--purple-100:  var(--color-90);  /* #cbc1ff */
+  --pf-v5-global--palette--purple-200:  var(--color-80);  /* #b2a3ff */
+  --pf-v5-global--palette--purple-300:  var(--color-70);  /* #a18fff */
+  --pf-v5-global--palette--purple-400:  var(--color-60);  /* #8476d1 */
+  --pf-v5-global--palette--purple-500:  var(--color-50);  /* #6753ac */
+  --pf-v5-global--palette--purple-600:  var(--color-40);  /* #40199a */
+  --pf-v5-global--palette--purple-700:  var(--color-20);  /* #1f0066 */
+
+  /* --- Red Palette --- */
+  --pf-v5-global--palette--red-50:    var(--color-98);  /* #faeae8 */
+  --pf-v5-global--palette--red-100:   var(--color-70);  /* #c9190b */
+  --pf-v5-global--palette--red-200:   var(--color-50);  /* #a30000 */
+  --pf-v5-global--palette--red-300:   var(--color-40);  /* #7d1007 */
+  --pf-v5-global--palette--red-400:   var(--color-30);  /* #470000 */
+  --pf-v5-global--palette--red-500:   var(--color-20);  /* #2c0000 */
+
+  /* --- White --- */
+  --pf-v5-global--palette--white:      var(--color-99);
+
+  /* --- Background Colors --- */
+  --pf-v5-global--BackgroundColor--100:              var(--color-99);
+  --pf-v5-global--BackgroundColor--150:              var(--color-95);
+  --pf-v5-global--BackgroundColor--200:              var(--color-85);
+  --pf-v5-global--BackgroundColor--300:              var(--color-75);
+  --pf-v5-global--BackgroundColor--400:              var(--color-65);
+  --pf-v5-global--BackgroundColor--light-100:        var(--color-100);
+  --pf-v5-global--BackgroundColor--light-200:        var(--color-95);
+  --pf-v5-global--BackgroundColor--light-300:        var(--color-85);
+  --pf-v5-global--BackgroundColor--dark-100:         var(--color-10);
+  --pf-v5-global--BackgroundColor--dark-200:         var(--color-25);
+  --pf-v5-global--BackgroundColor--dark-300:         var(--color-20);
+  --pf-v5-global--BackgroundColor--dark-400:         var(--color-30);
+  --pf-v5-global--BackgroundColor--dark-transparent-100: var(--color-05);
+  --pf-v5-global--BackgroundColor--dark-transparent-200: var(--color-05);
+
+  /* --- Color Variables --- */
+  --pf-v5-global--Color--100:           var(--color-10);
+  --pf-v5-global--Color--200:           var(--color-40);
+  --pf-v5-global--Color--300:           var(--color-25);
+  --pf-v5-global--Color--400:           var(--color-50);
+  --pf-v5-global--Color--light-100:     var(--color-100);
+  --pf-v5-global--Color--light-200:     var(--color-85);
+  --pf-v5-global--Color--light-300:     var(--color-75);
+  --pf-v5-global--Color--dark-100:      var(--color-10);
+  --pf-v5-global--Color--dark-200:      var(--color-40);
+
+  /* --- Active Colors --- */
+  --pf-v5-global--active-color--100:    var(--color-65);
+  --pf-v5-global--active-color--200:    var(--color-95);
+  --pf-v5-global--active-color--300:    var(--color-75);
+  --pf-v5-global--active-color--400:    var(--color-85);
+
+  /* --- Disabled Colors --- */
+  --pf-v5-global--disabled-color--100:  var(--color-40);
+  --pf-v5-global--disabled-color--200:  var(--color-75);
+  --pf-v5-global--disabled-color--300:  var(--color-85);
+
+  /* --- Primary Colors --- */
+  --pf-v5-global--primary-color--100:   var(--color-65);
+  --pf-v5-global--primary-color--200:   var(--color-40);
+  --pf-v5-global--primary-color--light-100: var(--color-75);
+  --pf-v5-global--primary-color--dark-100:  var(--color-65);
+
+  /* --- Secondary Colors --- */
+  --pf-v5-global--secondary-color--100: var(--color-40);
+
+  /* --- Custom Colors --- */
+  --pf-v5-global--custom-color--100:    var(--color-65);
+  --pf-v5-global--custom-color--200:    var(--color-65);
+  --pf-v5-global--custom-color--300:    var(--color-30);
+
+  /* --- Success Colors --- */
+  --pf-v5-global--success-color--100:   var(--color-50);
+  --pf-v5-global--success-color--200:   var(--color-40);
+
+  /* --- Info Colors --- */
+  --pf-v5-global--info-color--100:      var(--color-75);
+  --pf-v5-global--info-color--200:      var(--color-30);
+
+  /* --- Warning Colors --- */
+  --pf-v5-global--warning-color--100:   var(--color-60);
+  --pf-v5-global--warning-color--200:   var(--color-40);
+
+  /* --- Danger Colors --- */
+  --pf-v5-global--danger-color--100:    var(--color-70);
+  --pf-v5-global--danger-color--200:    var(--color-50);
+  --pf-v5-global--danger-color--300:    var(--color-30);
+
+  /* --- Link Colors --- */
+  --pf-v5-global--link--Color:                var(--color-65);
+  --pf-v5-global--link--Color--hover:          var(--color-40);
+  --pf-v5-global--link--Color--light:          var(--color-75);
+  --pf-v5-global--link--Color--light--hover:    var(--color-85);
+  --pf-v5-global--link--Color--dark:           var(--color-65);
+  --pf-v5-global--link--Color--dark--hover:     var(--color-40);
+  --pf-v5-global--link--Color--visited:         var(--color-40);
+
+  /* --- Border Colors --- */
+  --pf-v5-global--BorderColor--100:          var(--color-75);
+  --pf-v5-global--BorderColor--200:          var(--color-50);
+  --pf-v5-global--BorderColor--300:          var(--color-85);
+  --pf-v5-global--BorderColor--400:          var(--color-65);
+  --pf-v5-global--BorderColor--dark-100:      var(--color-75);
+  --pf-v5-global--BorderColor--light-100:     var(--color-65);
+
+  /* --- Icon Colors --- */
+  --pf-v5-global--icon--Color--light:         var(--color-40);
+  --pf-v5-global--icon--Color--dark:          var(--color-10);
+  --pf-v5-global--icon--Color--light--light:   var(--color-85);
+  --pf-v5-global--icon--Color--dark--light:    var(--color-100);
+  --pf-v5-global--icon--Color--light--dark:    var(--color-40);
+  --pf-v5-global--icon--Color--dark--dark:     var(--color-10);
+}
+
+/* Wordpress */
+:root {
+  --wp--preset--color--black:              var(--color-05);
+  --wp--preset--color--contrast:           var(--color-22);
+  --wp--preset--color--contrast-2:         var(--color-40);
+  --wp--preset--color--contrast-3:         var(--color-50);
+  --wp--preset--color--base:               var(--color-90);
+  --wp--preset--color--base-2:             var(--color-95);
+  --wp--preset--color--white:              var(--color-99);
+}
 
 /* Global Defaults (Colors Only) */
-body {
+body, html[native-dark-active] {
-    background-color: var(--bright-color) !important;
+    background-color: var(--color-93) !important;
     background-image: none !important;
-    color: var(--dark-color) !important;
+    color: var(--color-40) !important;
     /* Use the corporate-design font family */
     font-family: "Liberation Sans", Arial, sans-serif;
 }
 
 /* Links (Color Only) */
 a {
-    color: var(--primary-color) !important;
+    color: var(--color-50) !important;
 }
 
 /* Buttons (Background, Text, Border, and Shadow)
    Now using a button background that is only slightly darker than the overall background */
-button, .btn {
+html[native-dark-active] button, html[native-dark-active] .btn, button, .btn {
-    background-color: var(--button-bg-color) !important;
+    background-color: var(--color-87) !important;
-    color: var(--primary-color) !important;
+    color: var(--color-50) !important;
-    border-color: var(--border-color) !important;
+    border-color: var(--color-80) !important;
     cursor: pointer;
 }
 
@@ -126,115 +487,99 @@ button:hover, .btn:hover {
 /* States: Success, Warning, Error, Info (Background and Text Colors) */
 .success, .alert-success {
     background-color: var(--success-color) !important;
-    color: var(--dark-color) !important;
+    color: var(--color-40) !important;
 }
 .warning, .alert-warning {
     background-color: var(--warning-color) !important;
-    color: var(--dark-color) !important;
+    color: var(--color-40) !important;
 }
 .error, .alert-danger {
     background-color: var(--error-color) !important;
-    color: var(--dark-color) !important;
+    color: var(--color-40) !important;
 }
 .info, .alert-info {
     background-color: var(--info-color) !important;
-    color: var(--dark-color) !important;
+    color: var(--color-40) !important;
 }
 
 /* Inputs & Forms in Light Mode (Using a Light Tone from the Corporate Design) */
 input, textarea, select {
-    background-color: var(--info-color) !important;  /* Instead of var(--bright-color) */
+    background-color: var(--color-82) !important;  /* Instead of var(--color-90) */
-    color: var(--dark-color) !important;
+    color: var(--color-40) !important;
-    border-color: var(--border-color) !important;
+    border-color: var(--color-70) !important;
 }
 input:focus, textarea:focus, select:focus {
-    border-color: var(--primary-color) !important;
+    border-color: var(--color-50) !important;
 }
 
 /* Navigation (Background and Text Colors) */
 .navbar, .navbar-light, .navbar-dark {
-    background-color: var(--bright-color) !important;
+    background-color: var(--color-90) !important;
-    color: var(--primary-color) !important;
+    color: var(--color-50) !important;
+    border-color: var(--color-85) !important;
 }
 
 .navbar a {
-    color: var(--dark-color) !important;
+    color: var(--color-40) !important;
 }
 
 .navbar a.dropdown-item {
-    color: var(--dark-color) !important;
+    color: var(--color-40) !important;
 }
 
 .card-body {
-    color: var(--dark-color) !important;
+    color: var(--color-40) !important;
 }
 
 /* Tables (Borders and Header Colors) */
 th, td {
-    border-color: var(--border-color) !important;
+    border-color: var(--color-70) !important;
 }
 
 thead {
-    background-color: var(--button-bg-color) !important;
+    background-color: var(--color-80) !important;
-    color: var(--dark-color) !important;
+    color: var(--color-40) !important;
 }
 
 /* Cards / Containers (Background, Border, and Shadow)
    Cards now use a slightly lighter background and a bold, clear shadow */
 .card {
-    background-color: var(--complementary-color) !important;
+    background-color: var(--color-90) !important;
-    border-color: var(--border-color) !important;
+    border-color: var(--color-85) !important;
 }
 
 /* Headings (Text Color) */
 h1, h2, h3, h4, h5, h6, p{
-    color: var(--dark-color) !important;
+    color: var(--color-10) !important;
 }
 
 /* Dropdown Menu and Submenu (Background, Text, and Shadow) */
 .navbar .dropdown-menu,
 .nav-item .dropdown-menu {
-    background-color: var(--bright-color) !important;
+    background-color: var(--color-80) !important;
-    color: var(--dark-color) !important;
+    color: var(--color-40) !important;
-    /**box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);**/
 }
 
 .dropdown-item {
-    color: var(--dark-color) !important;
+    color: var(--color-40) !important;
-    background-color: var(--bright-color) !important;
+    background-color: var(--color-80) !important;
 }
 
 .dropdown-item:hover,
 .dropdown-item:focus {
-    background-color: var(--secondary-color) !important;
+    background-color: var(--color-65) !important;
-    color: var(--dark-color) !important;
+    color: var(--color-40) !important;
 }
 
 /* Ensure the button itself uses the light text color. Occurred in Mastodon */
 button.icon-button {
-    color: var(--most-bright) !important;
+    color: var(--color-99) !important;
-}
-
-/** Keycloak **/
-body#keycloak-bg main{
-    background-color: var(--complementary-color) !important;
 }
 
+/* Keycloak Header */
 div#app header, div#app header *{
-    background-color: var(--primary-color) !important;
+    background-color: var(--color-60) !important;
-    color: var(--brightest-color);
+    color: var(--color-98);
-}
-
-div#app div#page-sidebar, div#app main#kc-main-content-page-container{
-    background-color: var(--complementary-color) !important;
-}
-
-div#app main#kc-main-content-page-container section, 
-div#app main#kc-main-content-page-container section *,
-div#app main#kc-main-content-page-container section a
-{
-    background-color: transparent !important;
-    color: var(--dark-color);
 }
 
 /** LAM Specific **/
@@ -245,28 +590,28 @@ div#app main#kc-main-content-page-container section a
 
 /** Mailu **/
 [class*=sidebar-dark-], .bg-mailu-logo {
-    background-color: var(--bright-color) !important;
+    background-color: var(--color-90) !important;
 }
 
 
 /** Mastodon Specific **/ 
 div#mastodon div.compose-panel div.compose-form__highlightable{
-    background-color: var(--bright-color) !important;
+    background-color: var(--color-90) !important;
 }
 
 div#mastodon strong{
-    color: var(--dark-color) !important;
+    color: var(--color-40) !important;
 }
 
 /** Nextcloud specific **/
 html.ng-csp header#header{
-    color: var(--bright-color) !important;
+    color: var(--color-90) !important;
-    background-color: var(--button-bg-color) !important;
+    background-color: var(--color-80) !important;
 }
 
 html.ng-csp button.files-list__row-name-link, html.ng-csp button.button-vue{
     background-color: transparent !important;
-    color: background-color: var(--button-bg-color) !important;
+    color: background-color: var(--color-80) !important;
 }
 
 html.ng-csp div#postsetupchecks ul.warnings{
@@ -278,13 +623,13 @@ html.ng-csp div#postsetupchecks ul.info{
 }
 
 div#content-vue p, div#content-vue span{
-    color: var(--dark-color) !important;
+    color: var(--color-40) !important;
 }
 
 /** OpenProject **/
 header.op-app-header{
-    background-color: var(--dark-color) !important;
+    background-color: var(--color-40) !important;
-    color: var(--dark-color) !important;
+    color: var(--color-40) !important;
 }
 
 /** Open Project **/
@@ -292,15 +637,17 @@ div#wrapper button, div#wrapper input, button.top-menu-search-button, div.menu-s
     background-color: transparent !important;
 }
 
-main-menu-toggle button{
-    border: 0px none !important;
-}
-
 /* Peertube specific configuration */
 .peertube-container button {
     background-color: transparent !important;
 }
 
+/* Pixelfed */
+div.page-wrapper{
+    background: none !important;
+    background-color: none !important;
+}
+
 /** Taiga specific configuration  **/
 
 section.main.kanban{
@@ -309,9 +656,14 @@ section.main.kanban{
 
 div.master, div.kanban-header, div.kanban-table-inner, section.kanban button,a.dropdown-project-list-projects{
     background-color: var(--info-color) !important;
-    color: var(--dark-color) !important;
+    color: var(--color-40) !important;
 }
 
 section.kanban h1, section.kanban h2{
-    color: var(--dark-color) !important;
+    color: var(--color-40) !important;
+}
+
+/* Wordpress */
+.has-contrast-background-color{
+    color: var(--color-90) !important;
 }

roles/nginx-global/tasks/main.yml

@@ -1,7 +1,7 @@
 - name: Activate Global Matomo tracking
   include_role:
     name: nginx-global-matomo
-  when: global_matomo_tracking_enabled | bool and domain is defined # @toto: Do I try run without is defined checking for domain
+  when: global_matomo_tracking_enabled | bool and domain is defined # @todo: Do I try run without is defined checking for domain
 
 - name: Activate Global CSS
   include_role:

tasks/create-domain-conf.yml

@@ -1,5 +0,0 @@
-- name: configure {{domain}}.conf
-  template: 
-    src:  "roles/nginx-docker-reverse-proxy/templates/domain.conf.j2" 
-    dest: "{{nginx.directories.http.servers}}{{domain}}.conf"
-  notify: restart nginx

tasks/create-proxy-with-domain-replace.yml

@@ -1,8 +0,0 @@
-- name: "include role receive certbot certificate"
-  include_role: 
-    name: nginx-https-recieve-certificate
-
-- name: "include task create-domain-conf.yml"
-  include_tasks: create-domain-conf.yml
-  vars: 
-    nginx_docker_reverse_proxy_extra_configuration: "sub_filter '{{source_domain}}' '{{domain}}';"

tasks/nginx-docker-proxy-domain.yml

@@ -2,9 +2,12 @@
   include_role: 
     name: nginx-https-recieve-certificate
 
-- name: "include task create-domain-conf.yml"
+- name: "copy nginx domain configuration to {{nginx.directories.http.servers}}{{domain}}.conf"
-  include_tasks: create-domain-conf.yml
+  template: 
-
+    src:  "roles/nginx-docker-reverse-proxy/templates/domain.conf.j2" 
+    dest: "{{nginx.directories.http.servers}}{{domain}}.conf"
+  notify: restart nginx
+  
 - name: include the docker-oauth2-proxy role
   include_role:
     name: docker-oauth2-proxy