diff --git a/group_vars/all/13_theming.yml b/group_vars/all/13_theming.yml
index 00f1a832..11beafa1 100644
--- a/group_vars/all/13_theming.yml
+++ b/group_vars/all/13_theming.yml
@@ -4,8 +4,8 @@ global_theming:
     colors:
       # General Colors
       base: "#001f3f"
-
-      # Special Action Colors
+      
+      lightness_change:
 
       # Sucess Color
       success: "#B2D3B2"
diff --git a/roles/nginx-global-css/filter_plugins/color_filters.py b/roles/nginx-global-css/filter_plugins/color_filters.py
index c883ee2d..275a2bf7 100644
--- a/roles/nginx-global-css/filter_plugins/color_filters.py
+++ b/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
-    
-    - lightness_change: Percentage points to add or subtract from lightness (0-100 => 0-1 in HSL).
+
+    - target_lightness: If provided (0 to 1), the lightness is set absolutely to this value.
+      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)
-    # Hue, Lightness, Saturation are each in [0..1]
+    # Convert RGB -> HLS (colorsys uses HLS, also hier: Hue, Lightness, Saturation)
     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)
-    # saturation_change is e.g. +20 => +0.20 in HLS
+    # Adjust saturation (cyclically)
     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)
-    # lightness_change is e.g. +30 => +0.30 in HLS
-    l_new = l + (lightness_change / 100.0)
-    if l_new > 1:
-        l_new -= 1
-    elif l_new < 0:
-        l_new += 1
-    
+
+    # Adjust lightness: either set to a target or change it additively (cyclically)
+    if target_lightness is not None:
+        l_new = target_lightness
+    else:
+        l_new = l + (lightness_change / 100.0)
+        if 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)
diff --git a/roles/nginx-global-css/templates/global.css.j2 b/roles/nginx-global-css/templates/global.css.j2
index ce368efc..016119ac 100644
--- a/roles/nginx-global-css/templates/global.css.j2
+++ b/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 **/
-
-    /* Primary Color: the base color itself */
-    --primary-color:       {{ global_theming.css.colors.base }};
-    
-    /* 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) }};
+    {% for i in range(1, 100) %}
+        --color-{{ "%02d"|format(i) }}: {{ global_theming.css.colors.base | adjust_color(target_lightness=(i / 100)) }};
+    {% endfor %}
 
     /** Special Action Colors **/
     --success-color:    {{ global_theming.css.colors.success }};
@@ -41,81 +20,147 @@ 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))) }};
+        {% 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-secondary: var(--secondary-color);
-    --bs-body-bg: var(--bright-color);
-    --bs-body-color: var(--dark-color);
+    --bs-primary: var(--color-50);
+    --bs-secondary: var(--color-65);
+    --bs-body-bg: var(--color-90);
+    --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-btn-color: var(--dark-color);
+    --bs-link-color: var(--color-50);
+    --bs-btn-color: var(--color-40);
 }
 
 /** Keycloak Overrides **/ 
 :root{
-    --pf-v5-global--Color--100:         {{  global_theming.css.colors.base | adjust_color(-30) }};
-    --pf-v5-global--Color--200:         {{  global_theming.css.colors.base | adjust_color(-10) }};
-    --pf-v5-global--Color--light-100:   {{  global_theming.css.colors.base | adjust_color(-30) }};
-    --pf-v5-global--Color--light-200:   {{  global_theming.css.colors.base | adjust_color(-10) }};
-    --pf-v5-global--Color--light-300:   {{  global_theming.css.colors.base | adjust_color(10) }};
+    --pf-v5-global--Color--100:         var(--color-40);
+    --pf-v5-global--Color--200:         var(--color-60);
+    --pf-v5-global--Color--light-100:   var(--color-40);
+    --pf-v5-global--Color--light-200:   var(--color-60);
+    --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-rgb:    var(--bright-color);
-    --color-primary-element:        var(--button-bg-color);
-    --color-main-text:              var(--dark-color);
-    --color-background-hover:       var(--secondary-color);
+    --color-main-background:        None;
+    --color-main-background-rgb:    None;
+    --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-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);
-    --light-gray:       var(--complementary-color);
-}
 
+:root {
+    /* Base Colors */
+    --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) */
+}
 
 /* Global Defaults (Colors Only) */
 body {
-    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 {
-    background-color: var(--button-bg-color) !important;
-    color: var(--primary-color) !important;
-    border-color: var(--border-color) !important;
+    background-color: var(--color-87) !important;
+    color: var(--color-50) !important;
+    border-color: var(--color-80) !important;
     cursor: pointer;
 }
 
@@ -126,107 +171,107 @@ 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) */
-    color: var(--dark-color) !important;
-    border-color: var(--border-color) !important;
+    background-color: var(--info-color) !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(--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;
-    color: var(--primary-color) !important;
+    background-color: var(--color-90) !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;
-    color: var(--dark-color) !important;
+    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 {
-    background-color: var(--complementary-color) !important;
-    border-color: var(--border-color) !important;
+    background-color: var(--color-90) !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;
-    color: var(--dark-color) !important;
-    /**box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);**/
+    background-color: var(--color-80) !important;
+    color: var(--color-40) !important;
 }
 
 .dropdown-item {
-    color: var(--dark-color) !important;
-    background-color: var(--bright-color) !important;
+    color: var(--color-40) !important;
+    background-color: var(--color-80) !important;
 }
 
 .dropdown-item:hover,
 .dropdown-item:focus {
-    background-color: var(--secondary-color) !important;
-    color: var(--dark-color) !important;
+    background-color: var(--color-65) !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;
+    background-color: var(--color-75) !important;
 }
 
 div#app header, div#app header *{
-    background-color: var(--primary-color) !important;
-    color: var(--brightest-color);
+    background-color: var(--color-50) !important;
+    color: var(--color-98);
 }
 
 div#app div#page-sidebar, div#app main#kc-main-content-page-container{
-    background-color: var(--complementary-color) !important;
+    background-color: var(--color-75) !important;
 }
 
 div#app main#kc-main-content-page-container section, 
@@ -234,7 +279,7 @@ 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);
+    color: var(--color-40);
 }
 
 /** LAM Specific **/
@@ -245,28 +290,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;
-    background-color: var(--button-bg-color) !important;
+    color: var(--color-90) !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 +323,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;
-    color: var(--dark-color) !important;
+    background-color: var(--color-40) !important;
+    color: var(--color-40) !important;
 }
 
 /** Open Project **/
@@ -292,15 +337,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 +356,9 @@ 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;
 }