Change theme detection on Rumble.com to handle new way Rumble specifi…

…es theme in the HTML Resolves #9
rantstats · Aug 20, 2023 · b0c8182 · b0c8182
1 parent a4e17e4
commit b0c8182
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 32 deletions.
diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml
diff --git a/.idea/rantstats-extension.iml b/.idea/rantstats-extension.iml
diff --git a/src/pages/pages.scss b/src/pages/pages.scss
@@ -11,7 +11,7 @@ html.rantstats {
     background: var(--light-bg);
 
     body {
-        background: var(--light-accent2);
+        background: var(--light-accent);
 
         width: 95%;
         max-width: 1000px;
@@ -44,7 +44,6 @@ html.rantstats {
             justify-self: flex-end;
             position: sticky;
             bottom: 0;
-            background: var(--light-accent);
 
             .row {
                 display: flex;
@@ -64,10 +63,6 @@ html.rantstats {
 
         body {
             background: var(--dark-accent2);
-
-            footer {
-                background: var(--dark-accent);
-            }
         }
 
         h1, h2, h3, h4, h5, h6,

diff --git a/src/styles.scss b/src/styles.scss
@@ -2,7 +2,7 @@
     --light-bg: rgb(243, 243, 247);
     --light-fg: rgb(51, 51, 51);
     --light-accent: rgb(255, 255, 255);
-    --light-accent2: rgb(255, 255, 255);
+    --light-accent2: rgb(243, 245, 248);
     --border: #CCCCCC;
 
     --dark-bg: rgb(16, 33, 47);

diff --git a/src/theme.ts b/src/theme.ts
@@ -1,6 +1,6 @@
 import {getTheme} from "./cache";
 import {rumbleThemeChanged} from "./events";
-import {CHAT_BUTTON_ID, RUMBLE_DARK_CSS, SIDEBAR_ID} from "./types/consts";
+import {CHAT_BUTTON_ID, SIDEBAR_ID} from "./types/consts";
 import {Theme} from "./types/option-types";
 
 /**
@@ -78,14 +78,11 @@ export const updateThemeStyle = (themePreference: Theme) => {
 export const getRumbleTheme = (): Theme => {
     let themePreference
     if (location.host === 'rumble.com') {
-        const darkStyle = document.querySelector(`[${RUMBLE_DARK_CSS}]`) as HTMLLinkElement
-        if (darkStyle === null) {
-            // fall back to light mode
-            themePreference = Theme.Light
-        } else if (darkStyle.disabled) {
-            themePreference = Theme.Light
-        } else {
+        const darkStyle = document.documentElement.classList.contains("dark")
+        if (darkStyle) {
             themePreference = Theme.Dark
+        } else {
+            themePreference = Theme.Light
         }
     } else {
         // not on rumble so fall back to system
@@ -138,22 +135,15 @@ export const updateTheme = async () => {
  */
 const headObserverCallback = (mutations: Array<MutationRecord>, observer: MutationObserver) => {
     mutations.forEach((mutation) => {
-        if (mutation.type === 'childList') {
-            mutation.addedNodes.forEach((node: HTMLElement) => {
-                if (node !== undefined && node.attributes !== undefined) {
-                    if (RUMBLE_DARK_CSS in node.attributes) {
-                        updateTheme().then()
-                    }
-                }
-            })
-        } else if (mutation.type === 'attributes') {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
             const target = mutation.target as HTMLElement
-            if (RUMBLE_DARK_CSS in target.attributes) {
-                updateTheme().then()
-            }
+            console.log("Document changed:", target.classList)
+            updateTheme().then()
         }
     })
 }
 // setup observer to watch for changes to Rumble.com <head>. Used to catch theme changes
-const headObserver = new MutationObserver(headObserverCallback)
-headObserver.observe(document.head, {childList: true, attributes: true, subtree: true})
+if (location.host === 'rumble.com') {
+    const headObserver = new MutationObserver(headObserverCallback)
+    headObserver.observe(document.documentElement, {childList: false, attributes: true, subtree: false})
+}
diff --git a/src/types/consts.ts b/src/types/consts.ts
@@ -17,7 +17,6 @@ export const RANT_LIST_ID = 'rant-list'
 export const READ_CHECK = 'read-check'
 export const REFRESH_ICON = 'refresh-icon'
 export const RESIZE_ID = 'resize'
-export const RUMBLE_DARK_CSS = 'data-theme-main-stylesheet'
 export const SIDEBAR_ID = 'rs-chats'
 export const SIDEBAR_TITLE_ID = 'sidebar-title'
 export const STREAM_CREATOR = 'stream-creator'