diff --git a/src/api/Notifications/styles.css b/src/api/Notifications/styles.css
index a914f139e..0b829076e 100644
--- a/src/api/Notifications/styles.css
+++ b/src/api/Notifications/styles.css
@@ -47,13 +47,13 @@
 .vc-notification-close-btn {
     all: unset;
     cursor: pointer;
-    color: var(--interactive-icon-default);
+    color: var(--interactive-icon-default, var(--interactive-normal));
     opacity: 0.5;
     transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
 }
 
 .vc-notification-close-btn:hover {
-    color: var(--interactive-icon-hover);
+    color: var(--interactive-icon-hover, var(--interactive-hover));
     opacity: 1;
 }
 
@@ -137,5 +137,5 @@
 
 .vc-notification-log-danger-btn {
     color: var(--white-500);
-    background-color: var(--redesign-button-danger-background);
-}
\ No newline at end of file
+    background-color: var(--redesign-button-danger-background, var(--button-danger-background));
+}
diff --git a/src/components/Button.css b/src/components/Button.css
index 7aa99a7ad..334e1b5ab 100644
--- a/src/components/Button.css
+++ b/src/components/Button.css
@@ -10,7 +10,7 @@
     text-align: start;
     transition: 50ms ease-in;
     transition-property: background-color, color, border-color, opacity;
-    background: var(--control-secondary-background-default);
+    background: var(--control-secondary-background-default, var(--control-background-secondary-default));
     color: var(--text-default);
     white-space: nowrap;
 
@@ -26,7 +26,7 @@
 
     &:focus-visible {
         /* stylelint-disable-next-line custom-property-pattern */
-        box-shadow: 0 0 0 4px var(--__adaptive-focus-ring-color, var(--focus-primary, #00b0f4));
+        box-shadow: 0 0 0 4px var(--__adaptive-focus-ring-color, var(--border-focus, var(--focus-primary, #00b0f4)));
     }
 }
 
@@ -63,85 +63,84 @@
 }
 
 .vc-btn-primary {
-    background-color: var(--control-primary-background-default);
-    border-color: var(--control-primary-border-default);
-    color: var(--control-primary-text-default);
+    background-color: var(--control-primary-background-default, var(--control-background-primary-default));
+    border-color: var(--control-primary-border-default, var(--control-border-primary-default));
+    color: var(--control-primary-text-default, var(--control-text-primary-default));
 
     &:hover {
-        background-color: var(--control-primary-background-hover);
-        border-color: var(--control-primary-border-hover);
-        color: var(--control-primary-text-hover);
+        background-color: var(--control-primary-background-hover, var(--control-background-primary-hover));
+        border-color: var(--control-primary-border-hover, var(--control-border-primary-hover));
+        color: var(--control-primary-text-hover, var(--control-text-primary-hover));
     }
 }
 
 .vc-btn-secondary,
 .vc-btn-link {
-    background-color: var(--control-secondary-background-default);
-    border-color: var(--control-secondary-border-default);
-    color: var(--control-secondary-text-default);
+    background-color: var(--control-secondary-background-default, var(--control-background-secondary-default));
+    border-color: var(--control-secondary-border-default, var(--control-border-secondary-default));
+    color: var(--control-secondary-text-default, var(--control-text-secondary-default));
 
     &:hover {
-        background-color: var(--control-secondary-background-hover);
-        border-color: var(--control-secondary-border-hover);
-        color: var(--control-secondary-text-hover);
+        background-color: var(--control-secondary-background-hover, var(--control-background-secondary-hover));
+        border-color: var(--control-secondary-border-hover, var(--control-border-secondary-hover));
+        color: var(--control-secondary-text-hover, var(--control-text-secondary-hover));
     }
 }
 
 .vc-btn-dangerPrimary {
-    background-color: var(--control-critical-primary-background-default);
-    border-color: var(--control-critical-primary-border-default);
-    color: var(--control-critical-primary-text-default);
+    background-color: var(--control-critical-primary-background-default, var(--control-background-critical-primary-default));
+    border-color: var(--control-critical-primary-border-default, var(--control-border-critical-primary-default));
+    color: var(--control-critical-primary-text-default, var(--control-text-critical-primary-default));
 
     &:hover {
-        background-color: var(--control-critical-primary-background-hover);
-        border-color: var(--control-secondary-background-hover);
-        color: var(--control-secondary-background-hover);
+        background-color: var(--control-critical-primary-background-hover, var(--control-background-critical-primary-hover));
+        border-color: var(--control-critical-primary-border-hover, var(--control-border-critical-primary-hover));
+        color: var(--control-critical-primary-text-hover, var(--control-text-critical-primary-hover));
     }
 }
 
 .vc-btn-dangerSecondary {
-    background-color: var(--control-critical-secondary-background-default);
-    border-color: var(--control-critical-secondary-border-default);
-    color: var(--control-critical-secondary-text-default);
+    background-color: var(--control-critical-secondary-background-default, var(--control-background-critical-secondary-default));
+    border-color: var(--control-critical-secondary-border-default, var(--control-border-critical-secondary-default));
+    color: var(--control-critical-secondary-text-default, var(--control-text-critical-secondary-default));
 
     &:hover {
-        background-color: var(--control-critical-secondary-background-hover);
-        border-color: var(--control-critical-secondary-border-hover);
-        color: var(--control-critical-secondary-text-hover);
+        background-color: var(--control-critical-secondary-background-hover, var(--control-background-critical-secondary-hover));
+        border-color: var(--control-critical-secondary-border-hover, var(--control-border-critical-secondary-hover));
+        color: var(--control-critical-secondary-text-hover, var(--control-text-critical-secondary-hover));
     }
 }
 
 .vc-btn-overlayPrimary {
-    background-color: var(--control-overlay-primary-background-default);
-    border-color: var(--control-overlay-primary-border-default);
-    color: var(--control-overlay-primary-text-default);
+    background-color: var(--control-overlay-primary-background-default, var(--control-background-overlay-primary-default));
+    border-color: var(--control-overlay-primary-border-default, var(--control-border-overlay-primary-default));
+    color: var(--control-overlay-primary-text-default, var(--control-text-overlay-primary-default));
 
     &:hover {
-        background-color: var(--control-overlay-primary-background-hover);
-        border-color: var(--control-overlay-primary-border-hover);
-        color: var(--control-overlay-primary-text-hover);
+        background-color: var(--control-overlay-primary-background-hover, var(--control-background-overlay-primary-hover));
+        border-color: var(--control-overlay-primary-border-hover, var(--control-border-overlay-primary-hover));
+        color: var(--control-overlay-primary-text-hover, var(--control-text-overlay-primary-hover));
     }
 }
 
 .vc-btn-positive {
-    background-color: var(--redesign-button-positive-background);
-    border-color: var(--redesign-button-positive-background);
-    color: var(--redesign-button-positive-text);
+    background-color: var(--redesign-button-positive-background, var(--button-positive-background));
+    color: var(--white);
 
     &:hover {
-        background-color: var(--redesign-button-positive-pressed-background);
+        background-color: var(--redesign-button-positive-pressed-background, var(--button-positive-background-hover));
     }
 }
 
 .vc-btn-none {
     background-color: transparent;
     border-color: transparent;
-    color: var(--control-icon-icon-only-default);
+    color: var(--control-icon-only-icon-default, var(--control-icon-icon-only-default));
 
     &:hover {
-        background-color: var(--control-icon-only-background-hover);
-        border-color: var(--control-icon-only-border-hover);
-        color: var(--control-icon-only-icon-hover);
+        background-color: var(--control-icon-only-background-hover, var(--control-background-icon-only-hover));
+        border-color: var(--control-icon-only-border-hover, var(--control-border-icon-only-hover));
+        color: var(--control-icon-only-icon-hover, var(--control-icon-icon-only-hover));
     }
 }
 
@@ -178,7 +177,7 @@
 
     &:focus-visible {
         /* stylelint-disable-next-line custom-property-pattern */
-        box-shadow: 0 0 0 4px var(--__adaptive-focus-ring-color, var(--focus-primary, #00b0f4));
+        box-shadow: 0 0 0 4px var(--__adaptive-focus-ring-color, var(--border-focus, var(--focus-primary, #00b0f4)));
     }
 }
 
@@ -187,7 +186,7 @@
 }
 
 .vc-text-btn-secondary {
-    color: var(--text-strong);
+    color: var(--text-strong, var(--text-default));
 }
 
 .vc-text-btn-danger {
@@ -196,4 +195,4 @@
 
 .vc-text-btn-link {
     color: var(--text-link);
-}
+}
\ No newline at end of file
diff --git a/src/components/Card.css b/src/components/Card.css
index 7e131e4da..59ff8baa8 100644
--- a/src/components/Card.css
+++ b/src/components/Card.css
@@ -1,5 +1,5 @@
 .vc-card-base {
-    background: var(--background-surface-high);
+    background: var(--card-background-default, var(--card-primary-bg));
     border-radius: var(--radius-sm, 8px)
 }
 
@@ -8,11 +8,11 @@
 }
 
 .vc-card-warning {
-    border: 1px solid var(--text-status-idle);
+    border: 1px solid var(--icon-status-idle, var(--info-warning-foreground));
 }
 
 .vc-card-danger {
-    border: 1px solid var(--text-status-dnd);
+    border: 1px solid var(--icon-status-dnd, var(--info-danger-foreground));
 }
 
 .vc-card-defaultPadding {
diff --git a/src/components/Switch.css b/src/components/Switch.css
index 4b259bc22..186724f46 100644
--- a/src/components/Switch.css
+++ b/src/components/Switch.css
@@ -15,7 +15,7 @@
 
 .vc-switch-checked {
     background: var(--brand-500);
-    border-color: var(--control-primary-border-default);
+    border-color: var(--control-primary-border-default, var(--control-border-primary-default));
 }
 
 .vc-switch-disabled {
@@ -25,7 +25,7 @@
 
 .vc-switch-focusVisible {
     /* stylelint-disable-next-line custom-property-pattern */
-    box-shadow: 0 0 0 4px var(--__adaptive-focus-ring-color, var(--focus-primary, #00b0f4));
+    box-shadow: 0 0 0 4px var(--__adaptive-focus-ring-color, var(--border-focus, var(--focus-primary, #00b0f4)));
 }
 
 .vc-switch-slider {
diff --git a/src/components/ThemeSettings/themesStyles.css b/src/components/ThemeSettings/themesStyles.css
index 427d08222..5b3c148d0 100644
--- a/src/components/ThemeSettings/themesStyles.css
+++ b/src/components/ThemeSettings/themesStyles.css
@@ -4,37 +4,10 @@
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 }
 
-.vc-settings-theme-card {
+.vc-settings-csp-list {
     display: flex;
     flex-direction: column;
-    background-color: var(--background-base-lower-alt);
-    color: var(--interactive-icon-active);
-    border-radius: 8px;
-    padding: 1em;
-    width: 100%;
-    transition: 0.1s ease-out;
-    transition-property: box-shadow, transform, background, opacity;
-}
-
-.vc-settings-theme-card-text {
-    text-overflow: ellipsis;
-    height: 1.2em;
-    margin-bottom: 2px;
-    white-space: nowrap;
-    overflow: hidden;
-}
-
-.vc-settings-theme-author::before {
-    content: "by ";
-}
-
-.vc-settings-theme-link-input {
-    width: 100%;
-}
-
-.vc-settings-theme-add-card {
-    padding: 1em;
-    margin-bottom: 16px;
+    gap: 8px;
 }
 
 .vc-settings-usercss-ie-buttons > div {
diff --git a/src/components/settings/AddonCard.css b/src/components/settings/AddonCard.css
index ad9fa27f1..b45b93116 100644
--- a/src/components/settings/AddonCard.css
+++ b/src/components/settings/AddonCard.css
@@ -1,6 +1,6 @@
 .vc-addon-card {
-    background-color: var(--background-surface-high);
-    color: var(--interactive-icon-active);
+    background-color: var(--card-background-default, var(--card-primary-bg));
+    color: var(--interactive-icon-active, var(--interactive-active));
     border: 1px solid var(--border-subtle);
     border-radius: 8px;
     display: block;
diff --git a/src/components/settings/QuickAction.css b/src/components/settings/QuickAction.css
index 48be321c2..10364f72a 100644
--- a/src/components/settings/QuickAction.css
+++ b/src/components/settings/QuickAction.css
@@ -14,7 +14,7 @@
 
 .vc-settings-quickActions-pill {
     all: unset;
-    background: var(--redesign-button-secondary-background);
+    background: var(--redesign-button-secondary-background, var(--button-secondary-background));
     color: var(--text-default);
     display: flex;
     align-items: center;
@@ -26,13 +26,13 @@
 }
 
 .vc-settings-quickActions-pill:hover {
-    background: var(--redesign-button-secondary-pressed-background);
+    background: var(--redesign-button-secondary-pressed-background, var(--button-secondary-background-hover));
     transform: translateY(-1px);
     box-shadow: var(--elevation-high);
 }
 
 .vc-settings-quickActions-pill:focus-visible {
-    outline: 2px solid var(--focus-primary);
+    outline: 2px solid var(--border-focus, var(--focus-primary));
     outline-offset: 2px;
 }
 
diff --git a/src/components/settings/tabs/patchHelper/FullPatchInput.tsx b/src/components/settings/tabs/patchHelper/FullPatchInput.tsx
index 3943dac3a..a0b952833 100644
--- a/src/components/settings/tabs/patchHelper/FullPatchInput.tsx
+++ b/src/components/settings/tabs/patchHelper/FullPatchInput.tsx
@@ -74,7 +74,7 @@ export function FullPatchInput({ setFind, setParsedFind, setMatch, setReplacemen
                 onChange={setPatch}
                 onBlur={update}
             />
-            {error !== "" && <Paragraph style={{ color: "var(--text-feedback-critical)" }}>{error}</Paragraph>}
+            {error !== "" && <Paragraph style={{ color: "var(--text-feedback-critical, var(--text-danger))" }}>{error}</Paragraph>}
         </>
     );
 }
diff --git a/src/components/settings/tabs/patchHelper/PatchPreview.tsx b/src/components/settings/tabs/patchHelper/PatchPreview.tsx
index 00f7f0597..9d2bd6fe7 100644
--- a/src/components/settings/tabs/patchHelper/PatchPreview.tsx
+++ b/src/components/settings/tabs/patchHelper/PatchPreview.tsx
@@ -142,7 +142,7 @@ export function PatchPreview({ module, match, replacement, setReplacementError }
             )}
 
             {compileResult && (
-                <Paragraph style={{ color: compileResult[0] ? "var(--status-positive)" : "var(--text-feedback-critical)" }}>
+                <Paragraph style={{ color: compileResult[0] ? "var(--status-positive)" : "var(--text-feedback-critical, var(--text-danger))" }}>
                     {compileResult[1]}
                 </Paragraph>
             )}
diff --git a/src/components/settings/tabs/plugins/UIElements.css b/src/components/settings/tabs/plugins/UIElements.css
index 30db51dbd..c205abc29 100644
--- a/src/components/settings/tabs/plugins/UIElements.css
+++ b/src/components/settings/tabs/plugins/UIElements.css
@@ -1,13 +1,13 @@
 .vc-plugin-ui-elements-button {
     display: flex;
     align-items: center;
-    color: var(--interactive-icon-default);
+    color: var(--interactive-icon-default, var(--interactive-normal));
     margin-top: 0.5em;
     cursor: pointer;
 
     &:hover {
-        background-color: var(--background-mod-subtle);
-        color: var(--interactive-icon-hover);
+        background-color: var(--background-mod-subtle, var(--background-modifier-hover));
+        color: var(--interactive-icon-hover, var(--interactive-hover));
     }
 }
 
diff --git a/src/components/settings/tabs/plugins/components/styles.css b/src/components/settings/tabs/plugins/components/styles.css
index c1d55b0a8..f4cafd061 100644
--- a/src/components/settings/tabs/plugins/components/styles.css
+++ b/src/components/settings/tabs/plugins/components/styles.css
@@ -31,5 +31,5 @@
 }
 
 .vc-plugins-setting-error {
-    color: var(--text-feedback-critical);
+    color: var(--text-feedback-critical, var(--text-danger, #FF5C5C));
 }
\ No newline at end of file
diff --git a/src/components/settings/tabs/plugins/styles.css b/src/components/settings/tabs/plugins/styles.css
index 6ceaa5cbe..608592c59 100644
--- a/src/components/settings/tabs/plugins/styles.css
+++ b/src/components/settings/tabs/plugins/styles.css
@@ -29,16 +29,16 @@
     padding: 0;
     background: transparent;
     margin-right: 8px;
-    color: var(--icon-secondary);
+    color: var(--icon-muted, var(--icon-secondary));
     transition: background-color .2s ease;
 
     &:hover {
-        color: var(--interactive-icon-hover)
+        color: var(--interactive-icon-hover, var(--interactive-hover))
     }
 }
 
 .vc-plugins-settings-button:hover {
-    color: var(--interactive-icon-hover);
+    color: var(--interactive-icon-hover, var(--interactive-hover));
 }
 
 .vc-plugins-filter-controls {
@@ -78,8 +78,9 @@
 
 .vc-plugins-restart-card {
     padding: 1em;
-    background: var(--background-feedback-warning);
-    border: 1px solid var(--text-status-idle);
+    background: var(--icon-status-idle, var(--info-warning-foreground)) !important;
+    border: 1px solid var(--icon-status-idle, var(--info-warning-foreground)) !important;
+    ;
     color: var(--text-status-idle);
 }
 
diff --git a/src/components/settings/tabs/styles.css b/src/components/settings/tabs/styles.css
index cd3fb1c6f..d046318fa 100644
--- a/src/components/settings/tabs/styles.css
+++ b/src/components/settings/tabs/styles.css
@@ -49,7 +49,7 @@
     display: inline-block !important;
     color: var(--text-default) !important;
     padding: 0.5em 1em;
-    border: 1px solid var(--input-border);
+    border: 1px solid var(--input-border-default, var(--input-border));
     max-height: unset;
     background-color: transparent;
     box-sizing: border-box;
@@ -76,7 +76,7 @@
 
 .vc-cloud-erase-data-danger-btn {
     color: var(--white-500);
-    background-color: var(--redesign-button-danger-background);
+    background-color: var(--redesign-button-danger-background, var(--button-danger-background));
 }
 
 .vc-settings-modal {
diff --git a/src/equicordplugins/musicControls/spotify/spotifyStyles.css b/src/equicordplugins/musicControls/spotify/spotifyStyles.css
index d5baf58b3..e57ab59da 100644
--- a/src/equicordplugins/musicControls/spotify/spotifyStyles.css
+++ b/src/equicordplugins/musicControls/spotify/spotifyStyles.css
@@ -1,6 +1,6 @@
 #vc-spotify-player {
     padding: 12px;
-    background: var(--bg-overlay-floating, var(--background-base-low, var(--background-base-lower-alt)));
+    background: var(--background-base-low);
     margin: 0;
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
@@ -12,19 +12,11 @@
     --vc-spotify-green-80: color-mix(in hsl, var(--vc-spotify-green), transparent 80%);
 }
 
-.theme-light #vc-spotify-player {
-    background: var(--bg-overlay-3, var(--background-base-lower-alt));
-}
-
-.theme-dark #vc-spotify-player {
-    background: var(--bg-overlay-1, var(--background-base-lower-alt));
-}
-
 .vc-spotify-button {
     margin: 0 2px;
     border-radius: var(--radius-sm);
     background: none;
-    color: var(--interactive-icon-default);
+    color: var(--interactive-icon-default, var(--interactive-normal));
     padding: 0;
     width: 32px;
     height: 32px;
@@ -34,8 +26,8 @@
 }
 
 .vc-spotify-button:hover {
-    color: var(--interactive-icon-hover);
-    background-color: var(--background-mod-strong);
+    color: var(--interactive-icon-hover, var(--interactive-hover));
+    background-color: var(--background-mod-strong, var(--background-modifier-selected));
 }
 
 .vc-spotify-button-icon {
@@ -179,7 +171,7 @@
 }
 
 #vc-spotify-progress-bar > [class^="slider"] [class^="barFill"] {
-    background-color: var(--interactive-icon-active);
+    background-color: var(--interactive-icon-active, var(--interactive-active));
 }
 
 #vc-spotify-progress-bar > [class^="slider"]:hover [class^="barFill"] {
@@ -192,9 +184,9 @@
     width: 16px !important;
     margin-top: calc(17px/-2 + var(--bar-offset)/2);
     margin-left: -0.5px;
-    background-color: var(--interactive-icon-active);
-    border-color: var(--interactive-icon-default);
-    color: var(--interactive-icon-default);
+    background-color: var(--interactive-icon-active, var(--interactive-active));
+    border-color: var(--interactive-icon-default, var(--interactive-normal));
+    color: var(--interactive-icon-default, var(--interactive-normal));
     opacity: 0;
     transition: opacity 0.1s;
 }
diff --git a/src/plugins/_core/settings.tsx b/src/plugins/_core/settings.tsx
index e500b18d1..d78177ed1 100644
--- a/src/plugins/_core/settings.tsx
+++ b/src/plugins/_core/settings.tsx
@@ -52,11 +52,13 @@ interface SettingsLayoutNode {
     type: number;
     key?: string;
     legacySearchKey?: string;
+    getLegacySearchKey?(): string;
     useLabel?(): string;
     useTitle?(): string;
     buildLayout?(): SettingsLayoutNode[];
     icon?(): ReactNode;
     render?(): ReactNode;
+    StronglyDiscouragedCustomComponent?(): ReactNode;
 }
 
 interface EntryOptions {
@@ -175,7 +177,9 @@ export default definePlugin({
         return ({
             key,
             type: LayoutTypes.SIDEBAR_ITEM,
+            // FIXME
             legacySearchKey: title.toUpperCase(),
+            getLegacySearchKey: () => title.toUpperCase(),
             useTitle: () => title,
             icon: () => <Icon width={20} height={20} />,
             buildLayout: () => [
@@ -188,6 +192,8 @@ export default definePlugin({
                             key: key + "_pane",
                             type: LayoutTypes.PANE,
                             buildLayout: () => [],
+                            // FIXME
+                            StronglyDiscouragedCustomComponent: () => <Component />,
                             render: () => <Component />,
                             useTitle: () => panelTitle
                         }
diff --git a/src/plugins/betterSessions/index.tsx b/src/plugins/betterSessions/index.tsx
index 496db8842..f83925a3e 100644
--- a/src/plugins/betterSessions/index.tsx
+++ b/src/plugins/betterSessions/index.tsx
@@ -140,7 +140,7 @@ export default definePlugin({
                             overflow: "hidden",
 
                             borderRadius: "50%",
-                            backgroundColor: "var(--interactive-icon-default)",
+                            backgroundColor: "var(--interactive-icon-default, var(--interactive-normal))",
                             color: "var(--background-base-lower)",
                         }}
                     >
diff --git a/src/plugins/clientTheme/clientTheme.css b/src/plugins/clientTheme/clientTheme.css
index 828703e58..a0607efb0 100644
--- a/src/plugins/clientTheme/clientTheme.css
+++ b/src/plugins/clientTheme/clientTheme.css
@@ -16,11 +16,11 @@
 }
 
 .vc-clientTheme-container [class^="swatch"] {
-    border: thin solid var(--input-border) !important;
+    border: thin solid var(--input-border-default, var(--input-border)) !important;
 }
 
 .vc-clientTheme-buttons-container {
     margin-top: 16px;
     display: flex;
     gap: 4px;
-}
+}
\ No newline at end of file
diff --git a/src/plugins/copyFileContents/style.css b/src/plugins/copyFileContents/style.css
index 818652539..4ad026754 100644
--- a/src/plugins/copyFileContents/style.css
+++ b/src/plugins/copyFileContents/style.css
@@ -1,9 +1,9 @@
 .vc-cfc-button {
-    color: var(--interactive-icon-default);
+    color: var(--interactive-icon-default, var(--interactive-normal));
     cursor: pointer;
     padding-left: 4px;
 }
 
 .vc-cfc-button:hover {
-    color: var(--interactive-icon-hover);
+    color: var(--interactive-icon-hover, var(--interactive-hover));
 }
\ No newline at end of file
diff --git a/src/plugins/customRPC/index.tsx b/src/plugins/customRPC/index.tsx
index 4e6219151..f3dbbffc3 100644
--- a/src/plugins/customRPC/index.tsx
+++ b/src/plugins/customRPC/index.tsx
@@ -278,7 +278,7 @@ export default definePlugin({
 
                 <Divider className={Margins.top8} />
 
-                <div style={{ width: "284px", ...profileThemeStyle, marginTop: 8, borderRadius: 8, background: "var(--background-mod-faint)" }}>
+                <div style={{ width: "284px", ...profileThemeStyle, marginTop: 8, borderRadius: 8, background: "var(--background-mod-muted, var(--background-mod-faint))" }}>
                     {activity && <ActivityView
                         activity={activity}
                         user={UserStore.getCurrentUser()}
diff --git a/src/plugins/customRPC/settings.css b/src/plugins/customRPC/settings.css
index 0fe9ae66f..f26091fa2 100644
--- a/src/plugins/customRPC/settings.css
+++ b/src/plugins/customRPC/settings.css
@@ -27,5 +27,5 @@
 }
 
 .vc-customRPC-settings-error {
-    color: var(--text-feedback-critical);
+    color: var(--text-feedback-critical, var(--text-danger));
 }
\ No newline at end of file
diff --git a/src/plugins/decor/ui/styles.css b/src/plugins/decor/ui/styles.css
index ba95e483d..152642c77 100644
--- a/src/plugins/decor/ui/styles.css
+++ b/src/plugins/decor/ui/styles.css
@@ -1,6 +1,6 @@
 .vc-decor-danger-btn {
     color: var(--white-500);
-    background-color: var(--redesign-button-danger-background);
+    background-color: var(--redesign-button-danger-background, var(--button-danger-background));
 }
 
 .vc-decor-change-decoration-modal-content {
diff --git a/src/plugins/friendsSince/index.tsx b/src/plugins/friendsSince/index.tsx
index 3108ee142..97ebee54b 100644
--- a/src/plugins/friendsSince/index.tsx
+++ b/src/plugins/friendsSince/index.tsx
@@ -71,7 +71,7 @@ export default definePlugin({
                                         width="16"
                                         height="16"
                                         viewBox="0 0 24 24"
-                                        fill="var(--interactive-icon-default)"
+                                        fill="var(--interactive-icon-default, var(--interactive-normal))"
                                     >
                                         <path d="M13 10a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" />
                                         <path d="M3 5v-.75C3 3.56 3.56 3 4.25 3s1.24.56 1.33 1.25C6.12 8.65 9.46 12 13 12h1a8 8 0 0 1 8 8 2 2 0 0 1-2 2 .21.21 0 0 1-.2-.15 7.65 7.65 0 0 0-1.32-2.3c-.15-.2-.42-.06-.39.17l.25 2c.02.15-.1.28-.25.28H9a2 2 0 0 1-2-2v-2.22c0-1.57-.67-3.05-1.53-4.37A15.85 15.85 0 0 1 3 5Z" />
diff --git a/src/plugins/ignoreActivities/index.tsx b/src/plugins/ignoreActivities/index.tsx
index d0d776f9c..33f23dc79 100644
--- a/src/plugins/ignoreActivities/index.tsx
+++ b/src/plugins/ignoreActivities/index.tsx
@@ -66,7 +66,7 @@ function ToggleActivityComponent(activity: IgnoredActivity, isPlaying = false) {
     const { ignoredActivities } = s;
 
     if (ignoredActivities.some(act => act.id === activity.id)) return ToggleIconOff(activity, "var(--status-danger)");
-    return ToggleIconOn(activity, isPlaying ? "var(--green-300)" : "var(--interactive-icon-default)");
+    return ToggleIconOn(activity, isPlaying ? "var(--green-300)" : "var(--interactive-icon-default, var(--interactive-normal))");
 }
 
 function handleActivityToggle(e: React.MouseEvent<HTMLButtonElement, MouseEvent>, activity: IgnoredActivity) {
diff --git a/src/plugins/memberCount/style.css b/src/plugins/memberCount/style.css
index 009e7d10c..fcb4cf0c8 100644
--- a/src/plugins/memberCount/style.css
+++ b/src/plugins/memberCount/style.css
@@ -47,7 +47,7 @@
 
 .vc-membercount-total-count {
     fill: none;
-    stroke: var(--status-offline);
+    stroke: var(--icon-status-offline, var(--status-offline));
     stroke-width: 4px;
     width: 15px;
     height: 15px;
diff --git a/src/plugins/messageLogger/deleteStyleText.css b/src/plugins/messageLogger/deleteStyleText.css
index 8d9c1d49f..9d798d1d7 100644
--- a/src/plugins/messageLogger/deleteStyleText.css
+++ b/src/plugins/messageLogger/deleteStyleText.css
@@ -1,6 +1,6 @@
 .messagelogger-deleted {
     --text-default: var(--status-danger, #f04747);
-    --interactive-icon-default: var(--status-danger, #f04747);
+    --interactive-icon-default: var(--interactive-normal, var(--status-danger, #f04747));
     --text-muted: var(--status-danger, #f04747);
     --embed-title: var(--red-460, #be3535);
     --text-link: var(--red-460, #be3535);
diff --git a/src/plugins/permissionsViewer/styles.css b/src/plugins/permissionsViewer/styles.css
index c8611371d..fff85b739 100644
--- a/src/plugins/permissionsViewer/styles.css
+++ b/src/plugins/permissionsViewer/styles.css
@@ -66,11 +66,11 @@
 }
 
 .vc-permviewer-modal-list-item:hover {
-    background-color: var(--background-mod-subtle);
+    background-color: var(--background-mod-subtle, var(--background-modifier-hover));
 }
 
 .vc-permviewer-modal-list-item-active {
-    background-color: var(--background-mod-strong);
+    background-color: var(--background-mod-strong, var(--background-modifier-selected));
 }
 
 .vc-permviewer-modal-list-item-text {
@@ -100,7 +100,7 @@
 
 .vc-permviewer-modal-divider {
     width: 2px;
-    background-color: var(--border-subtle);
+    background-color: var(--background-mod-normal, var(--background-modifier-active));
 }
 
 .vc-permviewer-modal-perms {
@@ -114,7 +114,7 @@
     align-items: center;
     gap: 5px;
     padding: 10px 2px 10px 10px;
-    border-bottom: 2px solid var(--border-subtle);
+    border-bottom: 2px solid var(--background-mod-normal, var(--background-modifier-active));
 }
 
 .vc-permviewer-modal-perms-item:last-child {
@@ -122,7 +122,7 @@
 }
 
 .vc-permviewer-modal-perms-item-icon {
-    border: 1px solid var(--background-mod-strong);
+    border: 1px solid var(--background-mod-strong, var(--background-modifier-selected));
     width: 24px;
     height: 24px;
 }
@@ -135,13 +135,13 @@
 }
 
 .vc-permviewer-modal-perms-item .vc-info-icon:hover {
-    color: var(--interactive-icon-active);
+    color: var(--interactive-icon-active, var(--interactive-active));
 }
 
 /* copy pasted from discord cause impossible to webpack find */
 .vc-permviewer-role-button {
     border-radius: var(--radius-sm);
-    color: var(--interactive-icon-default);
+    color: var(--interactive-icon-default, var(--interactive-normal));
     border: 1px solid var(--user-profile-border);
     /* stylelint-disable-next-line value-no-vendor-prefix */
     width: -moz-fit-content;
diff --git a/src/plugins/pictureInPicture/styles.css b/src/plugins/pictureInPicture/styles.css
index ec008e1f4..f88f26754 100644
--- a/src/plugins/pictureInPicture/styles.css
+++ b/src/plugins/pictureInPicture/styles.css
@@ -1,8 +1,8 @@
 .vc-pip-button {
-    color: var(--interactive-icon-default);
+    color: var(--interactive-icon-default, var(--interactive-normal));
 }
 
 .vc-pip-button:hover {
-    background-color: var(--background-mod-subtle);
-    color: var(--interactive-icon-hover);
-}
\ No newline at end of file
+    background-color: var(--background-mod-subtle, var(--background-modifier-hover));
+    color: var(--interactive-icon-hover, var(--interactive-hover));
+}
diff --git a/src/plugins/pinDms/styles.css b/src/plugins/pinDms/styles.css
index 1458743bf..faea19a3f 100644
--- a/src/plugins/pinDms/styles.css
+++ b/src/plugins/pinDms/styles.css
@@ -28,10 +28,10 @@
 .vc-pindms-collapse-icon {
     width: 16px;
     height: 16px;
-    color: var(--interactive-icon-default);
+    color: var(--interactive-icon-default, var(--interactive-normal));
     transform: rotate(90deg)
 }
 
 .vc-pindms-collapsed .vc-pindms-collapse-icon {
     transform: rotate(0deg);
-}
\ No newline at end of file
+}
diff --git a/src/plugins/plainFolderIcon/style.css b/src/plugins/plainFolderIcon/style.css
index 3e2992fca..d8c7f6dc5 100644
--- a/src/plugins/plainFolderIcon/style.css
+++ b/src/plugins/plainFolderIcon/style.css
@@ -6,5 +6,5 @@
     transform: translateZ(0);
 
     /* The new icons are fully transparent. Add a sane default to match the old behavior */
-    background-color: color-mix(in oklab, var(--custom-folder-color, var(--bg-brand)) 40%, transparent);
-}
+    background-color: color-mix(in oklab, var(--custom-folder-color, var(--badge-background-default, var(--bg-brand))) 40%, transparent);
+}
\ No newline at end of file
diff --git a/src/plugins/readAllNotificationsButton/style.css b/src/plugins/readAllNotificationsButton/style.css
index 1d1fe185a..213b57189 100644
--- a/src/plugins/readAllNotificationsButton/style.css
+++ b/src/plugins/readAllNotificationsButton/style.css
@@ -1,5 +1,5 @@
 .vc-ranb-button {
-    color: var(--interactive-icon-default);
+    color: var(--interactive-icon-default, var(--interactive-normal));
     padding: 0 0.5em;
     width: 100%;
     font-size: 14px;
@@ -8,5 +8,5 @@
 }
 
 .vc-ranb-button:hover {
-    color: var(--interactive-icon-active);
-}
\ No newline at end of file
+    color: var(--interactive-icon-active, var(--interactive-active));
+}
diff --git a/src/plugins/reviewDB/style.css b/src/plugins/reviewDB/style.css
index 0622a0167..0d8711a0b 100644
--- a/src/plugins/reviewDB/style.css
+++ b/src/plugins/reviewDB/style.css
@@ -9,13 +9,14 @@
 }
 
 .vc-rdb-input {
-    padding-left: 12px;
+    padding-inline: 12px;
     margin-top: 6px;
     margin-bottom: 12px;
     resize: none;
     overflow: hidden;
     background: transparent;
-    border: 1px solid var(--profile-message-input-border-color);
+    border: 1px solid var(--input-border-default, var(--border-muted));
+    box-sizing: border-box;
 }
 
 .vc-rdb-modal-footer-wrapper {
@@ -40,7 +41,7 @@
 
 .vc-rdb-modal-footer .vc-rdb-input {
     margin-bottom: 0;
-    background: var(--input-background);
+    background: var(--input-background-default, var(--input-background));
 }
 
 .vc-rdb-modal-footer [class|="pageControlContainer"] {
@@ -61,8 +62,8 @@
     padding-right: 32px !important;
 }
 
-.vc-rdb-review-container:hover {
-    background: var(--background-message-hover) !important;
+.vc-rdb-review:hover {
+    background: var(--message-background-hover, var(--background-message-hover)) !important;
     border-radius: 8px;
 }
 
diff --git a/src/plugins/sendTimestamps/styles.css b/src/plugins/sendTimestamps/styles.css
index 9cb41efef..08d119b81 100644
--- a/src/plugins/sendTimestamps/styles.css
+++ b/src/plugins/sendTimestamps/styles.css
@@ -1,11 +1,11 @@
 .vc-st-date-picker {
-    background-color: var(--input-background);
+    background-color: var(--input-background-default, var(--input-background));
     color: var(--text-default);
     width: 95%;
     padding: 8px 8px 8px 12px;
     margin: 1em 0;
     outline: none;
-    border: 1px solid var(--input-background);
+    border: 1px solid var(--input-background-default, var(--input-background));
     border-radius: 4px;
     font-weight: 500;
     font-style: inherit;
diff --git a/src/plugins/serverInfo/styles.css b/src/plugins/serverInfo/styles.css
index 98b16e7f8..63193bdec 100644
--- a/src/plugins/serverInfo/styles.css
+++ b/src/plugins/serverInfo/styles.css
@@ -48,7 +48,7 @@
 
 .vc-gp-tab {
     border-bottom: 2px solid transparent;
-    color: var(--interactive-icon-default);
+    color: var(--interactive-icon-default, var(--interactive-normal));
     cursor: pointer;
     line-height: 14px;
 }
@@ -58,7 +58,7 @@
 }
 
 .vc-gp-tab:where(.vc-gp-selected, :hover, :focus) {
-    border-bottom-color: var(--interactive-icon-active);
+    border-bottom-color: var(--interactive-icon-active, var(--interactive-active));
 }
 
 .vc-gp-info {
@@ -165,5 +165,5 @@
 }
 
 .vc-gp-scroller [class^="listRow"]:hover {
-    background-color: var(--background-mod-subtle);
-}
\ No newline at end of file
+    background-color: var(--background-mod-subtle, var(--background-modifier-hover));
+}
diff --git a/src/plugins/showConnections/VerifiedIcon.tsx b/src/plugins/showConnections/VerifiedIcon.tsx
index 0e64527e5..07c6ff065 100644
--- a/src/plugins/showConnections/VerifiedIcon.tsx
+++ b/src/plugins/showConnections/VerifiedIcon.tsx
@@ -25,7 +25,7 @@ const VerifiedIconComponent = findComponentByCodeLazy("#{intl::CONNECTIONS_ROLE_
 
 export function VerifiedIcon() {
     const color = useToken(ColorMap.colors.INTERACTIVE_MUTED).hex();
-    const forcedIconColor = useToken(ColorMap.colors.INTERACTIVE_ACTIVE).hex();
+    const forcedIconColor = useToken(ColorMap.colors.INTERACTIVE_ICON_ACTIVE ?? ColorMap.colors.INTERACTIVE_ACTIVE).hex();
 
     return (
         <VerifiedIconComponent
diff --git a/src/plugins/showHiddenChannels/style.css b/src/plugins/showHiddenChannels/style.css
index 1e79b2cbf..d2dd38d92 100644
--- a/src/plugins/showHiddenChannels/style.css
+++ b/src/plugins/showHiddenChannels/style.css
@@ -27,7 +27,7 @@
 
 .vc-shc-topic-container {
     color: var(--text-default);
-    background: var(--bg-overlay-5, var(--background-base-lower));
+    background: var(--background-base-lower);
     border-radius: 5px;
     padding: 10px;
     max-width: 70vw;
@@ -37,7 +37,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    background: var(--bg-overlay-5, var(--background-base-lower));
+    background: var(--background-base-lower);
     border-radius: 8px;
     padding: 0.75em;
     margin-left: 0.75em;
@@ -46,7 +46,7 @@
 .vc-shc-tags-container {
     display: flex;
     flex-direction: column;
-    background: var(--bg-overlay-5, var(--background-base-lower));
+    background: var(--background-base-lower);
     border-radius: 5px;
     padding: 0.75em;
     gap: 0.75em;
@@ -65,7 +65,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    background: var(--bg-overlay-5, var(--background-base-lower));
+    background: var(--background-base-lower);
     border-radius: 5px;
     padding: 0.75em;
     max-width: 70vw;
@@ -104,4 +104,4 @@
     cursor: not-allowed;
     margin-left: 6px;
     z-index: 0;
-}
+}
\ No newline at end of file
diff --git a/src/plugins/textReplace/index.tsx b/src/plugins/textReplace/index.tsx
index e22bcf1c8..acb74ab7c 100644
--- a/src/plugins/textReplace/index.tsx
+++ b/src/plugins/textReplace/index.tsx
@@ -95,7 +95,7 @@ function renderFindError(find: string) {
         return null;
     } catch (e) {
         return (
-            <span style={{ color: "var(--text-feedback-critical)" }}>
+            <span style={{ color: "var(--text-feedback-critical, var(--text-danger))" }}>
                 {String(e)}
             </span>
         );
diff --git a/src/plugins/userVoiceShow/style.css b/src/plugins/userVoiceShow/style.css
index 6ee5fd7a0..0546bd522 100644
--- a/src/plugins/userVoiceShow/style.css
+++ b/src/plugins/userVoiceShow/style.css
@@ -1,5 +1,5 @@
 .vc-uvs-speaker {
-    color: var(--interactive-icon-default);
+    color: var(--interactive-icon-default, var(--interactive-normal));
     display: flex;
     align-items: center;
     justify-content: center;
@@ -10,7 +10,7 @@
 }
 
 .vc-uvs-clickable:hover {
-    color: var(--interactive-icon-hover);
+    color: var(--interactive-icon-hover, var(--interactive-hover));
 }
 
 .vc-uvs-profile-speaker {
@@ -42,4 +42,4 @@
 .vc-uvs-vc-members {
     display: flex;
     gap: 6px;
-}
\ No newline at end of file
+}
diff --git a/src/plugins/voiceDownload/style.css b/src/plugins/voiceDownload/style.css
index 4e1379e21..1c4a82027 100644
--- a/src/plugins/voiceDownload/style.css
+++ b/src/plugins/voiceDownload/style.css
@@ -1,12 +1,12 @@
 .vc-voice-download {
     width: 24px;
     height: 24px;
-    color: var(--interactive-icon-default);
+    color: var(--interactive-icon-default, var(--interactive-normal));
     margin-left: 12px;
     cursor: pointer;
     position: relative;
 }
 
 .vc-voice-download:hover {
-    color: var(--interactive-icon-active);
-}
\ No newline at end of file
+    color: var(--interactive-icon-active, var(--interactive-active));
+}
diff --git a/src/plugins/voiceMessages/styles.css b/src/plugins/voiceMessages/styles.css
index d6203c34a..cb3933ce3 100644
--- a/src/plugins/voiceMessages/styles.css
+++ b/src/plugins/voiceMessages/styles.css
@@ -21,7 +21,7 @@
 }
 
 .vc-vmsg-preview-indicator {
-    background: var(--redesign-button-secondary-background);
+    background: var(--redesign-button-secondary-background, var(--button-secondary-background));
     width: 16px;
     height: 16px;
     border-radius: 50%;
@@ -50,5 +50,5 @@
 }
 
 .vc-vmsg-error {
-    color: var(--text-feedback-critical);
-}
\ No newline at end of file
+    color: var(--text-feedback-critical, var(--text-danger, #FF5C5C));
+}