Add GNOME Shell theme and User Themes extension

Generates a custom GNOME Shell CSS for the top bar, quick
settings, and notifications using wallpaper palette colors.
Uses the User Themes extension to load it.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
ediblerope 2026-04-13 21:20:41 +01:00
parent 8359853fc9
commit 3873de6003
4 changed files with 51 additions and 0 deletions

View file

@ -48,6 +48,10 @@
input_path = "${inputs.self}/templates/gtk4-colors.css"
output_path = "${config.home.homeDirectory}/.config/gtk-4.0/colors.css"
[templates.gnome-shell]
input_path = "${inputs.self}/templates/gnome-shell.css"
output_path = "${config.home.homeDirectory}/.local/share/matugen/gnome-shell.css"
[templates.zen]
input_path = "${inputs.self}/templates/zen-userChrome.css"
output_path = "${config.home.homeDirectory}/.zen/fraudek5.Default Profile/chrome/userChrome.css"

View file

@ -18,6 +18,7 @@
gnomeExtensions.just-perfection
gnomeExtensions.appindicator
gnomeExtensions.hot-edge
gnomeExtensions.user-themes
#gnomeExtensions.rounded-window-corners-reborn
adwaita-icon-theme
gnome-themes-extra
@ -157,6 +158,11 @@
"org/gnome/shell/extensions/just-perfection" = {
window-demands-attention-focus = true;
};
# User themes extension — load wallpaper shell theme
"org/gnome/shell/extensions/user-theme" = {
name = "WallpaperShell";
};
};
};
};

36
templates/gnome-shell.css Normal file
View file

@ -0,0 +1,36 @@
/* Wallpaper-based GNOME Shell colors generated by matugen */
#panel {
background-color: {{colors.surface_container.default.hex}};
color: {{colors.on_surface.default.hex}};
}
#panel .panel-button {
color: {{colors.on_surface.default.hex}};
}
.quick-settings {
background-color: {{colors.surface_container.default.hex}};
}
.quick-settings-grid .quick-toggle {
background-color: {{colors.surface_container_high.default.hex}};
color: {{colors.on_surface.default.hex}};
}
.quick-settings-grid .quick-toggle:checked {
background-color: {{colors.primary_container.default.hex}};
color: {{colors.on_primary_container.default.hex}};
}
.quick-settings .icon-button, .quick-settings .button {
color: {{colors.on_surface.default.hex}};
}
.popup-menu-content {
background-color: {{colors.surface_container.default.hex}};
}
.notification-banner {
background-color: {{colors.surface_container_high.default.hex}};
color: {{colors.on_surface.default.hex}};
}

View file

@ -88,6 +88,11 @@ done
# Update icon cache
gtk-update-icon-cache -f "$ICON_DIR" 2>/dev/null || true
# Install GNOME Shell theme
SHELL_THEME="$HOME/.local/share/themes/WallpaperShell/gnome-shell"
mkdir -p "$SHELL_THEME"
cp "$HOME/.local/share/matugen/gnome-shell.css" "$SHELL_THEME/gnome-shell.css" 2>/dev/null
# Map wallpaper palette to closest GNOME accent color
# Primary color RGB: {{colors.primary.default.red}}, {{colors.primary.default.green}}, {{colors.primary.default.blue}}
R={{colors.primary.default.red}}