Optimized setup procedure in preparation for automatic keycloak realm import

group_vars/all/01_modes.yml

@@ -5,5 +5,4 @@ mode_reset:   false # Cleans up all CyMaIS files. It's necessary to run to whole
 mode_test:    false # Executes test routines instead of productive routines
 mode_update:  true  # Executes updates
 mode_backup:  true  # Activates the backup before the update procedure
-mode_setup:   false # Execute the setup and initializing procedures
 mode_cleanup: false # Cleanup unused files and configurations

group_vars/all/07_applications.yml

@@ -30,6 +30,7 @@ defaults_applications:
   ## Big Blue Button
   bigbluebutton:
     enable_greenlight:    "true"
+    setup:                false # Set to true in inventory file for initial setup
 
   ## Bluesky
   bluesky:
@@ -91,14 +92,15 @@ defaults_applications:
       version:                        "2.0.0-dev"                               # @todo Attention: Change this as fast as released to latest
     webinterface:                     "lam"                                     # The webinterface which should be used. Possible: lam and phpldapadmin
     administrator_username:           "{{administrator_username}}"
-    administrator_password:           "{{user_administrator_initial_password}}" # CHANGE for security reasons in inventory file
+    # administrator_password:          # CHANGE for security reasons in inventory file
-    administrator_database_password:  "{{user_administrator_initial_password}}" # CHANGE for security reasons in inventory file
+    # administrator_database_password: # CHANGE for security reasons in inventory file
 
   ## Listmonk
   listmonk:
     administrator_username:           "{{administrator_username}}"
     public_api_activated:             False # Security hole. Can be used for spaming
     version:                          "latest"
+    setup:                            false # Set true in inventory file to execute the setup and initializing procedures
 
   ## MariaDB
   mariadb:
@@ -111,7 +113,8 @@ defaults_applications:
   ## Mastodon
   mastodon:
     version:                          "latest"
-    single_user_mode:                 false
+    single_user_mode:                 false                         # Set true for initial setup
+    setup:                            false                         # Set true in inventory file to execute the setup and initializing procedures
 
   ## Matrix
   matrix:
@@ -123,12 +126,13 @@ defaults_applications:
       version:                        "latest"
     element:
       version:                        "latest"
+    setup:                            false                         # Set true in inventory file to execute the setup and initializing procedures
 
   ## Mailu
   mailu:
     version:                  "2024.06"
     domain:                   "{{primary_domain}}"
-    subnet:                   "192.168.203.0/24"
+    setup:                    false                                 # Set true in inventory file to execute the setup and initializing procedures
 
   ## Moodle
   moodle:

group_vars/all/11_iam.yml

@@ -45,13 +45,17 @@ ldap_enabled:                  false
 
 ldap:
   # Enables LDAP for all roles in play if true
-  enabled:          true
+  enabled:  true
   # Distinguished Names (DN)
   dn:
     # Defines the base Distinguished Name (DN) for the LDAP directory, constructed from the second-level domain (SLD) and top-level domain (TLD).
-    root:           "{{_ldap_dn_base}}"
+    root:   "{{_ldap_dn_base}}"
     # Specifies the Distinguished Name (DN) of the LDAP administrator, combining the admin's username with the LDAP root domain.
-    administrator:  "cn={{applications.ldap.administrator_username}},{{_ldap_dn_base}}"
+    bind:   "cn={{applications.ldap.administrator_username}},{{_ldap_dn_base}}"
+    # Dn from which the users should be read
+    users:          "ou=users,{{_ldap_dn_base}}"
+  # Password to access dn.bind
+  bind_credential:  "{{applications.ldap.administrator_database_password}}"
   server:
     domain: "{{applications.ldap.openldap.hostname if applications.ldap.openldap.network.local | bool else domains.ldap}}" # Mapping for public or locale access
     uri:    "{% if applications.ldap.openldap.network.local | bool %}ldap://{{ applications.ldap.openldap.hostname }}:{{ ports.localhost.ldap.openldap }}{% else %}ldaps://{{ domains.ldap }}:{{ ports.public.ldaps.openldap }}{% endif %}"

group_vars/all/13_theming.yml

@@ -6,15 +6,19 @@ global_theming:
       base: "#001f3f"
       
       # Sucess Color
-      success: "#B2D3B2"
+      success:  "#B2D3B2"
       # As the warning color – a light brown (earth)
-      warning: "#D2B48C"
+      warning:  "#D2B48C"
       # For error messages (standard red)
-      error: "#DC3545"
+      error:    "#DC3545"
       # As the info color – a very light blue (symbolizing the sky)
-      info: "#F0F8FF"
+      info:     "#F0F8FF"
     filters:
-      saturation_change:  100
+      saturation_change:  70
       hue_shift:          0
 
-global_theming_enabled: true
+# Global Theming is default enabled for all roles
+# If you want to disable the global css for a role, set 
+# global_theming_enabled: false
+# in var/main.yml
+global_theming_enabled: true

roles/docker-bigbluebutton/tasks/main.yml

@@ -44,17 +44,17 @@
 - name: wait for database
   pause:
     seconds: "{{pause_duration}}"
-  when: mode_setup | bool
+  when: appplications.bigbluebutton.setup | bool
 
 - name: create admin
   command:
     cmd: docker compose exec greenlight bundle exec rake admin:create
     chdir: "{{docker_compose.directories.instance}}"
-  when: mode_setup | bool
+  when: appplications.bigbluebutton.setup | bool
   ignore_errors: true
   register: admin_creation_result
 
 - name: print admin user data
   debug:
     msg: "{{ admin_creation_result.stdout }}"
-  when: mode_setup | bool
+  when: appplications.bigbluebutton.setup | bool

roles/docker-funkwhale/templates/env.j2

@@ -109,8 +109,8 @@ DJANGO_SECRET_KEY={{funkwhale_django_secret}}
 
 LDAP_ENABLED        =   True
 LDAP_SERVER_URI     =   "{{ldap.server.uri}}"
-LDAP_BIND_DN        =   "{{ldap.dn.administrator}}"
+LDAP_BIND_DN        =   "{{ldap.dn.bind}}"
-LDAP_BIND_PASSWORD  =   "{{applications.ldap.administrator_database_password}}"
+LDAP_BIND_PASSWORD  =   "{{ldap.dn.bind_credential}}"
 LDAP_SEARCH_FILTER  =   "(|(cn={0})(mail={0}))"
 LDAP_START_TLS      =   False
 LDAP_ROOT_DN        =   "{{ldap.dn.root}}"

roles/docker-keycloak/templates/realm-export.json.j2

@@ -1923,7 +1923,7 @@
             "false"
           ],
           "usersDn": [
-            "ou=users,dc=veen,dc=world"
+            "{{ldap.dn.users}}"
           ],
           "connectionPooling": [
             "true"
@@ -1941,7 +1941,7 @@
             "true"
           ],
           "bindCredential": [
-            "**********"
+            "{{ldap.bind_credential}}"
           ],
           "changedSyncPeriod": [
             "-1"
@@ -1950,7 +1950,7 @@
             "uid"
           ],
           "bindDn": [
-            "cn=administrator,dc=veen,dc=world"
+            "{{ldap.dn.bind}}"
           ],
           "lastSync": [
             "1737578007"
@@ -1965,7 +1965,7 @@
             "false"
           ],
           "connectionUrl": [
-            "ldap://openldap"
+            "{{ldap.dn.server.uri}}"
           ],
           "syncRegistrations": [
             "true"

roles/docker-ldap/handlers/main.yml

@@ -19,7 +19,7 @@
 
 - name: "Import Access Roles to OpenLDAP"
   shell: >
-    docker exec -i openldap ldapadd -x -D "{{ldap.dn.administrator}}" -w "{{applications.ldap.administrator_database_password}}" -c -f "{{ldif_docker_path}}04_access_profiles.ldif"
+    docker exec -i openldap ldapadd -x -D "{{ldap.dn.bind}}" -w "{{ldap.dn.bind_credential}}" -c -f "{{ldif_docker_path}}04_access_profiles.ldif"
   register: ldapadd_result
   changed_when: "'adding new entry' in ldapadd_result.stdout"
   # Allow return code 0 (all entries added) or 68 (entry already exists)

roles/docker-ldap/templates/docker-compose.yml.j2

@@ -34,7 +34,7 @@ services:
       - '{{ldif_host_path}}:{{ldif_docker_path}}:ro'                      # Mounting all ldif files for import
     healthcheck:
       test: >
-        ldapsearch -x -H ldap://localhost:{{ldap_docker_port}} -b "{{ldap.dn.root}}" -D "{{ldap.dn.administrator}}" -w "{{applications.ldap.administrator_database_password}}"
+        ldapsearch -x -H ldap://localhost:{{ldap_docker_port}} -b "{{ldap.dn.root}}" -D "{{ldap.dn.bind}}" -w "{{ldap.dn.bind_credential}}"
       interval: 30s
       timeout: 10s
       retries: 3

roles/docker-ldap/templates/env.j2

@@ -12,7 +12,7 @@ LDAP_PASSWORDS=             ' '                             # Comma separated li
 LDAP_ROOT=                  {{ldap.dn.root}}                # LDAP baseDN (or suffix) of the LDAP tree. Default: dc=example,dc=org
 
 ## Admin
-LDAP_ADMIN_DN=              {{ldap.dn.administrator}}       # Not well documented. Don't know if this has an effect
+LDAP_ADMIN_DN=              {{ldap.dn.bind}}
 LDAP_CONFIG_ADMIN_ENABLED=  yes
 LDAP_CONFIG_ADMIN_USERNAME= {{applications.ldap.administrator_username}}
 LDAP_CONFIG_ADMIN_PASSWORD= {{applications.ldap.administrator_password}}

roles/docker-ldap/templates/lam.env.j2

@@ -9,5 +9,5 @@ LAM_CONFIGURATION_DATABASE= files
 # LDAP Configuration
 LDAP_SERVER=                {{ldap.server.domain}}                                  # domain of LDAP database root entry
 LDAP_BASE_DN=               {{ldap.dn.root}}                                        # LDAP base DN to overwrite value generated by LDAP_DOMAIN
-LDAP_USER=                  {{ldap.dn.administrator}}                               # LDAP admin user (set as login user for LAM)
+LDAP_USER=                  {{ldap.dn.bind}}                                        # LDAP admin user (set as login user for LAM)
-LDAP_ADMIN_PASSWORD=        {{applications.ldap.administrator_database_password}}   # LDAP admin password
+LDAP_ADMIN_PASSWORD=        {{ldap.dn.bind_credential}}                             # LDAP admin password

roles/docker-listmonk/tasks/main.yml

@@ -26,10 +26,10 @@
 
 - name: flush docker service
   meta: flush_handlers
-  when: mode_setup |bool 
+  when: appplications.listmonk.setup |bool 
 
 - name: setup routine for listmonk
   command:
     cmd:   docker compose run -T --rm application sh -c "yes | ./listmonk --install"
     chdir: "{{docker_compose.directories.instance}}"
-  when: mode_setup |bool 
+  when: appplications.listmonk.setup |bool 

roles/docker-mailu/tasks/main.yml

@@ -17,11 +17,11 @@
 
 - name: flush docker service
   meta: flush_handlers
-  when: mode_setup |bool 
+  when: appplications.mailu.setup |bool 
 
 - name: execute database migration
   command:
     cmd: "docker compose -p mailu exec admin flask mailu admin admin {{primary_domain}} {{mailu_initial_root_password}}"
     chdir: "{{docker_compose.directories.instance}}"
   ignore_errors: true
-  when: mode_setup |bool 
+  when: appplications.mailu.setup |bool 

roles/docker-mastodon/tasks/main.yml

@@ -14,10 +14,10 @@
 
 - name: flush docker service
   meta: flush_handlers
-  when: mode_setup |bool 
+  when: appplications.mastodon.setup |bool 
 
 - name: setup routine for mastodon
   command:
     cmd: "docker-compose run --rm web bundle exec rails db:migrate"
     chdir: "{{docker_compose.directories.instance}}"
-  when: mode_setup |bool 
+  when: appplications.mastodon.setup |bool 

roles/docker-matrix-compose/tasks/main.yml

@@ -136,11 +136,11 @@
     cmd: docker compose exec -it synapse register_new_matrix_user -u {{applications.matrix.administrator_username}} -p {{matrix_admin_password}} -a -c /data/homeserver.yaml http://localhost:8008
     chdir: "{{ docker_compose.directories.instance }}"
   ignore_errors: true
-  when: mode_setup | bool
+  when: appplications.matrix.setup | bool
 
 - name: create chatgpt bot
   command:
     cmd: docker compose exec -it synapse register_new_matrix_user -u chatgptbot -p {{matrix_chatgpt_bridge_user_password}} -a -c /data/homeserver.yaml http://localhost:8008
     chdir: "{{ docker_compose.directories.instance }}"
   ignore_errors: true
-  when: mode_setup | bool
+  when: appplications.matrix.setup | bool

roles/docker-wordpress/vars/main.yml

@@ -2,4 +2,12 @@ application_id:  	          "wordpress"
 wordpress_max_upload_size:  "64M"
 database_type:              "mariadb"
 database_password:  	      "{{wordpress_database_password}}"
-custom_wordpress_image:     "custom_wordpress"
+custom_wordpress_image:     "custom_wordpress"
+
+# Deactivate Global theming for wordpress role
+# due to the reason that wordpress has to much different themes
+# and one styling for all is not possible.
+#
+# May a solution could be to generate a template or css file dedicated
+# for wordpress based on the theming values and import it. 
+global_theming_enabled:     false 

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

@@ -61,9 +61,34 @@ def adjust_color(hex_color, target_lightness=None, lightness_change=0, hue_shift
     
     return '#{:02x}{:02x}{:02x}'.format(new_r, new_g, new_b)
 
+def adjust_color_rgb(hex_color, target_lightness=None, lightness_change=0, hue_shift=0, saturation_change=0):
+    """
+    Wrapper function for adjust_color.
+    
+    Calls adjust_color to get the adjusted HEX color and then converts it to a string 
+    of comma-separated RGB values.
+    """
+    adjusted_hex = adjust_color(
+        hex_color,
+        target_lightness=target_lightness,
+        lightness_change=lightness_change,
+        hue_shift=hue_shift,
+        saturation_change=saturation_change
+    )
+    
+    # Remove '#' and parse the RGB components
+    hex_val = adjusted_hex.lstrip('#')
+    r = int(hex_val[0:2], 16)
+    g = int(hex_val[2:4], 16)
+    b = int(hex_val[4:6], 16)
+    
+    return f"{r},{g},{b}"
+
+# Integration in the FilterModule for Ansible
 class FilterModule(object):
     '''Custom filters for Ansible'''
     def filters(self):
         return {
             'adjust_color': adjust_color,
-        }
+            'adjust_color_rgb': adjust_color_rgb,
+        }

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

@@ -2,7 +2,9 @@
 
 Global Theming Styles – Color and Shadow Variables 
 
-HINT: Better overwritte CSS variables instead of individual elements.
+HINT: 
+- Better overwritte CSS variables instead of individual elements.
+- Don't use !important. If possible use a specific selector.
 
 */
 
@@ -10,6 +12,7 @@ HINT: Better overwritte CSS variables instead of individual elements.
     /** 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=(i / 100),saturation_change=global_theming.css.filters.saturation_change,hue_shift=global_theming.css.filters.hue_shift) }};
+        --color-rgb-{{ "%02d"|format(i) }}: {{ global_theming.css.colors.base | adjust_color_rgb(target_lightness=(i / 100),saturation_change=global_theming.css.filters.saturation_change,hue_shift=global_theming.css.filters.hue_shift) }};
     {% endfor %}
 
     /** Special Action Colors **/
@@ -25,6 +28,7 @@ HINT: Better overwritte CSS variables instead of individual elements.
         /** 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) }};
+            --color-rgb-{{ "%02d"|format(i) }}: {{ global_theming.css.colors.base | adjust_color_rgb(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 **/
@@ -41,20 +45,14 @@ HINT: Better overwritte CSS variables instead of individual elements.
      * @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-color:       rgba(var(--color-rgb-01), 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-box-shadow:           0 0 0 1px rgb(var(--color-rgb-99), / 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 */
 }
 
@@ -73,9 +71,7 @@ HINT: Better overwritte CSS variables instead of individual elements.
 }
 
 /* Discourse */
-:root {
+:root section#main{
-  --scheme-type: light;
-
   /* Base Colors */
   --primary:                   var(--color-20); /* originally #203243 */
   --secondary:                 var(--color-95); /* originally #eef4f7 */
@@ -88,26 +84,32 @@ HINT: Better overwritte CSS variables instead of individual elements.
   --highlight:                 var(--color-70); /* same as header_background */
   --d-selected:                var(--color-85); /* originally #bee0f2 */
   --d-hover:                   var(--color-90); /* originally #d2efff */
+  
+  /* Normally refers to secondary. Somehow this reference does not work.*/
+  --d-sidebar-background:      var(--color-92); 
+  --d-sidebar-footer-fade:     var(--color-92);
+
+
+  /* RGB values */
+  --always-black-rgb:          var(--color-rgb-01);
+  --primary-rgb:               var(--color-rgb-20);
+  --primary-low-rgb:           var(--color-rgb-95);
+  --primary-very-low-rgb:      var(--color-rgb-99);
+  --secondary-rgb:             var(--color-rgb-95);
+  --header_background-rgb:     var(--color-rgb-70);
+  --tertiary-rgb:              var(--color-rgb-40);
+  --highlight-rgb:             var(--color-rgb-70);
+  --success-rgb:               var(--color-rgb-50);
 
-  /* 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-very-low:          var(--color-99); /* 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-50:                var(--color-99); /* originally #f7f9fb */
   --primary-100:               var(--color-95);  /* originally #eef3f7 */
   --primary-200:               var(--color-90);  /* originally #e3ebf2 */
   --primary-300:               var(--color-80);  /* originally #c7d6e4 */
@@ -119,11 +121,11 @@ HINT: Better overwritte CSS variables instead of individual elements.
   --primary-900:               var(--color-20);  /* originally #34516d */
 
   /* Header Primary Scale */
-  --header_primary-low:        var(--color-75);  /* rgb(128, 180, 209) */
+  --header_primary-low:        rgb(var(--color-rgb-75));  /* rgb(128, 180, 209) */
-  --header_primary-low-mid:    var(--color-70);  /* rgb(110, 155, 181) */
+  --header_primary-low-mid:    rgb(var(--color-rgb-70));  /* rgb(110, 155, 181) */
-  --header_primary-medium:     var(--color-60);  /* rgb(93, 132, 155) */
+  --header_primary-medium:     rgb(var(--color-rgb-60));  /* rgb(93, 132, 155) */
-  --header_primary-high:       var(--color-50);  /* rgb(78, 112, 132) */
+  --header_primary-high:       rgb(var(--color-rgb-50));  /* rgb(78, 112, 132) */
-  --header_primary-very-high:  var(--color-20);  /* rgb(52, 76, 94) */
+  --header_primary-very-high:  rgb(var(--color-rgb-20));  /* rgb(52, 76, 94) */
 
   /* Secondary Scale */
   --secondary-low:             var(--color-20);  /* originally #2f5163 */
@@ -132,12 +134,12 @@ HINT: Better overwritte CSS variables instead of individual elements.
   --secondary-very-high:       var(--color-90);  /* originally #d7e5ec */
 
   /* Tertiary Scale */
-  --tertiary-very-low:         var(--color-100); /* originally #eaf0f3 */
+  --tertiary-very-low:         var(--color-99); /* 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-50:               var(--color-99); /* originally #eaf0f3 */
   --tertiary-100:              var(--color-95);  /* originally #e6edf1 */
   --tertiary-200:              var(--color-90);  /* originally #e4ebf0 */
   --tertiary-300:              var(--color-85);  /* originally #dfe8ee */
@@ -158,17 +160,17 @@ HINT: Better overwritte CSS variables instead of individual elements.
   --highlight-high:           var(--color-30);  /* originally #286688 */
 
   /* Combination Variables */
-  --blend-primary-secondary-5:        var(--color-95);  /* originally rgb(232, 238, 241) */
+  --blend-primary-secondary-5:          rgb(var(--color-rgb-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-high:  var(--color-75);  /* originally #acc2d7 */
-  --primary-low-mid-or-secondary-low:    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-low-or-tertiary-high:      var(--color-95);  /* originally #dfe8ee */
-  --tertiary-med-or-tertiary:             var(--color-60);  /* originally #96b4c5 */
+  --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 */
 
@@ -177,30 +179,307 @@ HINT: Better overwritte CSS variables instead of individual elements.
   --float-kit-arrow-fill-color:         var(--secondary);      /* already mapped above */
 }
 
-/** Keycloak Overrides **/ 
+
+/* Keycloak */
 :root{
-    --pf-v5-global--Color--100:         var(--color-40);
+  /* --- Palette Black (Graustufen) --- */
-    --pf-v5-global--Color--200:         var(--color-60);
+  --pf-v5-global--palette--black-100:   var(--color-95);  /* #fafafa */
-    --pf-v5-global--Color--light-100:   var(--color-40);
+  --pf-v5-global--palette--black-150:   var(--color-90);  /* #f5f5f5 */
-    --pf-v5-global--Color--light-200:   var(--color-60);
+  --pf-v5-global--palette--black-200:   var(--color-85);  /* #f0f0f0 */
-    --pf-v5-global--Color--light-300:   var(--color-70);
+  --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 */
+
+  /* --- 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-99);
+  --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-99);
+  --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);
+
+  /* --- 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-99);
+  --pf-v5-global--icon--Color--light--dark:    var(--color-40);
+  --pf-v5-global--icon--Color--dark--dark:     var(--color-10);
+}
+
+
+/* gitea */
+:root {
+  /* Base and derived colors are now referenced from the computed scale */
+  --color-primary:           var(--color-50);
+  --color-primary-contrast:  var(--color-99);
+  --color-primary-dark-1:    var(--color-48);
+  --color-primary-dark-2:    var(--color-47);
+  --color-primary-dark-3:    var(--color-46);
+  --color-primary-dark-4:    var(--color-45);
+  --color-primary-dark-5:    var(--color-44);
+  --color-primary-dark-6:    var(--color-43);
+  --color-primary-dark-7:    var(--color-42);
+  --color-primary-light-1:   var(--color-52);
+  --color-primary-light-2:   var(--color-53);
+  --color-primary-light-3:   var(--color-54);
+  --color-primary-light-4:   var(--color-55);
+  --color-primary-light-5:   var(--color-57);
+  --color-primary-light-6:   var(--color-59);
+  --color-primary-light-7:   var(--color-61);
+
+  /* Alpha variants reference the base RGB variable */
+  --color-primary-alpha-10:  rgba(var(--color-rgb-50), 0.10);
+  --color-primary-alpha-20:  rgba(var(--color-rgb-50), 0.20);
+  --color-primary-alpha-30:  rgba(var(--color-rgb-50), 0.30);
+  --color-primary-alpha-40:  rgba(var(--color-rgb-50), 0.40);
+  --color-primary-alpha-50:  rgba(var(--color-rgb-50), 0.50);
+  --color-primary-alpha-60:  rgba(var(--color-rgb-50), 0.60);
+  --color-primary-alpha-70:  rgba(var(--color-rgb-50), 0.70);
+  --color-primary-alpha-80:  rgba(var(--color-rgb-50), 0.80);
+  --color-primary-alpha-90:  rgba(var(--color-rgb-50), 0.90);
+
+  --color-primary-hover:     var(--color-primary-dark-1);
+  --color-primary-active:    var(--color-primary-dark-2);
+
+  /* Secondary colors */
+  --color-secondary:         var(--color-80);
+  --color-secondary-dark-1:  var(--color-78);
+  --color-secondary-dark-2:  var(--color-76);
+  --color-secondary-dark-3:  var(--color-74);
+  --color-secondary-dark-4:  var(--color-72);
+  --color-secondary-dark-5:  var(--color-70);
+  --color-secondary-dark-6:  var(--color-68);
+  --color-secondary-dark-7:  var(--color-66);
+  --color-secondary-dark-8:  var(--color-64);
+  --color-secondary-dark-9:  var(--color-62);
+  --color-secondary-dark-10: var(--color-60);
+  --color-secondary-dark-11: var(--color-58);
+  --color-secondary-dark-12: var(--color-56);
+  --color-secondary-dark-13: var(--color-54);
+  --color-secondary-light-1: var(--color-92);
+  --color-secondary-light-2: var(--color-93);
+  --color-secondary-light-3: var(--color-94);
+  --color-secondary-light-4: var(--color-95);
+
+  --color-secondary-alpha-10: rgba(var(--color-rgb-80), 0.10);
+  --color-secondary-alpha-20: rgba(var(--color-rgb-80), 0.20);
+  --color-secondary-alpha-30: rgba(var(--color-rgb-80), 0.30);
+  --color-secondary-alpha-40: rgba(var(--color-rgb-80), 0.40);
+  --color-secondary-alpha-50: rgba(var(--color-rgb-80), 0.50);
+  --color-secondary-alpha-60: rgba(var(--color-rgb-80), 0.60);
+  --color-secondary-alpha-70: rgba(var(--color-rgb-80), 0.70);
+  --color-secondary-alpha-80: rgba(var(--color-rgb-80), 0.80);
+  --color-secondary-alpha-90: rgba(var(--color-rgb-80), 0.90);
+
+  --color-secondary-button:  var(--color-secondary-dark-4);
+  --color-secondary-hover:   var(--color-secondary-dark-5);
+  --color-secondary-active:  var(--color-secondary-dark-6);
+
+  /* Console Colors */
+  --color-console-fg:         var(--color-98);
+  --color-console-fg-subtle:  var(--color-85);
+  --color-console-bg:         var(--color-10);
+  --color-console-border:     var(--color-40);
+  --color-console-hover-bg:   var(--color-42);
+  --color-console-active-bg:  var(--color-40);
+  --color-console-menu-bg:    var(--color-38);
+  --color-console-menu-border:var(--color-45);
+
+  /* Body, Text, and Miscellaneous Colors */
+  --color-white:      var(--color-99);
+  --color-grey:       var(--color-60);
+  --color-grey-light: var(--color-65);
+
+  --color-body:       var(--color-white);
+  --color-text-dark:  var(--color-10);
+  --color-text:       var(--color-40);
+  --color-text-light: var(--color-60);
+  --color-text-light-1: var(--color-65);
+  --color-text-light-2: var(--color-70);
+  --color-text-light-3: var(--color-75);
+
+  --color-footer:     var(--color-nav-bg);
+  --color-timeline:   var(--color-80);
+
+  /* Input Colors */
+  --color-input-text: var(--color-10);
+  --color-input-background: var(--color-white);
+  --color-input-toggle-background: var(--color-80);
+  --color-input-border: var(--color-secondary);
+  --color-input-border-hover: var(--color-secondary-dark-1);
+
+  /* Effects */
+  --color-light: var(--color-05);
+  --color-light-mimic-enabled: rgba(var(--color-rgb-05), calc(6 / 255 * 222 / 255 / 0.55));
+  --color-light-border: var(--color-05);
+  --color-hover: var(--color-05);
+  --color-hover-opaque: var(--color-95);
+  --color-active: var(--color-05);
+
+  /* Menu, Card, and Markup Colors */
+  --color-menu: var(--color-99);
+  --color-card: var(--color-99);
+  --color-markup-table-row: var(--color-01);
+  --color-markup-code-block: var(--color-01);
+  --color-markup-code-inline: var(--color-01);
+  --color-button: var(--color-99);
+  --color-code-bg: var(--color-99);
+  --color-shadow: var(--color-05);
+  --color-shadow-opaque: var(--color-85);
+  --color-secondary-bg: var(--color-95);
+  --color-expand-button: var(--color-98);
+  --color-placeholder-text: var(--color-text-light-3);
+  --color-editor-line-highlight: var(--color-primary-light-6);
+  --color-project-column-bg: var(--color-secondary-light-4);
+  --color-caret: var(--color-10);
+
+  /* Reaction and Tooltip Colors */
+  --color-reaction-bg: var(--color-05);
+  --color-reaction-hover-bg: var(--color-primary-light-5);
+  --color-reaction-active-bg: var(--color-primary-light-6);
+  --color-tooltip-text: var(--color-99);
+  --color-tooltip-bg: var(--color-05);
+
+  /* Navigation Colors */
+  --color-nav-bg: var(--color-99);
+  --color-nav-hover-bg: var(--color-secondary-light-1);
+  --color-nav-text: var(--color-40);
+  --color-secondary-nav-bg: var(--color-99);
+
+  /* Label and Accent Colors */
+  --color-label-text: var(--color-40);
+  --color-label-bg: var(--color-50);
+  --color-label-hover-bg: var(--color-60);
+  --color-label-active-bg: var(--color-70);
+  --color-accent: var(--color-primary-light-1);
+  --color-small-accent: var(--color-primary-light-6);
+  --color-highlight-fg: var(--color-10);
+  --color-highlight-bg: var(--color-99);
+  --color-overlay-backdrop: var(--color-05);
+}
 
 /** Mastodon Overrides **/
-:root{
+div#mastodon, div#admin-wrapper {
-    --surface-variant-background-color: var(--color-80);
+  /* Dropdown */
+  --dropdown-border-color: var(--color-35);
+  --dropdown-background-color: rgba(var(--color-rgb-03), 0.9);
+  --dropdown-shadow: 0 20px 25px -5px rgba(var(--color-rgb-01), 0.25),
+                       0 8px 10px -6px rgba(var(--color-rgb-01), 0.25);
+
+  /* Modal */
+  --modal-background-color: rgba(var(--color-rgb-03), 0.7);
+  --modal-background-variant-color: rgba(var(--color-rgb-05), 0.7);
+  --modal-border-color: var(--color-35);
+
+  /* Background */
+  --background-border-color: var(--color-82);
+  --background-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
+  --background-color: var(--color-93);
+  --background-color-tint: rgba(var(--color-rgb-03), 0.9);
+
+  /* Surface */
+  --surface-background-color: var(--color-90);
+  --surface-variant-background-color: var(--color-89);
+  --surface-variant-active-background-color: var(--color-35);
+  --on-surface-color: rgba(var(--color-rgb-05), 0.5);
+
+  /* Media & Overlay */
+  --media-outline-color: rgba(var(--color-rgb-99), 0.15);
+  --overlay-icon-shadow: drop-shadow(0 0 8px rgba(var(--color-rgb-01), 0.25));
+}
+
+/* Modal Overwrittes */ 
+div.modal div.modal-content {
+  /* Colors – adjusted to the existing scheme */
+  --bs-modal-color: var(--color-21);                /* Text color: dark contrast against the light modal background */
+  --bs-modal-bg: var(--color-82);                   /* Background color, as desired */
+  --bs-modal-border-color: var(--color-82);         /* A slightly darker border than the background */
+  --bs-modal-header-border-color: var(--color-87);  /* Same shade as the modal border */
+  --bs-modal-footer-bg: var(--color-87);            /* A slightly offset footer background (a bit darker than the main area) */
+  --bs-modal-footer-border-color: var(--color-87);
 }
 
 /** Nextcloud Specific**/
 :root{
-    --color-main-background:        None;
+    --color-main-background:        var(--color-84);
-    --color-main-background-rgb:    None;
+    --color-main-background-rgb:    rgba(var(--color-rgb-84),0.83);
     --color-primary-element:        var(--color-80);
     --color-main-text:              var(--color-40);
     --color-background-hover:       var(--color-65);
 
     /** Calendar **/
-    --color-background-dark:        var(--info-color); /** Days which aren't in the current month **/
+    --color-background-dark:        var(--color-73); /** Days which aren't in the current month **/
     --color-primary-element-light:  var(--color-65);
 }
 
@@ -214,7 +493,7 @@ HINT: Better overwritte CSS variables instead of individual elements.
 :root {
     /* Base Colors */
     --light:                  var(--color-05);    /* Very dark (was #000) */
-    --dark:                   var(--color-100);   /* Very light (was #fff) */
+    --dark:                   var(--color-99);   /* Very light (was #fff) */
     
     /* Backgrounds */
     --body-bg:                var(--color-05);    /* Main background: very dark */
@@ -246,237 +525,26 @@ HINT: Better overwritte CSS variables instead of individual elements.
     --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, html[native-dark-active] {
-    background-color: var(--color-93) !important;
+    background-color: var(--color-93);
-    background-image: none !important;
+    background-image: none;
-    color: var(--color-40) !important;
+    color: var(--color-40);
     /* Use the corporate-design font family */
     font-family: "Liberation Sans", Arial, sans-serif;
 }
 
 /* Links (Color Only) */
 a {
-    color: var(--color-50) !important;
+    color: var(--color-50);
 }
 
 /* Buttons (Background, Text, Border, and Shadow)
    Now using a button background that is only slightly darker than the overall background */
 html[native-dark-active] button, html[native-dark-active] .btn, button, .btn {
-    background-color: var(--color-87) !important;
+    background-color: var(--color-87);
-    color: var(--color-50) !important;
+    color: var(--color-50);
-    border-color: var(--color-80) !important;
+    border-color: var(--color-80);
     cursor: pointer;
 }
 
@@ -484,6 +552,33 @@ button:hover, .btn:hover {
     filter: brightness(0.9);
 }
 
+/* Inputs & Forms in Light Mode (Using a Light Tone from the Corporate Design) */
+input, textarea, select {
+    background-color: var(--color-82);  /* Instead of var(--color-90) */
+    color: var(--color-40);
+    border-color: var(--color-70);
+}
+input:focus, textarea:focus, select:focus {
+    border-color: var(--color-50);
+}
+
+/* Tables (Borders and Header Colors) */
+th, td {
+    border-color: var(--color-70) !important;
+}
+
+thead {
+    background-color: var(--color-80) !important;
+    color: var(--color-40) !important;
+}
+
+/* Headings (Text Color) */
+h1, h2, h3, h4, h5, h6, p{
+    color: var(--color-10) !important;
+}
+
+/* Bootstrap */
+
 /* States: Success, Warning, Error, Info (Background and Text Colors) */
 .success, .alert-success {
     background-color: var(--success-color) !important;
@@ -502,21 +597,11 @@ button:hover, .btn:hover {
     color: var(--color-40) !important;
 }
 
-/* Inputs & Forms in Light Mode (Using a Light Tone from the Corporate Design) */
-input, textarea, select {
-    background-color: var(--color-82) !important;  /* Instead of var(--color-90) */
-    color: var(--color-40) !important;
-    border-color: var(--color-70) !important;
-}
-input:focus, textarea:focus, select:focus {
-    border-color: var(--color-50) !important;
-}
-
 /* Navigation (Background and Text Colors) */
 .navbar, .navbar-light, .navbar-dark {
-    background-color: var(--color-90) !important;
+    background-color:   var(--color-90) !important;
-    color: var(--color-50) !important;
+    color:              var(--color-50) !important;
-    border-color: var(--color-85) !important;
+    border-color:       var(--color-85) !important;
 }
 
 .navbar a {
@@ -527,20 +612,6 @@ input:focus, textarea:focus, select:focus {
     color: var(--color-40) !important;
 }
 
-.card-body {
-    color: var(--color-40) !important;
-}
-
-/* Tables (Borders and Header Colors) */
-th, td {
-    border-color: var(--color-70) !important;
-}
-
-thead {
-    background-color: var(--color-80) !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 {
@@ -548,9 +619,8 @@ thead {
     border-color: var(--color-85) !important;
 }
 
-/* Headings (Text Color) */
+.card-body {
-h1, h2, h3, h4, h5, h6, p{
+    color: var(--color-40) !important;
-    color: var(--color-10) !important;
 }
 
 /* Dropdown Menu and Submenu (Background, Text, and Shadow) */
@@ -571,11 +641,6 @@ h1, h2, h3, h4, h5, h6, p{
     color: var(--color-40) !important;
 }
 
-/* Ensure the button itself uses the light text color. Occurred in Mastodon */
-button.icon-button {
-    color: var(--color-99) !important;
-}
-
 /* Keycloak Header */
 div#app header, div#app header *{
     background-color: var(--color-60) !important;
@@ -593,25 +658,10 @@ div#app header, div#app header *{
     background-color: var(--color-90) !important;
 }
 
-
-/** Mastodon Specific **/ 
-div#mastodon div.compose-panel div.compose-form__highlightable{
-    background-color: var(--color-90) !important;
-}
-
-div#mastodon strong{
-    color: var(--color-40) !important;
-}
-
 /** Nextcloud specific **/
 html.ng-csp header#header{
-    color: var(--color-90) !important;
+    color:              var(--color-90) !important;
-    background-color: var(--color-80) !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: var(--color-80) !important;
 }
 
 html.ng-csp div#postsetupchecks ul.warnings{
@@ -622,8 +672,36 @@ html.ng-csp div#postsetupchecks ul.info{
     background-color: transparent !important;
 }
 
-div#content-vue p, div#content-vue span{
+div#mastodon .column-link{
-    color: var(--color-40) !important;
+    color: var(--color-55); 
+}
+
+div#mastodon .column-back-button {
+    color: var(--color-58);
+}
+
+div#mastodon textarea, div#mastodon input, div#mastodon .compose-form__highlightable {
+    background-color: var(--color-89);
+    color: var(--color-19);
+}
+
+div#mastodon .status-card__title, div#mastodon .display-name strong{
+    color: var(--color-33);
+}
+
+div#mastodon a.unhandled-link, div#mastodon .dropdown-button, div#mastodon .status__content a, div#mastodon .status-card__author{
+    color: var(--color-29);
+}
+div#mastodon .dropdown-button{
+    border: 1px solid #8c8dff;
+}
+
+div#mastodon .button, div#mastodon .button:active, div#mastodon .button:focus, div#mastodon .button:hover{
+    background-color: var(--color-71);
+}
+
+.compose-form__actions .icon-button {
+    color: var(--color-28);
 }
 
 /** OpenProject **/
@@ -662,8 +740,3 @@ div.master, div.kanban-header, div.kanban-table-inner, section.kanban button,a.d
 section.kanban h1, section.kanban h2{
     color: var(--color-40) !important;
 }
-
-/* Wordpress */
-.has-contrast-background-color{
-    color: var(--color-90) !important;
-}