4 files changed, 17 insertions, 15 deletions
diff --git a/src/plugins/messageLogger/deleteStyleOverlay.css b/src/plugins/messageLogger/deleteStyleOverlay.css
new file mode 100644
index 0000000..a05ed4d
--- /dev/null
+++ b/src/plugins/messageLogger/deleteStyleOverlay.css
@@ -0,0 +1,3 @@
+.messagelogger-deleted {
+    background-color: rgba(240 71 71 / 15%);
+}
diff --git a/src/plugins/messageLogger/deleteStyleText.css b/src/plugins/messageLogger/deleteStyleText.css
new file mode 100644
index 0000000..9f2d731
--- /dev/null
+++ b/src/plugins/messageLogger/deleteStyleText.css
@@ -0,0 +1,3 @@
+.messagelogger-deleted div {
+    color: #f04747;
+}
diff --git a/src/plugins/messageLogger/index.tsx b/src/plugins/messageLogger/index.tsx
index 8c897b6..ff4c328 100644
--- a/src/plugins/messageLogger/index.tsx
+++ b/src/plugins/messageLogger/index.tsx
@@ -19,19 +19,23 @@
 import "./messageLogger.css";
 
 import { Settings } from "@api/settings";
+import { disableStyle, enableStyle } from "@api/Styles";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
 import Logger from "@utils/Logger";
 import definePlugin, { OptionType } from "@utils/types";
 import { moment, Parser, Timestamp, UserStore } from "@webpack/common";
 
-function addDeleteStyleClass() {
+import overlayStyle from "./deleteStyleOverlay.css?managed";
+import textStyle from "./deleteStyleText.css?managed";
+
+function addDeleteStyle() {
     if (Settings.plugins.MessageLogger.deleteStyle === "text") {
-        document.body.classList.remove("messagelogger-red-overlay");
-        document.body.classList.add("messagelogger-red-text");
+        enableStyle(textStyle);
+        disableStyle(overlayStyle);
     } else {
-        document.body.classList.remove("messagelogger-red-text");
-        document.body.classList.add("messagelogger-red-overlay");
+        disableStyle(textStyle);
+        enableStyle(overlayStyle);
     }
 }
 
@@ -41,7 +45,7 @@ export default definePlugin({
     authors: [Devs.rushii, Devs.Ven],
 
     start() {
-        addDeleteStyleClass();
+        addDeleteStyle();
     },
 
     stop() {
@@ -84,7 +88,7 @@ export default definePlugin({
                 { label: "Red text", value: "text", default: true },
                 { label: "Red overlay", value: "overlay" }
             ],
-            onChange: () => addDeleteStyleClass()
+            onChange: () => addDeleteStyle()
         },
         ignoreBots: {
             type: OptionType.BOOLEAN,
diff --git a/src/plugins/messageLogger/messageLogger.css b/src/plugins/messageLogger/messageLogger.css
index 925a09c..f93f330 100644
--- a/src/plugins/messageLogger/messageLogger.css
+++ b/src/plugins/messageLogger/messageLogger.css
@@ -1,11 +1,3 @@
-.messagelogger-red-overlay .messagelogger-deleted {
-    background-color: rgba(240 71 71 / 15%);
-}
-
-.messagelogger-red-text .messagelogger-deleted div {
-    color: #f04747;
-}
-
 .messagelogger-deleted [class^="buttons"] {
     display: none;
 }