ThemeAttributes: Add classes to html for hard to detect state (streamer mode)

src/plugins/themeAttributes/README.md

@@ -27,3 +27,9 @@ This allows themes to more easily theme those elements or even do things that ot
 `--avatar-url-<resolution>` contains a URL for the users avatar with the size attribute adjusted for the resolutions `128, 256, 512, 1024, 2048, 4096`.
 
 ![image](https://github.com/Vendicated/Vencord/assets/26598490/192ddac0-c827-472f-9933-fa99ff36f723)
+
+## CSS Classes
+
+Discord sets some classes on the `html` element to indicate app state. ThemeAttributes adds a few more classes to this list for certain features that cannot be reliably detected using other selectors
+
+- `streamer-mode` is added when Streamer Mode is enabled, as the Notice bar for this can be dismissed

src/plugins/themeAttributes/index.ts

@@ -6,9 +6,11 @@
 
 import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
-import { UserStore } from "@webpack/common";
+import { findStoreLazy } from "@webpack";
+import { UserStore, useStateFromStores } from "@webpack/common";
 import { Message } from "discord-types/general";
 
+const StreamerModeStore = findStoreLazy("StreamerModeStore");
 
 export default definePlugin({
     name: "ThemeAttributes",
@@ -51,6 +53,13 @@ export default definePlugin({
                 match: /src:(\i),"aria-hidden":!0/,
                 replace: "$&,style:$self.getAvatarStyles($1)"
             }
+        },
+        {
+            find: '"; --devtools-sidebar-width: "',
+            replacement: {
+                match: /overlay:__OVERLAY__/,
+                replace: "$&,...$self.rootClassNames()"
+            }
         }
     ],
 
@@ -71,5 +80,9 @@ export default definePlugin({
             "data-author-username": author?.username,
             "data-is-self": authorId && authorId === UserStore.getCurrentUser()?.id,
         };
-    }
+    },
+
+    rootClassNames: () => ({
+        "streamer-mode": useStateFromStores([StreamerModeStore], () => StreamerModeStore.enabled),
+    })
 });