adding dynamic styling

index.ts

@@ -1,34 +1,22 @@
 /*
- * Vencord, a modification for Discord's desktop app
- * Copyright (c) 2022 Vendicated and contributors
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
-*/
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
 
 import { definePluginSettings } from "@api/Settings";
-import { disableStyle, enableStyle } from "@api/Styles";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
 
-import styles from "./style.css?managed";
+import { getStyle } from "./style";
+
+let [styles, Classes]: [string, object] = ["", {}];
 
 const settings = definePluginSettings({
     hoverToView: {
         type: OptionType.BOOLEAN,
         description: "When hovering over a message, show the contents.",
         default: false,
-        restartNeeded: false,
         onChange: () => {
             console.log(settings.store.hoverToView);
             updateClassList("hover-to-view", settings.store.hoverToView);
@@ -44,30 +32,42 @@ const settings = definePluginSettings({
         type: OptionType.BOOLEAN,
         description: "Blur all messages in streamer mode.",
         default: false,
-        restartNeeded: false,
         onChange: () => {
             console.log(settings.store.enableForStream);
-            updateClassList("hide-in-streamer-mode", settings.store.enableForStream);
+            updateClassList(
+                "hide-in-streamer-mode",
+                settings.store.enableForStream
+            );
         },
     },
 });
 
 export default definePlugin({
     name: "Do Not Leak!",
-    description: "Hide all message contents and attachments when you're streaming or sharing your screen.",
+    description:
+        "Hide all message contents and attachments when you're streaming or sharing your screen.",
     authors: [Devs.Perny],
     settings,
     start() {
+        [styles, Classes] = getStyle();
+
+        const style = document.createElement("style");
+        style.setAttribute("id", "vc-dont-leak-style");
+        style.innerHTML = styles;
+        document.head.appendChild(style);
+
         document.addEventListener("keyup", keyUpHandler);
         document.addEventListener("keydown", keyDownHandler);
         updateClassList("hover-to-view", settings.store.hoverToView);
-        updateClassList("hide-in-streamer-mode", settings.store.enableForStream);
-        enableStyle(styles);
+        updateClassList(
+            "hide-in-streamer-mode",
+            settings.store.enableForStream
+        );
     },
     stop() {
         document.removeEventListener("keyup", keyUpHandler);
         document.removeEventListener("keydown", keyDownHandler);
-        disableStyle(styles);
+        document.getElementById("vc-dont-leak-style")?.remove();
     },
 });
 

style.ts

@@ -0,0 +1,116 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { findByProps } from "@webpack";
+
+const CssFormatCode: string = `body:has(
+    div.{sidebar}
+        > section
+        div.{wrapper}
+        div.{actionButtons}
+        > button:nth-child(2).{buttonActive}
+)
+.{messageContent} {
+filter: blur(12px);
+}
+
+body:has(
+    div.{sidebar}
+        > section
+        div.{wrapper}
+        div.{actionButtons}
+        > button:nth-child(2).{buttonActive}
+)
+.{visualMediaItemContainer} {
+filter: blur(50px) brightness(0.1);
+}
+
+body:has(
+    div.{sidebar}
+        > section
+        div.{wrapper}
+        div.{actionButtons}
+        > button:nth-child(2).{buttonActive}
+)
+.{embedWrapper} {
+filter: blur(50px);
+}
+
+body.vc-dnl-hide-in-streamer-mode:has(.{notice}.{colorStreamerMode})
+.{visualMediaItemContainer} {
+filter: blur(50px) brightness(0.1);
+}
+
+body.vc-dnl-hide-in-streamer-mode:has(.{notice}.{colorStreamerMode})
+.{messageContent} {
+filter: blur(12px);
+}
+
+body.vc-dnl-hide-in-streamer-mode:has(.{notice}.{colorStreamerMode})
+.{embedWrapper} {
+filter: blur(50px);
+}
+
+body.vc-dnl-show-messages .{visualMediaItemContainer} {
+filter: blur(0px) brightness(1) !important;
+}
+
+body.vc-dnl-show-messages .{messageContent} {
+filter: blur(0px) !important;
+}
+
+body.vc-dnl-show-messages .{embedWrapper} {
+filter: blur(0px) !important;
+}
+
+body.vc-dnl-hover-to-view .{messageContent}:hover {
+filter: blur(0px) brightness(1) !important;
+}
+
+body.vc-dnl-hover-to-view .{embedWrapper}:hover {
+filter: blur(0px) brightness(1) !important;
+}
+
+body.vc-dnl-hover-to-view .{visualMediaItemContainer}:hover {
+filter: blur(0px) brightness(1) !important;
+}`;
+
+/*
+[
+    "sidebar",
+    "wrapper",
+    "actionButtons",
+    "buttonActive",
+    "messageContent",
+    "visualMediaItemContainer",
+    "embedWrapper",
+    "notice",
+    "colorStreamerMode",
+]
+*/
+
+export function getStyle(): [string, object] {
+  const messageContent = findByProps("messageEditorCompact"); // ["messageContent","wrapper"]
+  const embedWrapper = findByProps("embedWrapper");
+  const mediaContainer = findByProps("visualMediaItemContainer");
+  const notice = findByProps("colorStreamerMode", "notice");
+  const actionBar = findByProps("actionButtons", "buttonActive", "wrapper");
+  const sidebar = findByProps("sidebar", "panels");
+  const Classes = Object.assign(
+    {},
+    actionBar,
+    notice,
+    mediaContainer,
+    embedWrapper,
+    messageContent,
+    sidebar
+  );
+  let CssCode = CssFormatCode;
+  for (const className in Classes) {
+    CssCode = CssCode.replaceAll(`{${className}}`, Classes[className]);
+  }
+  return [CssCode, Classes];
+}