From b5937e5fe914cf5f34495469905f59b5ae016442 Mon Sep 17 00:00:00 2001 From: ediblerope Date: Thu, 16 Apr 2026 11:22:48 +0100 Subject: [PATCH] Switch Vesktop theme to Midnight and theme GNOME app grid highlights Replace custom Discord CSS selectors with Midnight theme (loaded via online URL) and simple color variable overrides from matugen. Also add wallpaper-colored focus rings, edit button, and running dot to GNOME shell app grid. Co-Authored-By: Claude Opus 4.6 --- templates/gnome-shell.css | 35 ++++++++++ templates/vesktop-quickCss.css | 121 ++++++--------------------------- 2 files changed, 55 insertions(+), 101 deletions(-) diff --git a/templates/gnome-shell.css b/templates/gnome-shell.css index b1c66f4..915ffb0 100644 --- a/templates/gnome-shell.css +++ b/templates/gnome-shell.css @@ -330,3 +330,38 @@ stage { #dash .dash-item-container .grid-search-result:focus .overview-icon { background-color: {{colors.surface_container_high.default.hex}} !important; } + +/* App grid edit mode button (pencil icon) */ +.icon-button.edit-button, +.app-grid-edit-button { + background-color: {{colors.surface_container_high.default.hex}} !important; + color: {{colors.on_surface.default.hex}} !important; +} + +.icon-button.edit-button:hover, +.app-grid-edit-button:hover { + background-color: {{colors.surface_container_highest.default.hex}} !important; +} + +.icon-button.edit-button:checked, +.app-grid-edit-button:checked { + background-color: {{colors.primary_container.default.hex}} !important; + color: {{colors.on_primary_container.default.hex}} !important; +} + +/* App grid focused/selected app highlight ring */ +.overview-tile:focus, +.overview-tile:selected { + outline-color: {{colors.primary.default.hex}} !important; +} + +/* Global focus/keyboard-navigation highlight */ +*:focus { + outline-color: {{colors.primary.default.hex}} !important; + border-color: {{colors.primary.default.hex}} !important; +} + +/* App icon active/running indicator dot */ +.app-well-app .overview-icon .app-running-dot { + background-color: {{colors.primary.default.hex}} !important; +} diff --git a/templates/vesktop-quickCss.css b/templates/vesktop-quickCss.css index fb3a3e3..174c6a5 100644 --- a/templates/vesktop-quickCss.css +++ b/templates/vesktop-quickCss.css @@ -1,105 +1,24 @@ -/* Wallpaper-based Adwaita-style Discord theme generated by matugen */ - -/* Discord dark theme variable overrides */ -.theme-dark { - /* Surfaces */ - --background-primary: {{colors.surface.default.hex}} !important; - --background-secondary: {{colors.surface_container.default.hex}} !important; - --background-secondary-alt: {{colors.surface_container.default.hex}} !important; - --background-tertiary: {{colors.surface_container_low.default.hex}} !important; - --background-floating: {{colors.surface_container_high.default.hex}} !important; - --background-mobile-primary: {{colors.surface.default.hex}} !important; - --background-mobile-secondary: {{colors.surface_container.default.hex}} !important; - --background-modifier-selected: {{colors.surface_container_high.default.hex}} !important; - --background-modifier-accent: {{colors.surface_container.default.hex}} !important; - --background-modifier-hover: {{colors.surface_container_high.default.hex}} !important; - --background-message-hover: rgba(0, 0, 0, 0.1) !important; - --bg-overlay-2: {{colors.surface.default.hex}} !important; - --home-background: {{colors.surface.default.hex}} !important; - - /* Accent / brand */ - --background-accent: {{colors.primary.default.hex}} !important; - --brand-experiment: {{colors.primary.default.hex}} !important; - --brand-experiment-560: {{colors.primary.default.hex}} !important; - --brand-experiment-05a: {{colors.primary_container.default.hex}} !important; - --control-brand-foreground: {{colors.primary.default.hex}} !important; - --bg-brand: {{colors.primary.default.hex}} !important; - --logo-primary: {{colors.primary.default.hex}} !important; - --focus-primary: {{colors.primary.default.hex}} !important; +/* Matugen wallpaper color overrides for Midnight theme */ +:root { + /* Background surfaces — dark to light */ + --bg-4: {{colors.surface.default.hex}}; + --bg-3: {{colors.surface_container_low.default.hex}}; + --bg-2: {{colors.surface_container.default.hex}}; + --bg-1: {{colors.surface_container_high.default.hex}}; /* Text */ - --text-normal: {{colors.on_surface.default.hex}} !important; - --text-muted: {{colors.on_surface_variant.default.hex}} !important; - --text-link: {{colors.primary.default.hex}} !important; - --header-primary: {{colors.on_surface.default.hex}} !important; - --header-secondary: {{colors.on_surface_variant.default.hex}} !important; - --interactive-normal: {{colors.on_surface_variant.default.hex}} !important; - --interactive-hover: {{colors.on_surface.default.hex}} !important; - --interactive-active: {{colors.on_surface.default.hex}} !important; - --interactive-muted: {{colors.outline.default.hex}} !important; + --text-0: {{colors.surface.default.hex}}; + --text-1: {{colors.on_surface.default.hex}}; + --text-2: {{colors.on_surface.default.hex}}; + --text-3: {{colors.on_surface_variant.default.hex}}; + --text-4: {{colors.outline.default.hex}}; + --text-5: {{colors.outline_variant.default.hex}}; - /* Inputs and chat */ - --channeltextarea-background: {{colors.surface_container_high.default.hex}} !important; - --input-background: {{colors.surface_container_high.default.hex}} !important; - --input-placeholder-text: {{colors.on_surface_variant.default.hex}} !important; - --activity-card-background: {{colors.surface_container.default.hex}} !important; - --textbox-markdown-syntax: {{colors.primary.default.hex}} !important; - --deprecated-card-bg: {{colors.surface_container.default.hex}} !important; - - /* Scrollbars */ - --scrollbar-thin-thumb: {{colors.on_surface_variant.default.hex}} !important; - --scrollbar-thin-track: transparent !important; - --scrollbar-auto-thumb: {{colors.on_surface_variant.default.hex}} !important; - --scrollbar-auto-track: {{colors.surface_container_low.default.hex}} !important; - - /* Mentions */ - --mention-background: {{colors.primary_container.default.hex}} !important; - --mention-foreground: {{colors.on_primary_container.default.hex}} !important; - - /* Profile */ - --profile-body-background-color: {{colors.surface_container.default.hex}} !important; - --profile-body-divider-color: {{colors.outline_variant.default.hex}} !important; - - /* Misc */ - --modal-background: {{colors.surface_container.default.hex}} !important; - --modal-footer-background: {{colors.surface_container_low.default.hex}} !important; - --radio-group-dot-foreground: {{colors.primary.default.hex}} !important; -} - -/* Server list */ -nav[class*="guilds_"] { - background-color: {{colors.surface_container_low.default.hex}} !important; -} - -/* Channel sidebar */ -div[class*="sidebar_"] { - background-color: {{colors.surface_container.default.hex}} !important; -} - -/* Members list */ -div[class*="membersWrap_"] { - background-color: {{colors.surface.default.hex}} !important; -} - -/* User panel at bottom */ -section[class*="panels_"] { - background-color: {{colors.surface_container.default.hex}} !important; -} - -/* Rounded message input */ -div[class*="channelTextArea_"] { - border-radius: 12px !important; -} - -/* Rounded popouts and modals */ -div[class*="popout_"], -div[class*="modal_"], -div[class*="menu_"] { - border-radius: 12px !important; -} - -/* Search bar */ -div[class*="searchBar_"] { - border-radius: 8px !important; - background-color: {{colors.surface_container_high.default.hex}} !important; + /* Accent */ + --accent-1: {{colors.primary.default.hex}}; + --accent-2: {{colors.primary.default.hex}}; + --accent-3: {{colors.primary_container.default.hex}}; + --accent-4: {{colors.primary_container.default.hex}}; + --accent-5: {{colors.primary_container.default.hex}}; + --accent-new: {{colors.primary.default.hex}}; }