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>
This commit is contained in:
parent
0eb6c587dc
commit
ed526791f0
4 changed files with 297 additions and 15 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue