nixos/templates/gnome-shell.css

/* 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}} !important;
  color: {{colors.on_surface.default.hex}} !important;
}

#panel .panel-button {
  color: {{colors.on_surface.default.hex}} !important;
}

.quick-settings {
  background-color: {{colors.surface_container.default.hex}} !important;
}

.quick-settings-grid .quick-toggle {
  background-color: {{colors.surface_container_high.default.hex}} !important;
  color: {{colors.on_surface.default.hex}} !important;
}

/* 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-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}} !important;
}

.popup-sub-menu .popup-menu-item {
  color: {{colors.on_surface.default.hex}} !important;
}

.notification-banner {
  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;
}

/* Search result items */
.list-search-result, .search-provider-icon {
  background-color: {{colors.surface_container.default.hex}} !important;
  color: {{colors.on_surface.default.hex}} !important;
}

.list-search-result:hover, .search-provider-icon:hover {
  background-color: {{colors.surface_container_high.default.hex}} !important;
}

/* Selected/focused search result highlight */
.overview-tile:focus, .grid-search-result:focus {
  background-color: {{colors.surface_container_high.default.hex}} !important;
}

.overview-tile, .grid-search-result {
  background-color: {{colors.surface_container.default.hex}} !important;
  color: {{colors.on_surface.default.hex}} !important;
}

.overview-tile:hover, .grid-search-result:hover {
  background-color: {{colors.surface_container_high.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;
}