diff --git a/quickshell/matugen/templates/veskto-wip.css b/quickshell/matugen/templates/veskto-wip.css
deleted file mode 100644
index 47f589277..000000000
--- a/quickshell/matugen/templates/veskto-wip.css
+++ /dev/null
@@ -1,242 +0,0 @@
-/**
- * @name DMS
- * @description Material Design 3 theme generated by DankMaterialShell
- * @author DankMaterialShell
- * @version 2.0.0
- * @website https://github.com/bbedward/DankMaterialShell
-*/
-
-* {
-    font-family: 'Adwaita Sans', 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
-
-    --app-bg: {{colors.background.default.hex}};
-    --background-primary: {{colors.background.default.hex}};
-    --background-secondary: {{colors.background.default.hex}};
-    --background-secondary-alt: {{colors.background.default.hex}};
-    --background-tertiary: {{colors.background.default.hex}};
-
-    --primary-500: {{colors.background.default.hex}};
-    --primary-600: {{colors.background.default.hex}};
-    --primary-630: {{colors.background.default.hex}};
-    --primary-645: {{colors.background.default.hex}};
-    --primary-660: {{colors.background.default.hex}};
-    --primary-700: {{colors.background.default.hex}};
-
-    --channeltextarea-background: {{colors.background.default.hex}};
-    --custom-channel-members-bg: {{colors.background.default.hex}};
-
-    --sidebar-background: {{colors.background.default.hex}};
-    --sidebar-color: {{colors.background.default.hex}};
-    --server-container: {{colors.background.default.hex}};
-    --main-color: {{colors.background.default.hex}};
-    --main-content-color: {{colors.background.default.hex}};
-
-    --profile-gradient-primary-color: {{colors.background.default.hex}};
-    --profile-gradient-secondary-color: {{colors.background.default.hex}};
-    --profile-body-background-color: {{colors.background.default.hex}};
-    --bg-overlay-1: {{colors.background.default.hex}};
-    --bg-overlay-2: {{colors.background.default.hex}};
-    --bg-overlay-3: {{colors.background.default.hex}};
-    --home-background: {{colors.background.default.hex}};
-
-    --__header-bar-background: {{colors.background.default.hex}} !important;
-    --header-secondary: {{colors.background.default.hex}};
-    --channel-header-bg: {{colors.background.default.hex}};
-    --__channel-header-background: {{colors.background.default.hex}} !important;
-
-    --bg-base-tertiary: {{colors.background.default.hex}};
-
-    --card-primary-bg: {{colors.surface_container.default.hex}};
-    --input-background: {{colors.surface_container.default.hex}};
-    --autocomplete-bg: {{colors.surface_container.default.hex}};
-    --background-nested-floating: {{colors.surface_container.default.hex}};
-    --background-floating: {{colors.surface_container.default.hex}};
-    --scrollbar-auto-track: {{colors.surface_container.default.hex}};
-    --scrollbar-thin-track: {{colors.surface_container.default.hex}};
-
-    --border-subtle: {{colors.background.default.hex}};
-    --background-base-lowest: {{colors.background.default.hex}};
-    --background-surface-high: {{colors.background.default.hex}};
-
-    --button-secondary-background: {{colors.surface_container_high.default.hex}};
-    --background-surface-higher: {{colors.surface_container_high.default.hex}};
-    --background-base-lower: {{colors.surface_container_high.default.hex}};
-
-    --background-message-hover: color-mix(in srgb, {{colors.on_surface.default.hex}} 4%, transparent);
-    --button-secondary-background-hover: {{colors.surface_container_highest.default.hex}};
-    --background-base-low: {{colors.surface_container_highest.default.hex}};
-    --background-surface-highest: {{colors.surface_container_highest.default.hex}};
-    --chat-background-default: {{colors.surface_container_highest.default.hex}};
-
-    --button-secondary-background-active: color-mix(in srgb, {{colors.surface_container_highest.default.hex}}, {{colors.primary.default.hex}} 20%);
-
-    --scrollbar-auto-thumb: {{colors.outline.default.hex}};
-    --scrollbar-thin-thumb: {{colors.outline.default.hex}};
-    --interactive-muted: {{colors.outline.default.hex}};
-    --text-muted: {{colors.outline.default.hex}};
-    --background-modifier-hover: {{colors.surface_container_high.default.hex}};
-    --background-modifier-active: {{colors.surface_container_highest.default.hex}};
-    --background-modifier-accent: color-mix(in srgb, {{colors.primary.default.hex}} 12%, transparent);
-    --background-accent: color-mix(in srgb, {{colors.primary.default.hex}} 12%, transparent);
-    --background-mentioned: color-mix(in srgb, {{colors.primary.default.hex}} 8%, transparent);
-    --background-mentioned-hover: color-mix(in srgb, {{colors.primary.default.hex}} 12%, transparent);
-    --mention-foreground: {{colors.primary.default.hex}};
-    --info-warning-foreground: {{colors.primary.default.hex}};
-
-    --input-border: {{colors.outline_variant.default.hex}};
-    --border-normal: {{colors.outline_variant.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}};
-
-    --red-400: {{colors.error.default.hex}};
-    --background-modifier-selected: color-mix(in srgb, {{colors.primary.default.hex}} 15%, transparent);
-
-    --notice-background-positive: {{colors.primary_container.default.hex}};
-    --notice-text-positive: {{colors.on_primary_container.default.hex}};
-
-    --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.tertiary.default.hex}};
-
-    --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}};
-
-    --text-normal: {{colors.on_surface.default.hex}};
-    --text-link: {{colors.primary.default.hex}};
-    --interactive-active: {{colors.on_surface.default.hex}};
-}
-
-rect[fill="#d83a41"] {
-    fill: {{colors.error.default.hex}} !important;
-}
-
-rect[fill="#cc954c"] {
-    fill: {{colors.tertiary.default.hex}} !important;
-}
-
-rect[fill="#40a258"] {
-    fill: {{colors.primary.default.hex}} !important;
-}
-
-[class*="repliedTextContent"],
-[class*="repliedMessage"] [class*="username"],
-[class*="repliedMessage"] [class*="repliedTextPreview"] {
-    color: {{colors.on_surface_variant.default.hex}} !important;
-    opacity: 0.9 !important;
-}
-
-.guilds__5e434,
-.scroller_ef3116 {
-    background: {{colors.surface.default.hex}} !important;
-}
-
-.sidebarList__5e434,
-.container__2637a,
-.scroller__629e4 {
-    background: {{colors.surface.default.hex}} !important;
-}
-
-.container_c8ffbb,
-.members_c8ffbb,
-.member_c8ffbb,
-.membersWrap_c8ffbb {
-    background: {{colors.surface.default.hex}} !important;
-    background-image: none !important;
-}
-
-.chatContent_f75fb0,
-.messagesWrapper__36d07,
-.chatGradient__36d07 {
-    background: {{colors.surface.default.hex}} !important;
-    background-image: none !important;
-}
-
-.subtitleContainer_f75fb0,
-.title_f75fb0,
-.container__9293f,
-.headerBar__8a7fc,
-.title_c38106 {
-    background: {{colors.surface.default.hex}} !important;
-}
-
-.panels__5e434 {
-    background: {{colors.surface_container.default.hex}} !important;
-}
-
-.channelTextArea_f75fb0,
-.form_f75fb0,
-.wrapper__44df5,
-.channelBottomBarArea_f75fb0,
-.attachWrapper__0923f,
-.themedBackground__74017,
-.stackedBars__74017 {
-    background: {{colors.surface_container.default.hex}} !important;
-    background-image: none !important;
-}
-
-.slateTextArea_ec4baf {
-    background: {{colors.surface_container.default.hex}} !important;
-    color: {{colors.on_surface.default.hex}} !important;
-}
-
-.slateTextArea_ec4baf [data-slate-placeholder],
-.slateTextArea_ec4baf [data-slate-node],
-.slateTextArea_ec4baf span[data-slate-zero-width],
-[data-slate-placeholder],
-[class*="placeholder"],
-[class*="slateTextArea"] [class*="placeholder"] {
-    color: {{colors.on_surface_variant.default.hex}} !important;
-    opacity: 0.7 !important;
-}
-
-.message__5126c::before,
-.mentioned__5126c::before,
-.replying__5126c::before,
-.ephemeral__5126c::before {
-    background: none !important;
-    background-image: none !important;
-}
-
-[class*="mention"][class*="channel"],
-a[href*="/channels/"][class*="mention"] {
-    color: {{colors.primary.default.hex}} !important;
-    background: {{colors.surface_container_high.default.hex}} !important;
-}
-
-[class*="numberBadge"],
-[class*="mentionsBadge"] {
-    background-color: {{colors.primary.default.hex}} !important;
-    color: {{colors.on_primary.default.hex}} !important;
-}
-
-.newMessagesBar__0f481 {
-    background-color: {{colors.primary.default.hex}} !important;
-    color: {{colors.on_primary.default.hex}} !important;
-}
-
-.divider__908e2 {
-    border-color: {{colors.primary.default.hex}} !important;
-}
-
-[class*="channel"]:not([class*="muted"]) [class*="name"],
-[class*="channel"]:not([class*="muted"]) [class*="link"] {
-    color: {{colors.on_surface.default.hex}} !important;
-}
-
-[class*="channel"][class*="muted"] [class*="name"],
-[class*="channel"][class*="muted"] [class*="link"] {
-    color: {{colors.on_surface_variant.default.hex}} !important;
-    opacity: 0.6 !important;
-}
diff --git a/quickshell/matugen/templates/vesktop-base.css b/quickshell/matugen/templates/vesktop-base.css
deleted file mode 100644
index 3890a4579..000000000
--- a/quickshell/matugen/templates/vesktop-base.css
+++ /dev/null
@@ -1,217 +0,0 @@
-/**
- * @name DMS Discord Base CSS
- * @author DMS Team
- * @version 3.0.0
- * @description Minimal Discord color theme - stock layout with DMS colors
- * @source https://github.com/yourusername/dankdots
-*/
-
-body {
-    --font-primary: var(--font), 'gg sans';
-    --font-display: var(--font), 'gg sans';
-    --font-code: var(--code-font), 'gg mono';
-}
-
-@property --colors {
-    syntax: 'off | on';
-    inherits: false;
-    initial-value: on;
-}
-
-@container root style(--colors: on) {
-    .visual-refresh body,
-    .visual-refresh .theme-dark:not(.custom-user-profile-theme),
-    .visual-refresh .theme-light:not(.custom-user-profile-theme) {
-        --activity-card-background: var(--bg-3);
-        --autocomplete-bg: var(--bg-3);
-        --background-accent: var(--bg-4);
-        --background-floating: var(--bg-3);
-        --background-nested-floating: var(--bg-2);
-        --background-mentioned: color-mix(in srgb, var(--accent-2), transparent 90%);
-        --background-mentioned-hover: color-mix(in srgb, var(--accent-2), transparent 85%);
-        --background-message-highlight: color-mix(in srgb, var(--text-3), transparent 95%);
-        --background-message-highlight-hover: color-mix(in srgb, var(--text-3), transparent 92%);
-        --background-message-hover: var(--message-hover);
-        --background-primary: var(--bg-2);
-        --background-secondary: var(--bg-3);
-        --background-secondary-alt: var(--bg-3);
-        --background-tertiary: var(--bg-2);
-        --bg-base-primary: var(--bg-2);
-        --bg-base-secondary: var(--bg-2);
-        --bg-base-tertiary: var(--bg-3);
-        --background-mod-subtle: var(--hover);
-        --background-mod-normal: var(--active);
-        --background-mod-strong: var(--active-2);
-        --background-base-low: var(--bg-2);
-        --background-base-lower: var(--bg-2);
-        --background-base-lowest: var(--bg-2);
-        --background-surface-high: var(--bg-3);
-        --background-surface-higher: var(--bg-4);
-        --background-surface-highest: var(--bg-4);
-        --bg-surface-overlay: var(--bg-2);
-        --bg-surface-raised: var(--bg-3);
-        --chat-background-default: var(--bg-3);
-        --chat-text-muted: var(--text-5);
-        --input-background: var(--bg-3);
-        --modal-background: var(--bg-2);
-        --modal-footer-background: var(--bg-2);
-        --background-modifier-accent: var(--hover);
-        --background-modifier-active: var(--active);
-        --background-modifier-hover: var(--hover);
-        --background-modifier-selected: var(--active);
-        --bg-mod-faint: var(--hover);
-        --bg-mod-subtle: var(--bg-3);
-        --bg-mod-strong: var(--bg-3);
-        --bg-brand: var(--accent-2);
-        --border-faint: transparent;
-        --border-subtle: transparent;
-        --border-normal: transparent;
-        --border-strong: transparent;
-        --input-border: transparent;
-        --button-danger-background: var(--red-3);
-        --button-danger-background-active: var(--red-5);
-        --button-danger-background-hover: var(--red-4);
-        --button-danger-background-disabled: var(--red-5);
-        --button-danger-border: transparent;
-        --button-filled-brand-text: var(--text-0);
-        --button-filled-brand-background: var(--accent-3);
-        --button-filled-brand-background-active: var(--accent-5);
-        --button-filled-brand-background-hover: var(--accent-4);
-        --button-filled-brand-border: transparent;
-        --button-filled-brand-inverted-background: var(--text-1);
-        --button-filled-brand-inverted-background-active: var(--text-3);
-        --button-filled-brand-inverted-background-hover: var(--text-2);
-        --button-filled-brand-inverted-text: var(--bg-1);
-        --button-filled-white-background: var(--text-1);
-        --button-filled-white-background-active: var(--text-3);
-        --button-filled-white-background-hover: var(--text-2);
-        --button-filled-white-text: var(--bg-1);
-        --button-outline-danger-background: var(--bg-3);
-        --button-outline-danger-background-active: var(--text-5);
-        --button-outline-danger-background-hover: var(--bg-2);
-        --button-outline-danger-border: transparent;
-        --button-outline-danger-border-active: transparent;
-        --button-outline-danger-border-hover: transparent;
-        --button-outline-danger-text: var(--red-1);
-        --button-outline-danger-text-active: var(--red-1);
-        --button-outline-danger-text-hover: var(--red-1);
-        --button-outline-primary-background: transparent;
-        --button-outline-primary-background-active: var(--active);
-        --button-outline-primary-background-hover: var(--hover);
-        --button-outline-primary-border: transparent;
-        --button-outline-primary-border-active: transparent;
-        --button-outline-primary-border-hover: transparent;
-        --button-outline-primary-text: var(--text-3);
-        --button-outline-primary-text-active: var(--text-3);
-        --button-outline-primary-text-hover: var(--text-3);
-        --button-positive-background: var(--green-2);
-        --button-positive-background-active: var(--green-4);
-        --button-positive-background-hover: var(--green-3);
-        --button-positive-background-disabled: var(--green-4);
-        --button-positive-border: transparent;
-        --button-secondary-background: var(--bg-4);
-        --button-secondary-background-active: var(--text-5);
-        --button-secondary-background-hover: var(--bg-3);
-        --button-secondary-background-disabled: var(--bg-3);
-        --button-secondary-text: var(--text-3);
-        --button-transparent-background: var(--hover);
-        --button-transparent-background-active: var(--active-2);
-        --button-transparent-background-hover: var(--active);
-        --button-transparent-text: var(--text-3);
-        --redesign-button-secondary-text: var(--text-3);
-        --card-primary-bg: var(--bg-3);
-        --card-secondary-bg: var(--bg-4);
-        --channel-icon: var(--text-4);
-        --channels-default: var(--text-4);
-        --embed-title: var(--text-2);
-        --header-primary: var(--text-2);
-        --header-secondary: var(--text-4);
-        --header-muted: var(--text-4);
-        --icon-muted: var(--text-5);
-        --icon-primary: var(--text-3);
-        --icon-secondary: var(--text-4);
-        --icon-tertiary: var(--text-4);
-        --text-brand: var(--accent-1);
-        --text-danger: var(--red-1);
-        --text-link: var(--accent-1);
-        --text-low-contrast: var(--text-4);
-        --text-muted: var(--text-5);
-        --text-muted-on-default: var(--text-4);
-        --text-normal: var(--text-3);
-        --text-positive: var(--green-1);
-        --text-primary: var(--text-3);
-        --text-secondary: var(--text-4);
-        --text-warning: var(--yellow-1);
-        --text-default: var(--text-3);
-        --text-tertiary: var(--text-4);
-        --user-profile-overlay-background: var(--bg-2);
-        --user-profile-overlay-background-hover: var(--bg-4);
-        --status-danger: var(--red-2);
-        --status-danger-background: var(--red-3);
-        --status-danger-text: var(--white);
-        --status-dnd: var(--dnd);
-        --status-idle: var(--idle);
-        --status-offline: var(--offline);
-        --status-online: var(--online);
-        --status-positive: var(--green-2);
-        --status-positive-background: var(--green-2);
-        --status-positive-text: var(--white);
-        --status-speaking: var(--green-2);
-        --status-warning: var(--yellow-2);
-        --interactive-normal: var(--text-4);
-        --interactive-hover: var(--text-3);
-        --interactive-active: var(--text-3);
-        --interactive-muted: var(--text-5);
-        --mention-foreground: var(--accent-1);
-        --mention-background: color-mix(in srgb, var(--accent-2), transparent 90%);
-        --channel-text-area-placeholder: var(--text-5);
-        --message-reacted-text: var(--text-2);
-        --message-reacted-background: color-mix(in srgb, var(--accent-2), transparent 90%);
-        --custom-channel-members-bg: var(--bg-2);
-        --redesign-input-control-selected: var(--accent-2);
-        --scrollbar-auto-thumb: var(--bg-4);
-        --scrollbar-auto-track: transparent;
-        --scrollbar-thin-thumb: var(--bg-4);
-        --scrollbar-thin-track: transparent;
-        --white: var(--text-0);
-        --white-500: var(--text-0);
-        --redesign-button-overlay-alpha-text: var(--text-2);
-        --brand-360: var(--accent-2);
-        --brand-500: var(--accent-2);
-        --blurple-50: var(--accent-2);
-        --red-400: var(--red-2);
-        --red-500: var(--red-3);
-        --green-360: var(--green-2);
-        --primary-400: var(--text-4);
-        --deprecated-text-input-bg: var(--bg-3);
-        --deprecated-text-input-border: transparent;
-        --background-code: var(--bg-3);
-    }
-
-    .visual-refresh {
-        .bg__960e4 { background: var(--bg-1); }
-        .base_c48ade { background: var(--bg-1); }
-        .colorPickerSwatch__459fb[style*="rgb(88, 101, 242)"],
-        .newBadge_faa96b,
-        .mentioned__5126c:before { background-color: var(--accent-2) !important; }
-        .botTagRegular__82f07 { background-color: var(--accent-2); }
-        .container__87bf1.checked__87bf1 { background-color: var(--accent-2) !important; }
-        .container__87bf1.checked__87bf1 .slider__87bf1 > svg > path { fill: var(--accent-2) !important; }
-        .newMessagesBar__0f481 { background-color: var(--accent-3); }
-        .barFill_a562c8 { background-color: var(--accent-2) !important; }
-        ::selection,
-        .highlight { background: var(--accent-3); color: var(--text-0); }
-        rect[fill='#82838b'] { fill: var(--offline); }
-        .status_a423bd[style='background-color: rgb(130, 131, 139);'] { background-color: var(--offline) !important; }
-        rect[fill='#43a25a'],
-        path[fill='#43a25a'],
-        path[fill='var(--status-positive)'] { fill: var(--online); }
-        .status_a423bd[style='background-color: rgb(67, 162, 90);'] { background-color: var(--online) !important; }
-        rect[fill='#ca9654'] { fill: var(--idle); }
-        .status_a423bd[style='background-color: rgb(202, 150, 84);'] { background-color: var(--idle) !important; }
-        rect[fill='#d83a42'] { fill: var(--dnd); }
-        .status_a423bd[style='background-color: rgb(216, 58, 66);'] { background-color: var(--dnd) !important; }
-        rect[fill='#9147ff'] { fill: var(--streaming); }
-        div[style*='background-color: rgb(67, 162, 90)'] { background-color: var(--online) !important; }
-    }
-}
diff --git a/quickshell/matugen/templates/vesktop.css b/quickshell/matugen/templates/vesktop.css
index 3bc86700c..f10019535 100644
--- a/quickshell/matugen/templates/vesktop.css
+++ b/quickshell/matugen/templates/vesktop.css
@@ -1,99 +1,282 @@
 /**
- * @name dms-midnight
- * @description midnight-discord, generated by dms
- * @author refact0r
- * @version 1.6.2
- * @invite nz87hXyvcy
- * @website https://github.com/refact0r/midnight-discord
- * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
- * @authorId 508863359777505290
- * @authorLink https://www.refact0r.dev
+ * @name DMS
+ * @description Material Design 3 recolor generated by DankMaterialShell (matugen). Stock layout, colors only.
+ * @author DankMaterialShell
+ * @version 1.0.0
+ * @website https://github.com/AvengeMedia/DankMaterialShell
 */
 
-/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */
+.theme-dark,
+.theme-light,
+.visual-refresh.theme-dark,
+.visual-refresh.theme-light,
+.visual-refresh .theme-dark,
+.visual-refresh .theme-light {
+    /* base backgrounds — MD3 elevation: content darkest, chrome lighter */
+    --background-base-low: {{colors.surface.default.hex}} !important;
+    --chat-background: {{colors.surface.default.hex}} !important;
+    --chat-background-default: {{colors.surface.default.hex}} !important;
+    --background-primary: {{colors.surface.default.hex}} !important;
+    --bg-base-primary: {{colors.surface.default.hex}} !important;
+    --home-background: {{colors.surface.default.hex}} !important;
 
-@import url('https://refact0r.github.io/midnight-discord/build/midnight.css');
+    --background-base-lower: {{colors.surface_container_low.default.hex}} !important;
+    --background-secondary: {{colors.surface_container_low.default.hex}} !important;
+    --bg-base-secondary: {{colors.surface_container_low.default.hex}} !important;
+    --custom-channel-members-bg: {{colors.surface_container_low.default.hex}} !important;
 
-/* customize things here */
-:root {
-	/* font, change to 'gg sans' for default discord font*/
-	--font: 'gg sans';
+    --background-base-lowest: {{colors.surface_container.default.hex}} !important;
+    --app-frame-background: {{colors.surface_container.default.hex}} !important;
+    --background-tertiary: {{colors.surface_container.default.hex}} !important;
+    --background-secondary-alt: {{colors.surface_container.default.hex}} !important;
+    --bg-base-tertiary: {{colors.surface_container.default.hex}} !important;
+    --__header-bar-background: {{colors.surface_container.default.hex}} !important;
 
-	/* top left corner text */
-	--corner-text: 'Midnight';
+    --background-surface-high: {{colors.surface_container_high.default.hex}} !important;
+    --bg-surface-raised: {{colors.surface_container_high.default.hex}} !important;
+    --card-primary-bg: {{colors.surface_container_high.default.hex}} !important;
+    --activity-card-background: {{colors.surface_container_high.default.hex}} !important;
 
-	/* color of status indicators and window controls */
-  --online-indicator: {{colors.inverse_primary.default.hex}};     /* change to #23a55a for default green */
-	--dnd-indicator: {{colors.error.default.hex}};                  /* change to #f13f43 for default red */
-	--idle-indicator: {{colors.tertiary_container.default.hex}};    /* change to #f0b232 for default yellow */
-	--streaming-indicator: {{colors.on_primary.default.hex}};       /* change to #593695 for default purple */
+    --background-surface-higher: {{colors.surface_container_high.default.hex}} !important;
+    --bg-surface-overlay: {{colors.surface_container_high.default.hex}} !important;
+    --background-floating: {{colors.surface_container_high.default.hex}} !important;
+    --background-nested-floating: {{colors.surface_container_high.default.hex}} !important;
+    --autocomplete-bg: {{colors.surface_container_high.default.hex}} !important;
 
-	/* accent colors */
-    --accent-1: {{colors.tertiary.default.hex}};            /* links */
-	--accent-2: {{colors.primary.default.hex}};             /* general unread/mention elements, some icons when active */
-	--accent-3: {{colors.primary.default.hex}};             /* accent buttons */
-	--accent-4: {{colors.surface_bright.default.hex}};      /* accent buttons when hovered */
-	--accent-5: {{colors.primary_fixed_dim.default.hex}};   /* accent buttons when clicked */
-	--mention:  {{colors.surface.default.hex}};             /* mentions & mention messages */
-	--mention-hover: {{colors.surface_bright.default.hex}}; /* mentions & mention messages when hovered */
+    --background-surface-highest: {{colors.surface_container_highest.default.hex}} !important;
+    --modal-background: {{colors.surface_container_highest.default.hex}} !important;
+    --modal-footer-background: {{colors.surface_container_highest.default.hex}} !important;
+    --background-accent: {{colors.surface_container_highest.default.hex}} !important;
+    --card-secondary-bg: {{colors.surface_container_highest.default.hex}} !important;
+    --user-profile-overlay-background: {{colors.surface_container_highest.default.hex}} !important;
 
-	/* text colors */
-	--text-0: {{colors.surface.default.hex}};               /* text on colored elements */
-	--text-1: {{colors.on_surface.default.hex}};            /* other normally white text */
-	--text-2: {{colors.on_surface.default.hex}};            /* headings and important text */
-	--text-3: {{colors.on_surface_variant.default.hex}};    /* normal text */
-	--text-4: {{colors.on_surface_variant.default.hex}};    /* icon buttons and channels */
-	--text-5: {{colors.outline.default.hex}};               /* muted channels/chats and timestamps */
+    --chat-border: color-mix(in srgb, {{colors.outline_variant.default.hex}} 50%, transparent) !important;
 
-	/* background and dark colors */
-    --bg-1: {{colors.surface_variant.default.hex}};                             /* dark buttons when clicked */
-	--bg-2: {{colors.surface_container_high.default.hex}};              /* dark buttons */
-	--bg-3: {{colors.surface_container_low.default.hex}};               /* spacing, secondary elements */
-	--bg-4: {{colors.surface.default.hex}};                             /* main background color */
-	--hover: {{colors.surface_bright.default.hex}};                     /* channels and buttons when hovered */
-	--active: {{colors.surface_bright.default.hex}};                    /* channels and buttons when clicked or selected */
-	--message-hover: {{colors.surface_bright.default.hex}};             /* messages when hovered */
+    /* text */
+    --text-default: {{colors.on_surface.default.hex}} !important;
+    --text-normal: {{colors.on_surface.default.hex}} !important;
+    --text-primary: {{colors.on_surface.default.hex}} !important;
+    --text-strong: {{colors.on_surface.default.hex}} !important;
+    --header-primary: {{colors.on_surface.default.hex}} !important;
+    --embed-title: {{colors.on_surface.default.hex}} !important;
+    --interactive-active: {{colors.on_surface.default.hex}} !important;
+    --input-text-default: {{colors.on_surface.default.hex}} !important;
 
-	/* amount of spacing and padding */
-	--spacing: 12px;
+    --text-secondary: {{colors.on_surface_variant.default.hex}} !important;
+    --text-muted: {{colors.on_surface_variant.default.hex}} !important;
+    --text-subtle: {{colors.on_surface_variant.default.hex}} !important;
+    --text-tertiary: {{colors.on_surface_variant.default.hex}} !important;
+    --chat-text-muted: {{colors.on_surface_variant.default.hex}} !important;
+    --header-secondary: {{colors.on_surface_variant.default.hex}} !important;
+    --header-muted: {{colors.on_surface_variant.default.hex}} !important;
+    --text-muted-on-default: {{colors.on_surface_variant.default.hex}} !important;
+    --text-low-contrast: {{colors.on_surface_variant.default.hex}} !important;
 
-	/* animations */
-	/* ALL ANIMATIONS CAN BE DISABLED WITH REDUCED MOTION IN DISCORD SETTINGS */
-	--list-item-transition: 0.2s ease;  /* channels/members/settings hover transition */
-	--unread-bar-transition: 0.2s ease; /* unread bar moving into view transition */
-	--moon-spin-transition: 0.4s ease;  /* moon icon spin */
-	--icon-spin-transition: 1s ease;    /* round icon button spin (settings, emoji, etc.) */
+    --interactive-normal: {{colors.on_surface_variant.default.hex}} !important;
+    --channels-default: {{colors.outline.default.hex}} !important;
+    --channel-icon: {{colors.outline.default.hex}} !important;
+    --icon-primary: {{colors.on_surface_variant.default.hex}} !important;
+    --icon-secondary: {{colors.on_surface_variant.default.hex}} !important;
+    --icon-tertiary: {{colors.on_surface_variant.default.hex}} !important;
+    --interactive-icon-default: {{colors.on_surface_variant.default.hex}} !important;
+    --interactive-hover: {{colors.on_surface.default.hex}} !important;
+    --interactive-icon-hover: {{colors.on_surface.default.hex}} !important;
+    --interactive-icon-active: {{colors.on_surface.default.hex}} !important;
+    --interactive-text-hover: {{colors.on_surface.default.hex}} !important;
+    --interactive-text-active: {{colors.on_surface.default.hex}} !important;
 
-	/* corner roundness (border-radius) */
-	--roundness-xl: 22px; /* roundness of big panel outer corners */
-	--roundness-l: 20px; /* popout panels */
-	--roundness-m: 16px; /* smaller panels, images, embeds */
-	--roundness-s: 12px; /* members, settings inputs */
-	--roundness-xs: 10px; /* channels, buttons */
-	--roundness-xxs: 8px; /* searchbar, small elements */
+    --interactive-muted: {{colors.outline_variant.default.hex}} !important;
+    --icon-muted: {{colors.outline.default.hex}} !important;
+    --channel-text-area-placeholder: {{colors.outline.default.hex}} !important;
+    --input-placeholder-text-default: {{colors.outline.default.hex}} !important;
 
-	/* direct messages moon icon */
-	/* change to block to show, none to hide */
-	--discord-icon: none; /* discord icon */
-	--moon-icon: block; /* moon icon */
-	--moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); /* custom icon url */
-	--moon-icon-size: auto;
+    --text-link: {{colors.primary.default.hex}} !important;
+    --text-brand: {{colors.primary.default.hex}} !important;
+    --control-brand-foreground: {{colors.primary.default.hex}} !important;
+    --control-brand-foreground-new: {{colors.primary.default.hex}} !important;
+    --badge-text-brand: {{colors.primary.default.hex}} !important;
 
-	/* filter uncolorable elements to fit theme */
-	/* (just set to none, they're too much work to configure) */
-	--login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); /* login background artwork */
-	--green-to-accent-3-filter: hue-rotate(56deg) saturate(1.43); /* add friend page explore icon */
-	--blurple-to-accent-3-filter: hue-rotate(304deg) saturate(0.84) brightness(1.2); /* add friend page school icon */
+    --text-danger: {{colors.error.default.hex}} !important;
+    --text-feedback-critical: {{colors.error.default.hex}} !important;
+    --text-positive: #23a55a !important;
+    --text-feedback-positive: #23a55a !important;
+    --text-warning: #f0b232 !important;
+    --text-feedback-warning: #f0b232 !important;
+    --text-feedback-info: {{colors.secondary.default.hex}} !important;
+
+    /* interactive state layers — translucent, MD3 opacities */
+    --background-modifier-hover: color-mix(in srgb, {{colors.on_surface.default.hex}} 8%, transparent) !important;
+    --background-mod-subtle: color-mix(in srgb, {{colors.on_surface.default.hex}} 8%, transparent) !important;
+    --bg-mod-faint: color-mix(in srgb, {{colors.on_surface.default.hex}} 8%, transparent) !important;
+    --interactive-background-hover: color-mix(in srgb, {{colors.on_surface.default.hex}} 8%, transparent) !important;
+
+    --background-modifier-active: color-mix(in srgb, {{colors.on_surface.default.hex}} 10%, transparent) !important;
+    --background-mod-normal: color-mix(in srgb, {{colors.on_surface.default.hex}} 10%, transparent) !important;
+    --interactive-background-active: color-mix(in srgb, {{colors.on_surface.default.hex}} 10%, transparent) !important;
+
+    --background-modifier-selected: color-mix(in srgb, {{colors.primary.default.hex}} 14%, transparent) !important;
+    --background-mod-strong: color-mix(in srgb, {{colors.primary.default.hex}} 14%, transparent) !important;
+    --bg-mod-strong: color-mix(in srgb, {{colors.primary.default.hex}} 14%, transparent) !important;
+    --interactive-background-selected: color-mix(in srgb, {{colors.primary.default.hex}} 14%, transparent) !important;
+
+    --background-modifier-accent: color-mix(in srgb, {{colors.on_surface.default.hex}} 6%, transparent) !important;
+    --background-message-hover: color-mix(in srgb, {{colors.on_surface.default.hex}} 4%, transparent) !important;
+    --message-background-hover: color-mix(in srgb, {{colors.on_surface.default.hex}} 4%, transparent) !important;
+
+    --background-message-highlight: color-mix(in srgb, {{colors.tertiary.default.hex}} 10%, transparent) !important;
+    --background-message-highlight-hover: color-mix(in srgb, {{colors.tertiary.default.hex}} 14%, transparent) !important;
+    --message-highlight-background-default: color-mix(in srgb, {{colors.tertiary.default.hex}} 10%, transparent) !important;
+    --message-highlight-background-hover: color-mix(in srgb, {{colors.tertiary.default.hex}} 14%, transparent) !important;
+
+    --background-mentioned: color-mix(in srgb, {{colors.primary.default.hex}} 10%, transparent) !important;
+    --background-mentioned-hover: color-mix(in srgb, {{colors.primary.default.hex}} 14%, transparent) !important;
+    --message-mentioned-background-default: color-mix(in srgb, {{colors.primary.default.hex}} 10%, transparent) !important;
+    --message-mentioned-background-hover: color-mix(in srgb, {{colors.primary.default.hex}} 14%, transparent) !important;
+    --mention-background: color-mix(in srgb, {{colors.primary.default.hex}} 15%, transparent) !important;
+    --mention-foreground: {{colors.primary.default.hex}} !important;
+
+    --message-reacted-background-default: color-mix(in srgb, {{colors.primary.default.hex}} 15%, transparent) !important;
+    --message-reacted-text-default: {{colors.on_surface.default.hex}} !important;
+
+    /* brand ramp — absolute lightness steps, mode-safe */
+    --brand-100: color-mix(in srgb, {{colors.primary.default.hex}} 12%, #ffffff) !important;
+    --brand-200: color-mix(in srgb, {{colors.primary.default.hex}} 25%, #ffffff) !important;
+    --brand-260: color-mix(in srgb, {{colors.primary.default.hex}} 33%, #ffffff) !important;
+    --brand-300: color-mix(in srgb, {{colors.primary.default.hex}} 40%, #ffffff) !important;
+    --brand-360: color-mix(in srgb, {{colors.primary.default.hex}} 55%, #ffffff) !important;
+    --brand-400: color-mix(in srgb, {{colors.primary.default.hex}} 70%, #ffffff) !important;
+    --brand-500: {{colors.primary.default.hex}} !important;
+    --brand-560: color-mix(in srgb, {{colors.primary.default.hex}} 90%, #000000) !important;
+    --brand-600: color-mix(in srgb, {{colors.primary.default.hex}} 85%, #000000) !important;
+    --brand-700: color-mix(in srgb, {{colors.primary.default.hex}} 70%, #000000) !important;
+    --brand-800: color-mix(in srgb, {{colors.primary.default.hex}} 55%, #000000) !important;
+    --brand-900: color-mix(in srgb, {{colors.primary.default.hex}} 40%, #000000) !important;
+    --brand-experiment: {{colors.primary.default.hex}} !important;
+    --brand-experiment-360: {{colors.primary.default.hex}} !important;
+    --brand-experiment-500: {{colors.primary.default.hex}} !important;
+    --blurple-50: {{colors.primary.default.hex}} !important;
+    --blue-500: {{colors.primary.default.hex}} !important;
+
+    /* buttons and controls — on-color state layers */
+    --bg-brand: {{colors.primary.default.hex}} !important;
+    --control-primary-background-default: {{colors.primary.default.hex}} !important;
+    --control-primary-background-hover: color-mix(in srgb, {{colors.primary.default.hex}} 92%, {{colors.on_primary.default.hex}}) !important;
+    --control-primary-background-active: color-mix(in srgb, {{colors.primary.default.hex}} 85%, {{colors.on_primary.default.hex}}) !important;
+    --button-filled-brand-background: {{colors.primary.default.hex}} !important;
+    --button-filled-brand-background-hover: color-mix(in srgb, {{colors.primary.default.hex}} 92%, {{colors.on_primary.default.hex}}) !important;
+    --button-filled-brand-background-active: color-mix(in srgb, {{colors.primary.default.hex}} 85%, {{colors.on_primary.default.hex}}) !important;
+    --button-filled-brand-text: {{colors.on_primary.default.hex}} !important;
+
+    --control-secondary-background-default: {{colors.surface_container_high.default.hex}} !important;
+    --control-secondary-background-hover: {{colors.surface_container_highest.default.hex}} !important;
+    --control-secondary-background-active: color-mix(in srgb, {{colors.surface_container_highest.default.hex}} 90%, {{colors.on_surface.default.hex}}) !important;
+    --control-secondary-text-default: {{colors.on_surface.default.hex}} !important;
+    --button-secondary-background: {{colors.surface_container_high.default.hex}} !important;
+    --button-secondary-background-hover: {{colors.surface_container_highest.default.hex}} !important;
+    --button-secondary-background-active: color-mix(in srgb, {{colors.surface_container_highest.default.hex}} 90%, {{colors.on_surface.default.hex}}) !important;
+    --button-secondary-text: {{colors.on_surface.default.hex}} !important;
+    --redesign-button-secondary-text: {{colors.on_surface.default.hex}} !important;
+
+    --button-danger-background: {{colors.error.default.hex}} !important;
+    --button-danger-background-hover: color-mix(in srgb, {{colors.error.default.hex}} 92%, {{colors.on_error.default.hex}}) !important;
+    --button-danger-background-active: color-mix(in srgb, {{colors.error.default.hex}} 85%, {{colors.on_error.default.hex}}) !important;
+    --button-danger-text: {{colors.on_error.default.hex}} !important;
+    --control-critical-primary-background-default: {{colors.error.default.hex}} !important;
+    --button-outline-danger-text: {{colors.error.default.hex}} !important;
+    --button-outline-danger-text-hover: {{colors.error.default.hex}} !important;
+    --button-outline-danger-text-active: {{colors.error.default.hex}} !important;
+    --button-outline-danger-border: {{colors.error.default.hex}} !important;
+    --button-outline-danger-border-hover: {{colors.error.default.hex}} !important;
+    --button-outline-danger-border-active: {{colors.error.default.hex}} !important;
+
+    --button-positive-background: #23a55a !important;
+    --button-positive-background-hover: color-mix(in srgb, #23a55a 90%, #ffffff) !important;
+
+    --button-outline-primary-text: {{colors.on_surface.default.hex}} !important;
+    --button-outline-primary-text-hover: {{colors.on_surface.default.hex}} !important;
+    --button-outline-primary-text-active: {{colors.on_surface.default.hex}} !important;
+    --button-outline-primary-background-hover: color-mix(in srgb, {{colors.on_surface.default.hex}} 8%, transparent) !important;
+    --button-outline-primary-background-active: color-mix(in srgb, {{colors.on_surface.default.hex}} 10%, transparent) !important;
+    --button-outline-brand-text: {{colors.primary.default.hex}} !important;
+    --button-outline-brand-background-hover: color-mix(in srgb, {{colors.primary.default.hex}} 10%, transparent) !important;
+    --button-transparent-text: {{colors.on_surface.default.hex}} !important;
+    --button-transparent-background-hover: color-mix(in srgb, {{colors.on_surface.default.hex}} 8%, transparent) !important;
+    --button-transparent-background-active: color-mix(in srgb, {{colors.on_surface.default.hex}} 10%, transparent) !important;
+
+    --redesign-input-control-selected: {{colors.primary.default.hex}} !important;
+    --focus-primary: {{colors.primary.default.hex}} !important;
+    --__adaptive-focus-ring-color: {{colors.primary.default.hex}} !important;
+
+    /* status — keep Discord semantics, theme only offline */
+    --status-online: #23a55a !important;
+    --status-positive: #23a55a !important;
+    --status-speaking: #23a55a !important;
+    --text-status-online: #23a55a !important;
+    --icon-status-online: #23a55a !important;
+    --status-idle: #f0b232 !important;
+    --text-status-idle: #f0b232 !important;
+    --icon-status-idle: #f0b232 !important;
+    --status-dnd: #f13f43 !important;
+    --text-status-dnd: #f13f43 !important;
+    --icon-status-dnd: #f13f43 !important;
+    --status-danger: #f13f43 !important;
+    --status-offline: {{colors.outline.default.hex}} !important;
+    --text-status-offline: {{colors.outline.default.hex}} !important;
+    --icon-status-offline: {{colors.outline.default.hex}} !important;
+
+    /* feedback, notices, badges */
+    --background-feedback-critical: {{colors.error_container.default.hex}} !important;
+    --notice-background-critical: {{colors.error_container.default.hex}} !important;
+    --notice-text-critical: {{colors.on_error_container.default.hex}} !important;
+    --icon-feedback-critical: {{colors.error.default.hex}} !important;
+    --background-feedback-positive: {{colors.primary_container.default.hex}} !important;
+    --notice-background-positive: {{colors.primary_container.default.hex}} !important;
+    --notice-text-positive: {{colors.on_primary_container.default.hex}} !important;
+    --background-feedback-info: {{colors.secondary_container.default.hex}} !important;
+    --notice-background-info: {{colors.secondary_container.default.hex}} !important;
+    --notice-text-info: {{colors.on_secondary_container.default.hex}} !important;
+    --background-feedback-warning: {{colors.tertiary_container.default.hex}} !important;
+    --notice-background-warning: {{colors.tertiary_container.default.hex}} !important;
+    --notice-text-warning: {{colors.on_tertiary_container.default.hex}} !important;
+    --badge-notification-background: {{colors.error.default.hex}} !important;
+    --red-400: {{colors.error.default.hex}} !important;
+    --red-430: {{colors.error.default.hex}} !important;
+    --red-500: {{colors.error.default.hex}} !important;
+
+    /* inputs, code, spoilers */
+    --input-background-default: {{colors.surface_container_highest.default.hex}} !important;
+    --input-background: {{colors.surface_container_highest.default.hex}} !important;
+    --channeltextarea-background: {{colors.surface_container_highest.default.hex}} !important;
+    --deprecated-text-input-bg: {{colors.surface_container_highest.default.hex}} !important;
+    --input-border-default: {{colors.outline_variant.default.hex}} !important;
+    --input-border: {{colors.outline_variant.default.hex}} !important;
+    --deprecated-text-input-border: {{colors.outline_variant.default.hex}} !important;
+    --background-code: {{colors.surface_container.default.hex}} !important;
+    --spoiler-hidden-background: {{colors.surface_container_highest.default.hex}} !important;
+    --spoiler-revealed-background: {{colors.surface_container.default.hex}} !important;
+
+    /* scrollbars */
+    --scrollbar-auto-thumb: {{colors.outline_variant.default.hex}} !important;
+    --scrollbar-thin-thumb: {{colors.outline_variant.default.hex}} !important;
+    --scrollbar-auto-scrollbar-color-thumb: {{colors.outline_variant.default.hex}} !important;
+    --scrollbar-auto-track: transparent !important;
+    --scrollbar-thin-track: transparent !important;
+    --scrollbar-auto-scrollbar-color-track: transparent !important;
+
+    /* borders */
+    --border-faint: color-mix(in srgb, {{colors.outline_variant.default.hex}} 30%, transparent) !important;
+    --border-subtle: color-mix(in srgb, {{colors.outline_variant.default.hex}} 50%, transparent) !important;
+    --border-muted: {{colors.outline_variant.default.hex}} !important;
+    --border-normal: {{colors.outline_variant.default.hex}} !important;
+    --border-strong: {{colors.outline.default.hex}} !important;
 }
 
-/* Selected chat/friend text */
-.selected_f5eb4b,
-.selected_f6f816 .link_d8bfb3 {
-  color: var(--text-0) !important;
-  background: var(--accent-3) !important;
+::selection {
+    background: color-mix(in srgb, {{colors.primary.default.hex}} 35%, transparent);
 }
 
-.selected_f6f816 .link_d8bfb3 * {
-  color: var(--text-0) !important;
-  fill: var(--text-0) !important;
+.theme-dark .highlight,
+.theme-light .highlight {
+    background: color-mix(in srgb, {{colors.primary.default.hex}} 30%, transparent);
+    color: inherit;
 }