Implemented Global CSS draft

README.md

@@ -73,7 +73,7 @@ Contact me for more details:
 ## Showcases
 The following list showcases the extensive range of solutions that CyMaIS incorporates, each playing a vital role in providing a comprehensive, efficient, and secure IT infrastructure setup:
 
-[ELK Stack](./roles/docker-elk), [Intel Driver](./roles/driver-intel), [Nginx Docker Reverse Proxy](./roles/nginx-docker-reverse-proxy), [Sudo](./roles/sudo), [Funkwhale](./roles/docker-funkwhale), [MSI Keyboard Color Driver](./roles/driver-msi-keyboard-color), [Nginx Domain Redirect](./roles/nginx-domain-redirect), [GnuCash](./roles/pc-gnucash), [Backup Data to USB](./roles/backup-data-to-usb), [Gitea](./roles/docker-gitea), [Non-Free Driver](./roles/driver-non-free), [Nginx Homepage](./roles/nginx-static-repository), [Jrnl](./roles/pc-jrnl), [Systemd Notifier](./roles/systemd-notifier), [Backup Docker to Local](./roles/backup-docker-to-local), [Jenkins](./roles/docker-jenkins), [Git](./roles/git), [Nginx HTTPS](./roles/nginx-https), [Latex](./roles/pc-latex), [Email Notifier](./roles/systemd-notifier-email), [Remote to Local Backup Solution](./roles/backup-remote-to-local), [Joomla](./roles/docker-joomla), [Heal Defect Docker Installations](./roles/heal-docker), [Nginx Matomo Tracking](./roles/nginx-matomo-tracking), [LibreOffice](./roles/pc-libreoffice), [Telegram Notifier](./roles/systemd-notifier-telegram), [Listmonk](./roles/docker-listmonk), [Btrfs Health Check](./roles/health-btrfs), [Nginx WWW Redirect](./roles/nginx-www-redirect), [Network Analyze Tools](./roles/pc-network-analyze-tools), [System Security](./roles/system-security), [Mailu](./roles/docker-mailu), [Disc Space Health Check](./roles/health-disc-space), [Administrator Tools](./roles/pc-administrator-tools), [Nextcloud Client](./roles/pc-nextcloud), [Swapfile Setup](./roles/system-swapfile), [Backups Cleanup](./roles/cleanup-backups-service), [Mastodon](./roles/docker-mastodon), [Docker Container Health Checker](./roles/health-docker-container), [Blu-ray Player Tools](./roles/pc-bluray-player-tools), [Office](./roles/pc-office), [Update Solutions](./roles/update), [Matomo](./roles/docker-matomo), [Docker Volumes Health Checker](./roles/health-docker-volumes), [Caffeine](./roles/pc-caffeine), [Qbittorrent](./roles/pc-qbittorrent), [Update Apt](./roles/update-apt), [Disc Space Cleanup](./roles/cleanup-disc-space), [Matrix](./roles/docker-matrix), [Health Journalctl](./roles/health-journalctl), [Designer Tools](./roles/pc-designer-tools), [Security Tools](./roles/pc-security-tools), [Update Docker](./roles/update-docker), [Failed Docker Backups Cleanup](./roles/cleanup-failed-docker-backups), [MediaWiki](./roles/docker-mediawiki), [Nginx Health Checker](./roles/health-nginx), [Developer Tools](./roles/pc-developer-tools), [Spotify](./roles/pc-spotify), [Update Pacman](./roles/update-pacman), [Client Wireguard](./roles/client-wireguard), [MyBB](./roles/docker-mybb), [Developer Tools for Arduino](./roles/pc-developer-tools-arduino), [SSH](./roles/pc-ssh), [Update Yay](./roles/update-yay), [Client Setup for Wireguard Behind Firewall](./roles/client-wireguard-behind-firewall), [Nextcloud Server](./roles/docker-nextcloud), [Hunspell](./roles/hunspell), [Developer Tools for Bash](./roles/pc-developer-tools-bash), [Streaming Tools](./roles/pc-streaming-tools), [Administrator](./roles/user-administrator), [Docker](./roles/docker), [Peertube](./roles/docker-peertube), [Java](./roles/java), [Developer Tools for Java](./roles/pc-developer-tools-java), [Tor Browser](./roles/pc-torbrowser), [Video Conference](./roles/pc-video-conference), [Wireguard](./roles/wireguard), [Akaunting](./roles/docker-akaunting), [Pixelfed](./roles/docker-pixelfed), [Journalctl](./roles/journalctl), [Developer Tools for PHP](./roles/pc-developer-tools-php), [Virtual Box](./roles/pc-virtual-box), [Postfix](./roles/postfix), [Attendize](./roles/docker-attendize), [Wordpress](./roles/docker-wordpress), [Locales](./roles/locales), [Docker for End Users](./roles/pc-docker), [Games](./roles/pc-games), [Python Pip](./roles/python-pip), [Discourse](./roles/docker-discourse), [Epson Multiprinter Driver](./roles/driver-epson-multiprinter), [Nginx Certbot](./roles/nginx-certbot), [Git](./roles/pc-git), [SSHD](./roles/sshd), [YOURLS](./roles/docker-yourls), [BigBlueButton](./roles/docker-bigbluebutton),[System Maintenance Lock](./roles/system-maintenance-lock),[Open Project](./roles/docker-openproject)...
+[ELK Stack](./roles/docker-elk), [Intel Driver](./roles/driver-intel), [Nginx Docker Reverse Proxy](./roles/nginx-docker-reverse-proxy), [Sudo](./roles/sudo), [Funkwhale](./roles/docker-funkwhale), [MSI Keyboard Color Driver](./roles/driver-msi-keyboard-color), [Nginx Domain Redirect](./roles/nginx-domain-redirect), [GnuCash](./roles/pc-gnucash), [Backup Data to USB](./roles/backup-data-to-usb), [Gitea](./roles/docker-gitea), [Non-Free Driver](./roles/driver-non-free), [Nginx Homepage](./roles/nginx-static-repository), [Jrnl](./roles/pc-jrnl), [Systemd Notifier](./roles/systemd-notifier), [Backup Docker to Local](./roles/backup-docker-to-local), [Jenkins](./roles/docker-jenkins), [Git](./roles/git), [Nginx HTTPS](./roles/nginx-https), [Latex](./roles/pc-latex), [Email Notifier](./roles/systemd-notifier-email), [Remote to Local Backup Solution](./roles/backup-remote-to-local), [Joomla](./roles/docker-joomla), [Heal Defect Docker Installations](./roles/heal-docker), [Nginx Matomo Tracking](./roles/nginx-global-matomo), [LibreOffice](./roles/pc-libreoffice), [Telegram Notifier](./roles/systemd-notifier-telegram), [Listmonk](./roles/docker-listmonk), [Btrfs Health Check](./roles/health-btrfs), [Nginx WWW Redirect](./roles/nginx-global-www), [Network Analyze Tools](./roles/pc-network-analyze-tools), [System Security](./roles/system-security), [Mailu](./roles/docker-mailu), [Disc Space Health Check](./roles/health-disc-space), [Administrator Tools](./roles/pc-administrator-tools), [Nextcloud Client](./roles/pc-nextcloud), [Swapfile Setup](./roles/system-swapfile), [Backups Cleanup](./roles/cleanup-backups-service), [Mastodon](./roles/docker-mastodon), [Docker Container Health Checker](./roles/health-docker-container), [Blu-ray Player Tools](./roles/pc-bluray-player-tools), [Office](./roles/pc-office), [Update Solutions](./roles/update), [Matomo](./roles/docker-matomo), [Docker Volumes Health Checker](./roles/health-docker-volumes), [Caffeine](./roles/pc-caffeine), [Qbittorrent](./roles/pc-qbittorrent), [Update Apt](./roles/update-apt), [Disc Space Cleanup](./roles/cleanup-disc-space), [Matrix](./roles/docker-matrix), [Health Journalctl](./roles/health-journalctl), [Designer Tools](./roles/pc-designer-tools), [Security Tools](./roles/pc-security-tools), [Update Docker](./roles/update-docker), [Failed Docker Backups Cleanup](./roles/cleanup-failed-docker-backups), [MediaWiki](./roles/docker-mediawiki), [Nginx Health Checker](./roles/health-nginx), [Developer Tools](./roles/pc-developer-tools), [Spotify](./roles/pc-spotify), [Update Pacman](./roles/update-pacman), [Client Wireguard](./roles/client-wireguard), [MyBB](./roles/docker-mybb), [Developer Tools for Arduino](./roles/pc-developer-tools-arduino), [SSH](./roles/pc-ssh), [Update Yay](./roles/update-yay), [Client Setup for Wireguard Behind Firewall](./roles/client-wireguard-behind-firewall), [Nextcloud Server](./roles/docker-nextcloud), [Hunspell](./roles/hunspell), [Developer Tools for Bash](./roles/pc-developer-tools-bash), [Streaming Tools](./roles/pc-streaming-tools), [Administrator](./roles/user-administrator), [Docker](./roles/docker), [Peertube](./roles/docker-peertube), [Java](./roles/java), [Developer Tools for Java](./roles/pc-developer-tools-java), [Tor Browser](./roles/pc-torbrowser), [Video Conference](./roles/pc-video-conference), [Wireguard](./roles/wireguard), [Akaunting](./roles/docker-akaunting), [Pixelfed](./roles/docker-pixelfed), [Journalctl](./roles/journalctl), [Developer Tools for PHP](./roles/pc-developer-tools-php), [Virtual Box](./roles/pc-virtual-box), [Postfix](./roles/postfix), [Attendize](./roles/docker-attendize), [Wordpress](./roles/docker-wordpress), [Locales](./roles/locales), [Docker for End Users](./roles/pc-docker), [Games](./roles/pc-games), [Python Pip](./roles/python-pip), [Discourse](./roles/docker-discourse), [Epson Multiprinter Driver](./roles/driver-epson-multiprinter), [Nginx Certbot](./roles/nginx-certbot), [Git](./roles/pc-git), [SSHD](./roles/sshd), [YOURLS](./roles/docker-yourls), [BigBlueButton](./roles/docker-bigbluebutton),[System Maintenance Lock](./roles/system-maintenance-lock),[Open Project](./roles/docker-openproject)...
 
 ## License
 

SERVER_APPLICATIONS.md

@@ -21,9 +21,9 @@ Focuses on web server roles and applications, covering SSL certificates, Nginx c
 - **[Nginx-Docker-Reverse-Proxy](./roles/nginx-docker-reverse-proxy/)**: Sets up a reverse proxy for Docker containers.
 - **[nginx-static-repository](./roles/nginx-static-repository/)**: Configures a homepage for Nginx.
 - **[Nginx-Https](./roles/nginx-https/)**: Enables HTTPS configuration for Nginx.
-- **[Nginx-Matomo-Tracking](./roles/nginx-matomo-tracking/)**: Integrates Matomo tracking with Nginx.
+- **[nginx-global-matomo](./roles/nginx-global-matomo/)**: Integrates Matomo tracking with Nginx.
 - **[Nginx-Domain-Redirect](./roles/nginx-domain-redirect/)**: Manages URL redirects in Nginx.
-- **[Nginx-WWW-Redirect](./roles/nginx-www-redirect/)**: Redirects all domains with the prefix www. from www.domain.tld to domain.tld
+- **[nginx-global-www](./roles/nginx-global-www/)**: Redirects all domains with the prefix www. from www.domain.tld to domain.tld
 - **[Nginx-Certbot](./roles/nginx-certbot/)**: Integrates Certbot with Nginx for SSL certificates.
 - **[Postfix](./roles/postfix/)**: Setup for the Postfix mail transfer agent.
 

group_vars/all/05_nginx.yml

@@ -11,8 +11,10 @@ nginx:
     streams:        "/etc/nginx/conf.d/streams/"      # Contains streams configuration e.g. for ldaps
     well_known:     "/usr/share/nginx/well-known/"    # Path where well-known files are stored
     homepage:       "/usr/share/nginx/homepage/"      # Path where the static homepage files are stored. @todo Move this variable to the role
+    global:         "/var/www/global/"                # Directory containing files which will be globaly accessable
+  user:             "http"                            # Default nginx user in ArchLinux
 
 ## Nginx static repository
 nginx_static_repository_address: NULL #This should contain the url to an git repository which has a static homepage included and an index.html file. @todo move this variable to the role
 
-nginx_matomo_tracking:                false   # Activates matomo tracking on all html pages
+global_matomo_tracking_enabled:                false   # Activates matomo tracking on all html pages

group_vars/all/13_theming.yml

@@ -0,0 +1,20 @@
+global_theming:
+  enabled: true
+  css:
+    colors:
+      primary: "#007BFF"            # Main brand color (e.g., buttons, highlights)
+      secondary: "#0056B3"          # Secondary color (e.g., navigation, footers)
+      background: "#FFFFFF"         # Background color (light mode)
+      background_dark: "#1E1E1E"    # Background color (dark mode)
+      text: "#333333"               # Main text color (dark mode text: "#EAEAEA")
+      accent: "#FF9900"             # Accent color (used for highlights, CTAs)
+      success: "#28A745"            # Success color (e.g., confirmation messages)
+      warning: "#FFC107"            # Warning color (e.g., alerts, notifications)
+      error: "#DC3545"              # Error color (e.g., form validation errors)
+      info: "#17A2B8"               # Information color (e.g., tooltips, messages)
+      link: "#0056B3"               # Link color (often matches primary/secondary)
+      button_text: "#FFFFFF"        # Button text color
+      shadow: "rgba(0, 0, 0, 0.1)"  # Shadow color for UI elements
+      border: "#DDDDDD"             # Border color for UI components
+
+global_theming_enabled: false       # Needs to be set to true in every vars/main.yml of every role which supports this

playbook.servers.yml

@@ -242,6 +242,6 @@
   hosts: www_redirect
   become: true
   roles:
-   -  role: nginx-www-redirect
+   -  role: nginx-global-www
 
 - import_playbook: playbook.destructor.yml

roles/docker-bigbluebutton/tasks/main.yml

@@ -6,8 +6,8 @@
 # Leave this in the code until big blue button was working for a while. 
 # This is necessary due to the reason that big blue button wasn't fully tested after refactoring
 #
-#- name: "include task certbot-matomo.yml"
+#- name: "include task certbot-and-globals.yml"
-#  include_tasks: certbot-matomo.yml
+#  include_tasks: certbot-and-globals.yml
 #
 #- name: configure {{domain}}.conf
 #  template: 

roles/docker-gitea/README.md

@@ -27,3 +27,7 @@ To access the database execute
 ```
 ## bash in application
 docker-compose exec -it application /bin/sh
+
+## More Information
+- [Gitea LDAP integration](https://docs.gitea.com/usage/authentication)
+- [Gitea Alternatives](https://chatgpt.com/share/67a5f599-c9b0-800f-87fe-49a3b61263e6)

roles/docker-mastodon/tasks/create-domains.yml

@@ -1,5 +1,5 @@
-- name: "include task certbot-matomo.yml"
+- name: "include task certbot-and-globals.yml"
-  include_tasks: certbot-matomo.yml
+  include_tasks: certbot-and-globals.yml
 
 - name: configure {{domain}}.conf
   template: 

roles/docker-mastodon/templates/mastodon.conf.j2

@@ -8,10 +8,7 @@ server {
 
   {% include 'roles/letsencrypt/templates/ssl_header.j2' %}
 
-  {% if nginx_matomo_tracking | bool %}
+  {% include 'roles/nginx-global/templates/global.includes.conf.j2'%}
-    {% include 'roles/nginx-matomo-tracking/templates/matomo-tracking.conf.j2' %}
-  {% endif %}
-
 
   keepalive_timeout    70;
   sendfile             on;

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

@@ -3,8 +3,8 @@
   include_role: 
     name: docker-central-database
 
-- name: "include task certbot-matomo.yml"
+- name: "include task certbot-and-globals.yml"
-  include_tasks: certbot-matomo.yml
+  include_tasks: certbot-and-globals.yml
   vars:
     domain:     "{{domains.matrix_synapse}}"
     http_port:  "{{ports.localhost.http_ports.matrix_synapse}}"

roles/docker-matrix-compose/templates/nginx.conf.j2

@@ -10,9 +10,6 @@ server {
     listen 8448 ssl default_server;
     listen [::]:8448 ssl default_server;
 
-    {% if nginx_matomo_tracking | bool %}
+    {% include 'roles/nginx-global/templates/global.includes.conf.j2'%}
-        {% include 'roles/nginx-matomo-tracking/templates/matomo-tracking.conf.j2' %}
-    {% endif %}
-
     {% include 'roles/nginx-docker-reverse-proxy/templates/proxy_pass.conf.j2' %}
 }

roles/docker-nextcloud/tasks/main.yml

@@ -3,8 +3,8 @@
   include_role: 
     name: docker-central-database
 
-- name: "include task certbot-matomo.yml"
+- name: "include task certbot-and-globals.yml"
-  include_tasks: certbot-matomo.yml
+  include_tasks: certbot-and-globals.yml
 
 - name: configure {{domain}}.conf
   template: 

roles/docker-nextcloud/templates/nextcloud.conf.j2

@@ -4,10 +4,7 @@ server
 
   {% include 'roles/letsencrypt/templates/ssl_header.j2' %}
 
-  {% if nginx_matomo_tracking | bool %}
+  {% include 'roles/nginx-global/templates/global.includes.conf.j2'%}
-    {% include 'roles/nginx-matomo-tracking/templates/matomo-tracking.conf.j2' %}
-  {% endif %}
-
   # Remove X-Powered-By, which is an information leak
   fastcgi_hide_header X-Powered-By;
 

roles/docker-peertube/tasks/create-domains.yml

@@ -1,5 +1,5 @@
-- name: "include task certbot-matomo.yml"
+- name: "include task certbot-and-globals.yml"
-  include_tasks: certbot-matomo.yml
+  include_tasks: certbot-and-globals.yml
 
 - name: configure {{domain}}.conf
   template: 

roles/docker-peertube/templates/peertube.conf.j2

@@ -3,11 +3,7 @@ server {
 
   {% include 'roles/letsencrypt/templates/ssl_header.j2' %}
 
-  {% if nginx_matomo_tracking | bool %}
+  {% include 'roles/nginx-global/templates/global.includes.conf.j2'%}
-    {% include 'roles/nginx-matomo-tracking/templates/matomo-tracking.conf.j2' %}
-  {% endif %}
-
-
   ##
   # Application
   ##

roles/docker-portfolio/vars/main.yml

@@ -1,2 +1,3 @@
-application_id:     "portfolio"
+application_id:         "portfolio"
-repository_address: "https://github.com/kevinveenbirkenbach/portfolio"
+repository_address:     "https://github.com/kevinveenbirkenbach/portfolio"
+global_theming_enabled: true # Activate Global CSS for Portfolio

roles/health-nginx/templates/health-nginx.py.j2

@@ -31,7 +31,7 @@ for filename in os.listdir(config_path):
         # Determine expected status codes based on the domain
         if domain == '{{domains.listmonk}}':
             expected_statuses = [404]
-{% if nginx_matomo_tracking | bool %}
+{% if global_matomo_tracking_enabled | bool %}
         elif parts[0] == 'www' or domain in redirected_domains:
             expected_statuses = [301]
 {% endif %}

roles/nginx-docker-reverse-proxy/templates/domain.conf.j2

@@ -21,10 +21,7 @@ server
   }
   {% endif %}
 
-  {% if nginx_matomo_tracking | bool %}
+  {% include 'roles/nginx-global/templates/global.includes.conf.j2'%}
-    # Include Matomo Tracking Code
-    {% include 'roles/nginx-matomo-tracking/templates/matomo-tracking.conf.j2' %}
-  {% endif %}
   
   {% if nginx_docker_reverse_proxy_extra_configuration is defined %}
     # Additional Domain Specific Configuration

roles/nginx-global-css/README.md

@@ -0,0 +1,43 @@
+# 🌍 Nginx Global Theming Role
+
+This **Ansible role** provides a **global theming solution** for Nginx-based web applications. It ensures a **consistent look and feel** across multiple applications by injecting a **unified global.css** with customizable theming options.  
+---
+
+## 🚀 Features
+✅ **Automatic CSS Deployment** – Injects `global.css` into all Nginx-served applications.  
+✅ **Dynamic Theming** – Uses `global_theming.css.colors` from Ansible variables for **full customization**.  
+✅ **Bootstrap Override Support** – Ensures Bootstrap-based apps use the **unified global styles**.  
+✅ **Versioning System** – Prevents caching issues with automatic **timestamp-based versioning**.  
+✅ **Dark Mode Support** – Automatically adapts to user preferences.  
+✅ **Runs Once Per Deployment** – Avoids redundant executions with `run_once_nginx_global_css`.  
+
+---
+
+## 📂 File Structure
+
+```
+.
+├── tasks/
+│   ├── main.yml        # Main Ansible tasks for deploying the global CSS
+├── vars/
+│   ├── main.yml        # Global variables (CSS paths, file names, etc.)
+├── templates/
+│   ├── global.css.j2   # Jinja2 template for generating the global CSS
+│   ├── location.conf.j2     # Nginx configuration for serving global.css
+│   ├── sub_filter.conf.j2   # Injects the global CSS link into served pages
+└── README.md           # You are here 🚀
+```
+
+---
+
+## 🎨 Theming Details
+
+The **CSS template (`global.css.j2`)** dynamically applies the defined theme colors and ensures **Bootstrap, buttons, alerts, forms, and other UI elements** follow the **unified design**.
+
+## 🛠️ Contribution
+Feel free to **fork, modify, and improve** this role! Contributions are always welcome. 🛠️🔥
+
+---
+
+🚀 **Happy Theming!** 🎨✨  
+*Created by [Kevin Veen-Birkenbach](https://www.veen.world) with the assistance of [ChatGPT](https://chatgpt.com/share/67a5fea3-4d5c-800f-8bc4-605712c02c9b).

roles/nginx-global-css/tasks/main.yml

@@ -0,0 +1,28 @@
+- name: Get the current Unix timestamp as version
+  set_fact:
+    global_css_version: "{{ ansible_date_time.epoch }}"
+  when: run_once_nginx_global_css is not defined
+
+- name: Ensure {{nginx.directories.global}} directory exists
+  file:
+    path: "{{nginx.directories.global}}"
+    state: directory
+    owner: "{{nginx.user}}"
+    group: "{{nginx.user}}"
+    mode: '0755'
+  when: run_once_nginx_global_css is not defined
+
+- name: Deploy global.css from template
+  template:
+    src: global.css.j2
+    dest: "{{global_css_destination}}"
+    owner: "{{nginx.user}}"
+    group: "{{nginx.user}}"
+    mode: '0644'
+  when: run_once_nginx_global_css is not defined
+
+- name: run the global css tasks once
+  set_fact:
+    run_once_nginx_global_css: true
+  when: run_once_nginx_global_css is not defined
+

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

@@ -0,0 +1,151 @@
+/* Global Theming Styles - Overrides Application Defaults */
+:root {
+    --primary-color: {{ global_theming.css.colors.primary }};
+    --secondary-color: {{ global_theming.css.colors.secondary }};
+    --background-color: {{ global_theming.css.colors.background }};
+    --background-dark-color: {{ global_theming.css.colors.background_dark }};
+    --text-color: {{ global_theming.css.colors.text }};
+    --accent-color: {{ global_theming.css.colors.accent }};
+    --success-color: {{ global_theming.css.colors.success }};
+    --warning-color: {{ global_theming.css.colors.warning }};
+    --error-color: {{ global_theming.css.colors.error }};
+    --info-color: {{ global_theming.css.colors.info }};
+    --link-color: {{ global_theming.css.colors.link }};
+    --button-text-color: {{ global_theming.css.colors.button_text }};
+    --shadow-color: {{ global_theming.css.colors.shadow }};
+    --border-color: {{ global_theming.css.colors.border }};
+}
+
+/* Bootstrap Overrides */
+:root {
+    --bs-primary: var(--primary-color);
+    --bs-secondary: var(--secondary-color);
+    --bs-body-bg: var(--background-color);
+    --bs-body-color: var(--text-color);
+    --bs-danger: var(--error-color);
+    --bs-warning: var(--warning-color);
+    --bs-success: var(--success-color);
+    --bs-info: var(--info-color);
+    --bs-link-color: var(--link-color);
+    --bs-btn-color: var(--button-text-color);
+}
+
+/* Ensure Styles Take Priority */
+*,
+*::before,
+*::after {
+    all: unset;
+    all: revert;
+}
+
+/* Global Defaults */
+body {
+    background-color: var(--background-color) !important;
+    color: var(--text-color) !important;
+    font-family: Arial, sans-serif;
+    line-height: 1.6;
+}
+
+/* Links */
+a {
+    color: var(--link-color) !important;
+    text-decoration: none;
+}
+a:hover {
+    text-decoration: underline;
+}
+
+/* Buttons */
+button, .btn {
+    background-color: var(--primary-color) !important;
+    color: var(--button-text-color) !important;
+    border: 1px solid var(--border-color) !important;
+    box-shadow: 2px 2px 5px var(--shadow-color) !important;
+    padding: 10px 15px;
+    border-radius: 5px;
+    font-weight: bold;
+    cursor: pointer;
+}
+button:hover, .btn:hover {
+    filter: brightness(0.9);
+}
+
+/* Success, Warning, Error States */
+.success, .alert-success {
+    background-color: var(--success-color) !important;
+    color: white !important;
+}
+.warning, .alert-warning {
+    background-color: var(--warning-color) !important;
+    color: black !important;
+}
+.error, .alert-danger {
+    background-color: var(--error-color) !important;
+    color: white !important;
+}
+.info, .alert-info {
+    background-color: var(--info-color) !important;
+    color: white !important;
+}
+
+/* Inputs & Forms */
+input, textarea, select {
+    background-color: var(--background-color) !important;
+    color: var(--text-color) !important;
+    border: 1px solid var(--border-color) !important;
+    padding: 8px;
+    border-radius: 4px;
+}
+input:focus, textarea:focus, select:focus {
+    border-color: var(--primary-color) !important;
+    outline: none;
+    box-shadow: 0 0 5px var(--shadow-color);
+}
+
+/* Navigation */
+.navbar, .navbar-light, .navbar-dark {
+    background-color: var(--primary-color) !important;
+    color: var(--button-text-color) !important;
+}
+.navbar a {
+    color: var(--button-text-color) !important;
+}
+
+/* Tables */
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+th, td {
+    padding: 10px;
+    border: 1px solid var(--border-color);
+}
+thead {
+    background-color: var(--primary-color);
+    color: var(--button-text-color);
+}
+
+/* Cards / Containers */
+.card {
+    background-color: var(--background-color) !important;
+    box-shadow: 2px 2px 10px var(--shadow-color) !important;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+}
+
+/* Dark Mode */
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: var(--background-dark-color) !important;
+        color: var(--text-color) !important;
+    }
+    input, textarea, select {
+        background-color: var(--background-dark-color) !important;
+        color: var(--text-color) !important;
+    }
+}
+
+/* Enforce Style Priority */
+html, body, * {
+    !important;
+}

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

@@ -0,0 +1,3 @@
+location = /global.css {
+    root {{nginx.directories.global}};
+}

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

@@ -0,0 +1 @@
+sub_filter '<head>' '<head><link rel="stylesheet" type="text/css" href="/global.css?version={{global_css_version}}">';

roles/nginx-global-css/vars/main.yml

@@ -0,0 +1 @@
+global_css_destination: "{{nginx.directories.global}}global.css"

roles/nginx-global-matomo/README.md

@@ -25,11 +25,11 @@ To enable Matomo tracking on your Nginx website, include the role in your playbo
 ```yaml
 - hosts: webserver
   roles:
-    - { role: nginx-matomo-tracking, matomo_domain: 'matomo.example.com', base_domain: 'example.com', matomo_site_id: '1' }
+    - { role: nginx-global-matomo, matomo_domain: 'matomo.example.com', base_domain: 'example.com', matomo_site_id: '1' }
 ```
 
 ## Customization
-You can customize the tracking script and the noscript image tracker by editing the `matomo-tracking.js.j2` and `matomo-tracking.conf.j2` templates.
+You can customize the tracking script and the noscript image tracker by editing the `matomo-tracking.js.j2` and `matomo.subfilter.conf.j2` templates.
 
 ## Author Information
-This role was created in 2023 by Kevin Veen Birkenbach, providing a seamless way to add Matomo analytics to any website served via Nginx.
+This role was created in 2023 by [Kevin Veen Birkenbach](https://www.veen.world/), providing a seamless way to add Matomo analytics to any website served via Nginx.

roles/nginx-global-matomo/templates/matomo-tracking.conf.j2

@@ -4,4 +4,3 @@ add_header Content-Security-Policy: "";
 # sub filters to integrate matomo tracking code in nginx websites
 sub_filter '</head>' '<script>{{matomo_tracking_code_one_liner}}</script></head>';
 sub_filter '</body>' '<noscript><p><img src="//matomo.{{primary_domain}}/matomo.php?idsite={{matomo_site_id}}&rec=1" style="border:0;" alt="" /></p></noscript></body>';
-sub_filter_once off;

roles/nginx-global-www/README.md

@@ -1,7 +1,7 @@
-# README.md for nginx-www-redirect Role
+# README.md for nginx-global-www Role
 
 ## Overview
-The `nginx-www-redirect` role is designed to automate the process of setting up redirects from `www.domain.tld` to `domain.tld` for all domains and subdomains configured within the `{{nginx.directories.http.servers}}` directory. This role dynamically identifies configuration files following the pattern `*domain.tld.conf` and creates corresponding redirection rules.
+The `nginx-global-www` role is designed to automate the process of setting up redirects from `www.domain.tld` to `domain.tld` for all domains and subdomains configured within the `{{nginx.directories.http.servers}}` directory. This role dynamically identifies configuration files following the pattern `*domain.tld.conf` and creates corresponding redirection rules.
 
 ## Role Description
 This role performs several key tasks:
@@ -20,7 +20,7 @@ Example playbook:
 ```yaml
 - hosts: web-servers
   roles:
-    - nginx-www-redirect
+    - nginx-global-www
 ```
 
 ## Requirements
@@ -34,4 +34,4 @@ Example playbook:
 
 ---
 
-This `nginx-www-redirect` role was crafted with insights and guidance provided by ChatGPT, an advanced AI language model from OpenAI. The development process, including the discussions with ChatGPT that shaped this role, can be [here](https://chat.openai.com/share/a68e3574-f543-467d-aea7-0895f0e00bbb) explored in detail.
+This `nginx-global-www` role was crafted by [Kevin Veen-Birkenbach](https://www.veen.world) with insights and guidance provided by ChatGPT, an advanced AI language model from OpenAI. The development process, including the discussions with ChatGPT that shaped this role, can be [here](https://chat.openai.com/share/a68e3574-f543-467d-aea7-0895f0e00bbb) explored in detail.

roles/nginx-global/tasks/main.yml

@@ -0,0 +1,13 @@
+- 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
+
+- name: Activate Global CSS
+  include_role:
+    name: nginx-global-css
+  when:
+    - global_theming_enabled | bool 
+    - run_once_nginx_global_css is not defined
+# - nginx-global-www Has to be loaded somehow different
+#  @todo implement better loading

roles/nginx-global/templates/global.includes.conf.j2

@@ -0,0 +1,15 @@
+# Allow multiple sub_filters
+sub_filter_once off;
+sub_filter_types text/html;
+
+{% if global_matomo_tracking_enabled | bool %}
+  # Include Global Matomo Tracking
+  {% include 'roles/nginx-global-matomo/templates/matomo-tracking.conf.j2' %}
+{% endif %}
+
+{% if global_theming_enabled | bool %}
+  # Include Global Theming
+  {% include 'roles/nginx-global-css/templates/sub_filter.conf.j2' %}
+  # Include Global CSS Location
+  {% include 'roles/nginx-global-css/templates/location.conf.j2' %}
+{% endif %}

roles/nginx-static-repository/templates/static.nginx.conf.j2

@@ -5,10 +5,7 @@ server
   
   {% include 'roles/letsencrypt/templates/ssl_header.j2' %}
 
-  {% if nginx_matomo_tracking | bool %}
+  {% include 'roles/nginx-global/templates/global.includes.conf.j2'%}
-    {% include 'roles/nginx-matomo-tracking/templates/matomo-tracking.conf.j2' %}
-  {% endif %}
-
   charset utf-8;
   
   location /

roles/nginx/tasks/main.yml

@@ -9,7 +9,7 @@
     name: nginx-mod-headers-more
     state: present
   notify: restart nginx
-  when: run_once_nginx is not defined and nginx_matomo_tracking | bool
+  when: run_once_nginx is not defined and global_matomo_tracking_enabled | bool
 
 - name: "Delete {{nginx.directories.configuration}} directory, when mode_reset"
   file:
@@ -33,8 +33,8 @@
   notify: restart nginx
   when: run_once_nginx is not defined
 
-- name: "include task certbot-matomo.yml"
+- name: "include task certbot-and-globals.yml"
-  include_tasks: certbot-matomo.yml
+  include_tasks: certbot-and-globals.yml
   vars:
     domain: "{{primary_domain}}"
   when: run_once_nginx is not defined

roles/nginx/templates/nginx.conf.j2

@@ -1,4 +1,4 @@
-{% if nginx_matomo_tracking | bool %}
+{% if global_matomo_tracking_enabled | bool %}
 load_module /usr/lib/nginx/modules/ngx_http_headers_more_filter_module.so;
 {% endif %}
 

tasks/certbot-and-globals.yml

@@ -1,5 +1,6 @@
 - name: "include task receive certbot certificate"
   include_tasks: recieve-certbot-certificate.yml
 
-- name: "include task implement-matomo-tracking.yml"
+- name: Load global Nginx Configuration
-  include_tasks: implement-matomo-tracking.yml
+  include_role:
+    name: nginx-global

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

@@ -1,5 +1,5 @@
-- name: "include task certbot-matomo.yml"
+- name: "include task certbot-and-globals.yml"
-  include_tasks: certbot-matomo.yml
+  include_tasks: certbot-and-globals.yml
 
 - name: "include task create-domain-conf.yml"
   include_tasks: create-domain-conf.yml

tasks/implement-matomo-tracking.yml

@@ -1,4 +0,0 @@
-- name: Activate NGINX matomo tracking
-  include_role:
-    name: nginx-matomo-tracking
-  when: nginx_matomo_tracking | bool and domain is defined

tasks/nginx-docker-proxy-domain.yml

@@ -1,5 +1,5 @@
-- name: "include task certbot-matomo.yml"
+- name: "include task certbot-and-globals.yml"
-  include_tasks: certbot-matomo.yml
+  include_tasks: certbot-and-globals.yml
 
 - name: "include task create-domain-conf.yml"
   include_tasks: create-domain-conf.yml