From ed526791f0336432a68a0e060af240e54f97a6bf Mon Sep 17 00:00:00 2001
From: ediblerope <fredrik@nordhammer.it>
Date: Mon, 13 Apr 2026 22:21:07 +0100
Subject: [PATCH] Polish wallpaper theming across Shell, VSCodium, Zen, and
 GTK4

Comprehensive GNOME Shell theme: accent variable overrides, quick
toggle states, chevrons, sliders, sub-menus, header buttons,
overview/dash/search/app-grid styling. Fix GTK4 backdrop so Nautilus
keeps palette colors when unfocused. Expand VSCodium color coverage
(diff editor, widgets, notifications, scrollbars). Add more Zen
browser CSS variables for broader UI theming.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 settings/gnome.nix             |  13 ++
 templates/gnome-shell.css      | 231 +++++++++++++++++++++++++++++++--
 templates/vscodium-colors.json |  60 ++++++++-
 templates/zen-userChrome.css   |   8 ++
 4 files changed, 297 insertions(+), 15 deletions(-)

diff --git a/settings/gnome.nix b/settings/gnome.nix
index d373db3..90ba4db 100644
--- a/settings/gnome.nix
+++ b/settings/gnome.nix
@@ -79,6 +79,19 @@
         headerbar .title {
           font-size: 0;
         }
+        /* Keep wallpaper colors when window loses focus */
+        window:backdrop {
+          background-color: @window_bg_color;
+          color: @window_fg_color;
+        }
+        window:backdrop headerbar {
+          background-color: @headerbar_bg_color;
+          color: @headerbar_fg_color;
+        }
+        window:backdrop .navigation-sidebar {
+          background-color: @sidebar_bg_color;
+          color: @sidebar_fg_color;
+        }
       '';
       home.file.".config/gtk-3.0/gtk.css".force = true;
       home.file.".config/gtk-3.0/gtk.css".text = ''
diff --git a/templates/gnome-shell.css b/templates/gnome-shell.css
index 59cc336..90b061d 100644
--- a/templates/gnome-shell.css
+++ b/templates/gnome-shell.css
@@ -1,36 +1,239 @@
 /* Wallpaper-based GNOME Shell colors generated by matugen */
+
+/* Override system accent color variables */
+stage {
+  -st-accent-color: {{colors.primary_container.default.hex}} !important;
+  -st-accent-fg-color: {{colors.on_primary_container.default.hex}} !important;
+}
+
 #panel {
-  background-color: {{colors.surface_container.default.hex}};
-  color: {{colors.on_surface.default.hex}};
+  background-color: {{colors.surface_container.default.hex}} !important;
+  color: {{colors.on_surface.default.hex}} !important;
 }
 
 #panel .panel-button {
-  color: {{colors.on_surface.default.hex}};
+  color: {{colors.on_surface.default.hex}} !important;
 }
 
 .quick-settings {
-  background-color: {{colors.surface_container.default.hex}};
+  background-color: {{colors.surface_container.default.hex}} !important;
 }
 
 .quick-settings-grid .quick-toggle {
-  background-color: {{colors.surface_container_high.default.hex}};
-  color: {{colors.on_surface.default.hex}};
+  background-color: {{colors.surface_container_high.default.hex}} !important;
+  color: {{colors.on_surface.default.hex}} !important;
 }
 
-.quick-settings-grid .quick-toggle:checked {
-  background-color: {{colors.primary_container.default.hex}};
-  color: {{colors.on_primary_container.default.hex}};
+/* Checked toggles — override accent color */
+.quick-toggle:checked {
+  background-color: {{colors.primary_container.default.hex}} !important;
+  color: {{colors.on_primary_container.default.hex}} !important;
 }
 
-.quick-settings .icon-button, .quick-settings .button {
-  color: {{colors.on_surface.default.hex}};
+.quick-toggle:checked:hover {
+  background-color: {{colors.primary_container.default.hex}} !important;
+}
+
+.quick-toggle:checked:active {
+  background-color: {{colors.primary_container.default.hex}} !important;
+}
+
+/* Quick toggle icons */
+.quick-toggle .quick-toggle-icon {
+  color: {{colors.on_surface.default.hex}} !important;
+}
+
+.quick-toggle:checked .quick-toggle-icon {
+  color: {{colors.on_primary_container.default.hex}} !important;
+}
+
+/* Chevron/arrow menu button (the > on Wired, Power Mode etc) */
+.quick-toggle-has-menu .quick-toggle-menu-button {
+  background-color: {{colors.surface_container_high.default.hex}} !important;
+  color: {{colors.on_surface.default.hex}} !important;
+}
+
+.quick-toggle-has-menu .quick-toggle-menu-button:checked {
+  background-color: {{colors.primary_container.default.hex}} !important;
+  color: {{colors.on_primary_container.default.hex}} !important;
+}
+
+.quick-toggle-has-menu .quick-toggle-menu-button:checked:hover {
+  background-color: {{colors.primary_container.default.hex}} !important;
+}
+
+.quick-toggle-has-menu .quick-toggle-separator {
+  background-color: transparent !important;
+}
+
+/* Icons and arrows inside quick toggles */
+.quick-toggle StIcon {
+  color: {{colors.on_surface.default.hex}} !important;
+}
+
+.quick-toggle:checked StIcon {
+  color: {{colors.on_primary_container.default.hex}} !important;
+}
+
+.quick-toggle-menu-button StIcon {
+  color: {{colors.on_surface.default.hex}} !important;
+}
+
+.quick-toggle-menu-button:checked StIcon {
+  color: {{colors.on_primary_container.default.hex}} !important;
+}
+
+/* Icon buttons in quick settings header */
+.quick-settings .icon-button {
+  color: {{colors.on_surface.default.hex}} !important;
+}
+
+.quick-settings .icon-button StIcon {
+  color: {{colors.on_surface.default.hex}} !important;
+}
+
+/* Sliders (volume, brightness) */
+.slider {
+  color: {{colors.primary.default.hex}} !important;
+  -barlevel-active-background-color: {{colors.primary.default.hex}} !important;
+  -barlevel-background-color: {{colors.surface_container_high.default.hex}} !important;
+}
+
+/* Quick toggle sub-menus (e.g. Wired Connections dropdown) */
+.quick-toggle-menu {
+  background-color: {{colors.surface_container_high.default.hex}} !important;
+  color: {{colors.on_surface.default.hex}} !important;
+}
+
+.quick-toggle-menu .header .title {
+  color: {{colors.on_surface.default.hex}} !important;
+}
+
+/* Active icon in sub-menu header (e.g. Wired Connections circle icon) */
+.quick-toggle-menu .header .icon.active {
+  background-color: {{colors.primary_container.default.hex}} !important;
+  color: {{colors.on_primary_container.default.hex}} !important;
+}
+
+.quick-toggle-menu .header .icon {
+  color: {{colors.on_surface.default.hex}} !important;
+}
+
+.quick-toggle-menu .popup-menu-item {
+  color: {{colors.on_surface.default.hex}} !important;
 }
 
 .popup-menu-content {
-  background-color: {{colors.surface_container.default.hex}};
+  background-color: {{colors.surface_container.default.hex}} !important;
+}
+
+.popup-sub-menu .popup-menu-item {
+  color: {{colors.on_surface.default.hex}} !important;
 }
 
 .notification-banner {
-  background-color: {{colors.surface_container_high.default.hex}};
-  color: {{colors.on_surface.default.hex}};
+  background-color: {{colors.surface_container_high.default.hex}} !important;
+  color: {{colors.on_surface.default.hex}} !important;
+}
+
+/* Round icon buttons in quick settings header (settings gear, lock, power etc) */
+.quick-settings .icon-button {
+  background-color: {{colors.surface_container_high.default.hex}} !important;
+  color: {{colors.on_surface.default.hex}} !important;
+}
+
+.quick-settings .icon-button:hover {
+  background-color: {{colors.surface_container_highest.default.hex}} !important;
+}
+
+.quick-settings .icon-button:active {
+  background-color: {{colors.surface_container_highest.default.hex}} !important;
+}
+
+/* Overview background */
+#overview {
+  background-color: rgba({{colors.surface.default.red}}, {{colors.surface.default.green}}, {{colors.surface.default.blue}}, 0.85) !important;
+}
+
+/* Dash (app dock at bottom of overview) */
+#dash .dash-background {
+  background-color: {{colors.surface_container.default.hex}} !important;
+}
+
+#dash .show-apps .overview-icon {
+  background-color: transparent !important;
+  color: {{colors.on_surface.default.hex}} !important;
+}
+
+/* Search bar in overview */
+.search-entry {
+  background-color: {{colors.surface_container_high.default.hex}} !important;
+  color: {{colors.on_surface.default.hex}} !important;
+}
+
+.search-entry:focus {
+  background-color: {{colors.surface_container_high.default.hex}} !important;
+  border-color: {{colors.primary.default.hex}} !important;
+}
+
+/* Search results section */
+.search-section-content {
+  background-color: {{colors.surface_container.default.hex}} !important;
+  color: {{colors.on_surface.default.hex}} !important;
+}
+
+/* App grid / app drawer */
+.app-folder {
+  background-color: {{colors.surface_container_high.default.hex}} !important;
+}
+
+.app-folder-dialog {
+  background-color: {{colors.surface_container.default.hex}} !important;
+  color: {{colors.on_surface.default.hex}} !important;
+}
+
+.app-folder-dialog .folder-name-entry {
+  background-color: {{colors.surface_container_high.default.hex}} !important;
+  color: {{colors.on_surface.default.hex}} !important;
+}
+
+/* Popup menus */
+.popup-menu {
+  color: {{colors.on_surface.default.hex}} !important;
+}
+
+/* Page navigation arrows (next/prev page in app drawer) */
+.page-navigation-arrow {
+  background-color: {{colors.surface_container_high.default.hex}} !important;
+  color: {{colors.on_surface.default.hex}} !important;
+}
+
+.page-navigation-arrow:hover {
+  background-color: {{colors.surface_container_highest.default.hex}} !important;
+}
+
+.app-folder-dialog .page-navigation-arrow {
+  background-color: {{colors.surface_container_high.default.hex}} !important;
+  color: {{colors.on_surface.default.hex}} !important;
+}
+
+/* Dash app icon highlights (hover/focus/active) */
+#dash .dash-item-container .overview-tile .overview-icon,
+#dash .dash-item-container .grid-search-result .overview-icon {
+  background-color: transparent !important;
+}
+
+#dash .dash-item-container .overview-tile:hover .overview-icon,
+#dash .dash-item-container .grid-search-result:hover .overview-icon {
+  background-color: {{colors.surface_container_high.default.hex}} !important;
+}
+
+#dash .dash-item-container .overview-tile:active .overview-icon,
+#dash .dash-item-container .grid-search-result:active .overview-icon {
+  background-color: {{colors.surface_container_highest.default.hex}} !important;
+}
+
+#dash .dash-item-container .overview-tile:focus .overview-icon,
+#dash .dash-item-container .grid-search-result:focus .overview-icon {
+  background-color: {{colors.surface_container_high.default.hex}} !important;
 }
diff --git a/templates/vscodium-colors.json b/templates/vscodium-colors.json
index 7ca4db7..8e9c1e0 100644
--- a/templates/vscodium-colors.json
+++ b/templates/vscodium-colors.json
@@ -5,23 +5,81 @@
     "titleBar.inactiveBackground": "{{colors.surface_container_low.default.hex}}",
     "activityBar.background": "{{colors.surface_container.default.hex}}",
     "activityBar.foreground": "{{colors.on_surface.default.hex}}",
+    "activityBar.inactiveForeground": "{{colors.on_surface_variant.default.hex}}",
     "sideBar.background": "{{colors.surface_container_low.default.hex}}",
     "sideBar.foreground": "{{colors.on_surface.default.hex}}",
+    "sideBar.border": "{{colors.outline_variant.default.hex}}",
+    "sideBarSectionHeader.background": "{{colors.surface_container.default.hex}}",
+    "sideBarSectionHeader.foreground": "{{colors.on_surface.default.hex}}",
     "editor.background": "{{colors.surface.default.hex}}",
     "editor.foreground": "{{colors.on_surface.default.hex}}",
+    "editorGroupHeader.tabsBackground": "{{colors.surface_container.default.hex}}",
     "statusBar.background": "{{colors.surface_container.default.hex}}",
     "statusBar.foreground": "{{colors.on_surface.default.hex}}",
+    "statusBar.debuggingBackground": "{{colors.primary.default.hex}}",
+    "statusBar.debuggingForeground": "{{colors.on_primary.default.hex}}",
+    "statusBar.noFolderBackground": "{{colors.surface_container.default.hex}}",
     "tab.activeBackground": "{{colors.surface.default.hex}}",
     "tab.inactiveBackground": "{{colors.surface_container.default.hex}}",
     "tab.activeForeground": "{{colors.on_surface.default.hex}}",
+    "tab.inactiveForeground": "{{colors.on_surface_variant.default.hex}}",
+    "tab.border": "{{colors.surface_container.default.hex}}",
     "focusBorder": "{{colors.primary.default.hex}}",
     "button.background": "{{colors.primary.default.hex}}",
     "button.foreground": "{{colors.on_primary.default.hex}}",
     "list.activeSelectionBackground": "{{colors.primary_container.default.hex}}",
     "list.activeSelectionForeground": "{{colors.on_primary_container.default.hex}}",
     "list.hoverBackground": "{{colors.surface_container_high.default.hex}}",
+    "list.inactiveSelectionBackground": "{{colors.surface_container_high.default.hex}}",
+    "input.background": "{{colors.surface_container_high.default.hex}}",
+    "input.foreground": "{{colors.on_surface.default.hex}}",
+    "input.border": "{{colors.outline_variant.default.hex}}",
+    "dropdown.background": "{{colors.surface_container_high.default.hex}}",
+    "dropdown.foreground": "{{colors.on_surface.default.hex}}",
+    "dropdown.border": "{{colors.outline_variant.default.hex}}",
+    "panel.background": "{{colors.surface_container_low.default.hex}}",
+    "panel.border": "{{colors.outline_variant.default.hex}}",
+    "panelTitle.activeForeground": "{{colors.on_surface.default.hex}}",
     "terminal.background": "{{colors.surface.default.hex}}",
     "terminal.foreground": "{{colors.on_surface.default.hex}}",
-    "panel.background": "{{colors.surface_container_low.default.hex}}"
+    "breadcrumb.background": "{{colors.surface.default.hex}}",
+    "breadcrumb.foreground": "{{colors.on_surface_variant.default.hex}}",
+    "editorWidget.background": "{{colors.surface_container.default.hex}}",
+    "editorWidget.foreground": "{{colors.on_surface.default.hex}}",
+    "peekViewEditor.background": "{{colors.surface_container_low.default.hex}}",
+    "peekViewResult.background": "{{colors.surface_container.default.hex}}",
+    "quickInput.background": "{{colors.surface_container.default.hex}}",
+    "quickInput.foreground": "{{colors.on_surface.default.hex}}",
+    "diffEditor.insertedTextBackground": "{{colors.tertiary_container.default.hex}}33",
+    "diffEditor.removedTextBackground": "{{colors.error_container.default.hex}}33",
+    "diffEditor.insertedLineBackground": "{{colors.tertiary_container.default.hex}}22",
+    "diffEditor.removedLineBackground": "{{colors.error_container.default.hex}}22",
+    "merge.currentHeaderBackground": "{{colors.tertiary_container.default.hex}}55",
+    "merge.incomingHeaderBackground": "{{colors.primary_container.default.hex}}55",
+    "notifications.background": "{{colors.surface_container_high.default.hex}}",
+    "notifications.foreground": "{{colors.on_surface.default.hex}}",
+    "notificationCenterHeader.background": "{{colors.surface_container.default.hex}}",
+    "banner.background": "{{colors.surface_container_high.default.hex}}",
+    "banner.foreground": "{{colors.on_surface.default.hex}}",
+    "commandCenter.background": "{{colors.surface_container.default.hex}}",
+    "commandCenter.foreground": "{{colors.on_surface.default.hex}}",
+    "editorGutter.background": "{{colors.surface.default.hex}}",
+    "editorLineNumber.foreground": "{{colors.on_surface_variant.default.hex}}",
+    "scrollbarSlider.background": "{{colors.outline_variant.default.hex}}55",
+    "scrollbarSlider.hoverBackground": "{{colors.outline_variant.default.hex}}88",
+    "scrollbarSlider.activeBackground": "{{colors.outline_variant.default.hex}}aa",
+    "editorPane.background": "{{colors.surface.default.hex}}",
+    "editorHoverWidget.background": "{{colors.surface_container.default.hex}}",
+    "editorHoverWidget.foreground": "{{colors.on_surface.default.hex}}",
+    "editorHoverWidget.border": "{{colors.outline_variant.default.hex}}",
+    "editorSuggestWidget.background": "{{colors.surface_container.default.hex}}",
+    "editorSuggestWidget.foreground": "{{colors.on_surface.default.hex}}",
+    "editorSuggestWidget.border": "{{colors.outline_variant.default.hex}}",
+    "editorSuggestWidget.selectedBackground": "{{colors.primary_container.default.hex}}",
+    "debugToolBar.background": "{{colors.surface_container.default.hex}}",
+    "walkThrough.embeddedEditorBackground": "{{colors.surface_container_low.default.hex}}",
+    "settings.headerForeground": "{{colors.on_surface.default.hex}}",
+    "welcomePage.background": "{{colors.surface.default.hex}}",
+    "textBlockQuote.background": "{{colors.surface_container_low.default.hex}}"
   }
 }
diff --git a/templates/zen-userChrome.css b/templates/zen-userChrome.css
index fd7570a..012736e 100644
--- a/templates/zen-userChrome.css
+++ b/templates/zen-userChrome.css
@@ -12,4 +12,12 @@
   --arrowpanel-background: {{colors.surface_container.default.hex}} !important;
   --arrowpanel-color: {{colors.on_surface.default.hex}} !important;
   --urlbar-box-bgcolor: {{colors.surface_container_low.default.hex}} !important;
+  --zen-themed-toolbar-bg: {{colors.surface_container.default.hex}} !important;
+  --zen-themed-toolbar-fg: {{colors.on_surface.default.hex}} !important;
+  --zen-themed-toolbar-border: {{colors.outline_variant.default.hex}} !important;
+  --sidebar-background-color: {{colors.surface_container_low.default.hex}} !important;
+  --newtab-background-color: {{colors.surface.default.hex}} !important;
+  --lwt-sidebar-background-color: {{colors.surface_container_low.default.hex}} !important;
+  --lwt-sidebar-text-color: {{colors.on_surface.default.hex}} !important;
+  --lwt-toolbar-body-color: {{colors.on_surface.default.hex}} !important;
 }