theme repairs:

- gtk3 colloid light/dark fix
- fix missing gtk4 missing variables
- matugen script handle light/dark preference
- fix state of display tab light/dark toggle

Modules/ControlCenter/DisplayTab.qml

@@ -218,29 +218,29 @@ Item {
                     width: (parent.width - Theme.spacingM) / 2
                     height: 80
                     radius: Theme.cornerRadius
-                    color: Theme.isLightMode ? Qt.rgba(
+                    color: SessionData.isLightMode ? Qt.rgba(
                                                    Theme.primary.r,
                                                    Theme.primary.g,
                                                    Theme.primary.b,
                                                    0.12) : (lightModeToggle.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.08))
-                    border.color: Theme.isLightMode ? Theme.primary : "transparent"
-                    border.width: Theme.isLightMode ? 1 : 0
+                    border.color: SessionData.isLightMode ? Theme.primary : "transparent"
+                    border.width: SessionData.isLightMode ? 1 : 0
 
                     Column {
                         anchors.centerIn: parent
                         spacing: Theme.spacingS
 
                         DankIcon {
-                            name: Theme.isLightMode ? "light_mode" : "palette"
+                            name: SessionData.isLightMode ? "light_mode" : "palette"
                             size: Theme.iconSizeLarge
-                            color: Theme.isLightMode ? Theme.primary : Theme.surfaceText
+                            color: SessionData.isLightMode ? Theme.primary : Theme.surfaceText
                             anchors.horizontalCenter: parent.horizontalCenter
                         }
 
                         StyledText {
-                            text: Theme.isLightMode ? "Light Mode" : "Dark Mode"
+                            text: SessionData.isLightMode ? "Light Mode" : "Dark Mode"
                             font.pixelSize: Theme.fontSizeMedium
-                            color: Theme.isLightMode ? Theme.primary : Theme.surfaceText
+                            color: SessionData.isLightMode ? Theme.primary : Theme.surfaceText
                             font.weight: Font.Medium
                             anchors.horizontalCenter: parent.horizontalCenter
                         }
@@ -253,7 +253,10 @@ Item {
                         hoverEnabled: true
                         cursorShape: Qt.PointingHandCursor
                         onClicked: {
-                            Theme.toggleLightMode()
+                            const newLightMode = !SessionData.isLightMode
+                            SessionData.setLightMode(newLightMode)
+                            Theme.isLightMode = newLightMode
+                            PortalService.setLightMode(newLightMode)
                         }
                     }
 

scripts/matugen.sh

@@ -69,24 +69,47 @@ if [ ! -f "matugen-config.toml" ]; then
     exit 1
 fi
 
+TEMP_CONFIG="/tmp/matugen-config-$$.toml"
+cp "matugen-config.toml" "$TEMP_CONFIG"
+
+if [ "$IS_LIGHT" = "true" ]; then
+    COLLOID_TEMPLATE="$SHELL_DIR/templates/gtk3-colloid-light.css"
+else
+    COLLOID_TEMPLATE="$SHELL_DIR/templates/gtk3-colloid-dark.css"
+fi
+
+sed -i "/\[templates\.gtk3\]/,/^\[/ s|input_path = './templates/gtk-colors.css'|input_path = '$COLLOID_TEMPLATE'|" "$TEMP_CONFIG"
+sed -i "s|input_path = './templates/|input_path = '$SHELL_DIR/templates/|g" "$TEMP_CONFIG"
+
+MATUGEN_MODE=""
+if [ "$IS_LIGHT" = "true" ]; then
+    MATUGEN_MODE="-m light"
+else
+    MATUGEN_MODE="-m dark"
+fi
+
 if [ "$MODE" = "generate" ]; then
     echo "Generating matugen themes from wallpaper: $INPUT_SOURCE"
-    echo "Using config: $SHELL_DIR/matugen-config.toml"
+    echo "Using config: $TEMP_CONFIG with template: $COLLOID_TEMPLATE"
     
-    if ! matugen -v -c matugen-config.toml image "$INPUT_SOURCE"; then
+    if ! matugen -v -c "$TEMP_CONFIG" image "$INPUT_SOURCE" $MATUGEN_MODE; then
         echo "Failed to generate themes with matugen" >&2
+        rm -f "$TEMP_CONFIG"
         exit 1
     fi
 elif [ "$MODE" = "generate-color" ]; then
     echo "Generating matugen themes from color: $INPUT_SOURCE"
-    echo "Using config: $SHELL_DIR/matugen-config.toml"
+    echo "Using config: $TEMP_CONFIG with template: $COLLOID_TEMPLATE"
     
-    if ! matugen -v -c matugen-config.toml color hex "$INPUT_SOURCE"; then
+    if ! matugen -v -c "$TEMP_CONFIG" color hex "$INPUT_SOURCE" $MATUGEN_MODE; then
         echo "Failed to generate themes with matugen" >&2
+        rm -f "$TEMP_CONFIG"
         exit 1
     fi
 fi
 
+rm -f "$TEMP_CONFIG"
+
 echo "Updating system theme preferences..."
 
 color_scheme=""

templates/gtk-colors.css

@@ -19,4 +19,74 @@
 @define-color sidebar_bg_color @window_bg_color;
 @define-color sidebar_fg_color @window_fg_color;
 @define-color sidebar_border_color @window_bg_color;
-@define-color sidebar_backdrop_color @window_bg_color;
+@define-color sidebar_backdrop_color @window_bg_color;
+
+/* Titlebar and headerbar specific colors for window decorations */
+@define-color theme_bg_color {{colors.surface.default.hex}};
+@define-color theme_fg_color {{colors.on_surface.default.hex}};
+@define-color theme_base_color {{colors.surface.default.hex}};
+@define-color theme_text_color {{colors.on_surface.default.hex}};
+@define-color theme_selected_bg_color {{colors.primary.default.hex}};
+@define-color theme_selected_fg_color {{colors.on_primary.default.hex}};
+@define-color theme_button_background_normal {{colors.surface.default.hex}};
+@define-color theme_button_foreground_normal {{colors.on_surface.default.hex}};
+@define-color theme_button_background_hover alpha({{colors.on_surface.default.hex}}, 0.08);
+@define-color theme_button_foreground_hover {{colors.on_surface.default.hex}};
+@define-color theme_button_background_active alpha({{colors.on_surface.default.hex}}, 0.12);
+@define-color theme_button_foreground_active {{colors.on_surface.default.hex}};
+@define-color theme_button_background_disabled alpha({{colors.on_surface.default.hex}}, 0.04);
+@define-color theme_button_foreground_disabled alpha({{colors.on_surface.default.hex}}, 0.38);
+
+/* Additional headerbar-specific colors for GTK4 compatibility */
+@define-color headerbar_backdrop_color {{colors.surface_container_low.default.hex}};
+@define-color headerbar_border_color {{colors.outline.default.hex}};
+@define-color headerbar_darker_shade_color {{colors.outline_variant.default.hex}};
+@define-color headerbar_shade_color {{colors.surface_variant.default.hex}};
+
+/* Window control and decoration colors */
+@define-color wm_bg_a {{colors.surface_dim.default.hex}};
+@define-color wm_bg_b {{colors.surface_container.default.hex}};
+@define-color wm_border_a {{colors.outline.default.hex}};
+@define-color wm_border_b {{colors.outline_variant.default.hex}};
+@define-color wm_shadow {{colors.shadow.default.hex}};
+@define-color wm_outline {{colors.outline.default.hex}};
+
+/* Menu and popover colors */
+@define-color menu_bg_color {{colors.surface_container.default.hex}};
+@define-color menu_fg_color {{colors.on_surface.default.hex}};
+@define-color menu_selected_bg_color {{colors.primary.default.hex}};
+@define-color menu_selected_fg_color {{colors.on_primary.default.hex}};
+
+/* Button and control colors */
+@define-color button_bg_color {{colors.surface.default.hex}};
+@define-color button_fg_color {{colors.on_surface.default.hex}};
+@define-color button_border_color {{colors.outline_variant.default.hex}};
+@define-color button_active_bg_color {{colors.primary.default.hex}};
+@define-color button_active_fg_color {{colors.on_primary.default.hex}};
+
+/* Entry and input colors */
+@define-color entry_bg_color {{colors.surface_variant.default.hex}};
+@define-color entry_fg_color {{colors.on_surface_variant.default.hex}};
+@define-color entry_border_color {{colors.outline.default.hex}};
+@define-color entry_focus_border_color {{colors.primary.default.hex}};
+
+/* Scrollbar colors */
+@define-color scrollbar_bg_color {{colors.surface_variant.default.hex}};
+@define-color scrollbar_fg_color {{colors.on_surface_variant.default.hex}};
+@define-color scrollbar_hover_color {{colors.primary.default.hex}};
+
+/* Selection and highlight colors */
+@define-color selection_bg_color {{colors.primary_container.default.hex}};
+@define-color selection_fg_color {{colors.on_primary_container.default.hex}};
+
+/* Tooltip colors */
+@define-color tooltip_bg_color {{colors.inverse_surface.default.hex}};
+@define-color tooltip_fg_color {{colors.inverse_on_surface.default.hex}};
+
+/* Warning and error colors */
+@define-color warning_color {{colors.tertiary.default.hex}};
+@define-color warning_fg_color {{colors.on_tertiary.default.hex}};
+@define-color error_color {{colors.error.default.hex}};
+@define-color error_fg_color {{colors.on_error.default.hex}};
+@define-color success_color {{colors.tertiary_container.default.hex}};
+@define-color success_fg_color {{colors.on_tertiary_container.default.hex}};