diff --git a/src/plugins/clientTheme/index.tsx b/src/plugins/clientTheme/index.tsx
index e2887a5c9..b84789138 100644
--- a/src/plugins/clientTheme/index.tsx
+++ b/src/plugins/clientTheme/index.tsx
@@ -224,7 +224,7 @@ function updateColorVars(color: string) {
     }`;
 }
 
-function createStyle(id: string) {
+export function createStyle(id: string) {
     const style = document.createElement("style");
     style.id = id;
     if (document.documentElement) document.documentElement.append(style);
diff --git a/src/plugins/fixHardcodedColors/index.ts b/src/plugins/fixHardcodedColors/index.ts
index 4d6fa4d59..faf02ed58 100644
--- a/src/plugins/fixHardcodedColors/index.ts
+++ b/src/plugins/fixHardcodedColors/index.ts
@@ -4,22 +4,35 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+import { Styles } from "@api/index";
 import { Devs } from "@utils/constants";
 import definePlugin, { StartAt } from "@utils/types";
-import { createStyleSheet, getStyles, newStyleListener } from "plugins/clientTheme/cssUtil";
+import { createStyle } from "plugins/clientTheme";
 
 export default definePlugin({
     name: "Fix hardcoded colors",
     description: "replace hardcoded colors with color variables",
     authors: [Devs.F53],
-    startAt: StartAt.DOMContentLoaded,
+    startAt: StartAt.Init,
+    dependencies: ["StyleListenerAPI"],
 
     async start() {
-        const styles = await getStyles();
-        const colorVariables = getColorVariables(styles);
+        let colorVariables: ColorVariable[];
+        const stylesToParse: string[] = [];
+        const fixes = createStyle("hardcodedColorFixes");
+        Styles.styleListeners.add((styles, initial) => {
+            // we can't generate fixes before getting colorVariables from the initial stylesheet
+            if (colorVariables) // gen fixes if we already have colorVariables
+                return fixes.innerText += generateFixes(colorVariables, styles);
+            else // queue fix generation if we don't have colorVariables
+                stylesToParse.push(styles);
 
-        const fixSheet = createStyleSheet("hardcodedColorFixes", generateFixes(colorVariables, styles));
-        newStyleListener(styles => fixSheet.innerText += generateFixes(colorVariables, styles));
+            if (!initial) return;
+
+            colorVariables = getColorVariables(styles);
+            while (stylesToParse.length > 0) // gen fixes for queue now that we have them (and remove them from memory)
+                fixes.innerText += generateFixes(colorVariables, stylesToParse.shift()!);
+        });
     },
     stop() {
         document.getElementById("hardcodedColorFixes")?.remove();