rope/nixos
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Switch Vesktop theme to Midnight and theme GNOME app grid highlights

Browse source 
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 <noreply@anthropic.com>
This commit is contained in:
ediblerope 2026-04-16 11:22:48 +01:00
parent 3f20a8010f
commit b5937e5fe9
2 changed files with 55 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

121
templates/vesktop-quickCss.css
View file

@ -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}};
}