120 lines
5.4 KiB
CSS
120 lines
5.4 KiB
CSS
/**
|
|
* Vesktop / Vencord theme — matugen + DMS wallpaper colors.
|
|
* Derived from pywal-vencord-style mapping (NixOS-New templates/colors-discord.css).
|
|
*/
|
|
|
|
* {
|
|
/* Surfaces */
|
|
--background-primary: {{colors.background.default.hex}};
|
|
--background-secondary: {{colors.surface.default.hex}};
|
|
--background-tertiary: {{colors.surface_dim.default.hex}};
|
|
|
|
--background-primary-alt: {{colors.background.default.hex}};
|
|
--background-secondary-alt: {{colors.surface.default.hex}};
|
|
--background-tertiary-alt: {{colors.surface_dim.default.hex}};
|
|
|
|
--channeltextarea-background: {{colors.surface.default.hex}};
|
|
--custom-channel-members-bg: {{colors.surface.default.hex}};
|
|
|
|
--profile-gradient-primary-color: {{colors.surface.default.hex}};
|
|
--profile-gradient-secondary-color: {{colors.surface_variant.default.hex}};
|
|
|
|
--__header-bar-background: {{colors.surface.default.hex}} !important;
|
|
|
|
--bg-base-tertiary: {{colors.background.default.hex}};
|
|
|
|
--card-primary-bg: color-mix(in srgb, {{colors.surface.default.hex}}, black 20%);
|
|
--input-background: color-mix(in srgb, {{colors.surface.default.hex}}, black 20%);
|
|
--autocomplete-bg: color-mix(in srgb, {{colors.surface.default.hex}}, black 20%);
|
|
--background-nested-floating: color-mix(in srgb, {{colors.surface.default.hex}}, black 20%);
|
|
--background-floating: color-mix(in srgb, {{colors.surface.default.hex}}, black 20%);
|
|
--scrollbar-auto-track: color-mix(in srgb, {{colors.surface.default.hex}}, black 20%);
|
|
--scrollbar-thin-track: color-mix(in srgb, {{colors.surface.default.hex}}, black 20%);
|
|
|
|
--border-subtle: color-mix(in srgb, {{colors.surface.default.hex}}, black 20%);
|
|
--background-base-lowest: color-mix(in srgb, {{colors.surface.default.hex}}, black 20%);
|
|
--background-surface-high: color-mix(in srgb, {{colors.surface.default.hex}}, black 20%);
|
|
|
|
--button-secondary-background: color-mix(in srgb, {{colors.surface.default.hex}}, black 30%);
|
|
--background-surface-higher: color-mix(in srgb, {{colors.surface.default.hex}}, black 30%);
|
|
--background-base-lower: color-mix(in srgb, {{colors.surface.default.hex}}, black 35%);
|
|
|
|
--background-message-hover: color-mix(in srgb, {{colors.surface.default.hex}}, black 40%);
|
|
--button-secondary-background-hover: color-mix(in srgb, {{colors.surface.default.hex}}, black 40%);
|
|
--background-base-low: color-mix(in srgb, {{colors.surface.default.hex}}, black 40%);
|
|
--background-surface-highest: color-mix(in srgb, {{colors.surface.default.hex}}, black 40%);
|
|
--chat-background-default: color-mix(in srgb, {{colors.surface.default.hex}}, black 45%);
|
|
|
|
--button-secondary-background-active: color-mix(in srgb, {{colors.surface.default.hex}}, black 60%);
|
|
|
|
--primary-630: {{colors.surface_variant.default.hex}};
|
|
|
|
/* Muted / secondary chrome */
|
|
--scrollbar-auto-thumb: {{colors.on_surface_variant.default.hex}};
|
|
--scrollbar-thin-thumb: {{colors.on_surface_variant.default.hex}};
|
|
--interactive-muted: {{colors.on_surface_variant.default.hex}};
|
|
--text-muted: {{colors.on_surface_variant.default.hex}};
|
|
--background-modifier-hover: color-mix(in srgb, {{colors.on_surface_variant.default.hex}}, black 40%);
|
|
--background-modifier-active: color-mix(in srgb, {{colors.on_surface_variant.default.hex}}, black 20%);
|
|
--background-modifier-accent: {{colors.secondary_container.default.hex}};
|
|
--background-accent: {{colors.secondary.default.hex}};
|
|
|
|
--input-border: {{colors.outline.default.hex}};
|
|
--border-normal: {{colors.outline.default.hex}};
|
|
--icon-secondary: {{colors.on_surface_variant.default.hex}};
|
|
--icon-tertiary: {{colors.on_surface_variant.default.hex}};
|
|
--channel-icon: {{colors.on_surface_variant.default.hex}};
|
|
--channels-default: {{colors.on_surface_variant.default.hex}};
|
|
--header-primary: {{colors.on_surface.default.hex}};
|
|
--__lottieIconColor: {{colors.on_surface_variant.default.hex}};
|
|
--interactive-normal: {{colors.on_surface_variant.default.hex}};
|
|
|
|
/* Selection / highlights */
|
|
--red-400: {{colors.error.default.hex}};
|
|
--background-modifier-selected: {{colors.secondary_container.default.hex}};
|
|
|
|
--notice-background-positive: color-mix(in srgb, {{colors.tertiary.default.hex}}, black 75%);
|
|
--notice-text-positive: {{colors.tertiary.default.hex}};
|
|
|
|
/* Danger */
|
|
--status-danger: {{colors.error.default.hex}};
|
|
--button-outline-danger-border: {{colors.error.default.hex}};
|
|
--button-outline-danger-text: {{colors.error.default.hex}};
|
|
--button-danger-background: {{colors.error.default.hex}};
|
|
|
|
--yellow-300: {{colors.error.default.hex}};
|
|
|
|
/* Brand / accents */
|
|
--brand-experiment: {{colors.primary.default.hex}};
|
|
--brand-experiment-360: {{colors.primary.default.hex}};
|
|
--brand-experiment-500: {{colors.primary.default.hex}};
|
|
--profile-gradient-button-color: {{colors.primary.default.hex}};
|
|
|
|
--green-360: {{colors.primary.default.hex}};
|
|
|
|
/* Foreground */
|
|
--text-normal: {{colors.on_surface.default.hex}};
|
|
--interactive-active: {{colors.on_surface.default.hex}};
|
|
}
|
|
|
|
/* Status indicators (legacy Discord hex fills) */
|
|
rect[fill="#d83a41"] {
|
|
fill: {{colors.error.default.hex}} !important;
|
|
}
|
|
|
|
rect[fill="#cc954c"] {
|
|
fill: {{colors.secondary.default.hex}} !important;
|
|
}
|
|
|
|
rect[fill="#40a258"] {
|
|
fill: {{colors.primary.default.hex}} !important;
|
|
}
|
|
|
|
.wrapper_ef3116 {
|
|
background: {{colors.background.default.hex}} !important;
|
|
}
|
|
|
|
.bar_c38106 {
|
|
background: {{colors.background.default.hex}} !important;
|
|
}
|