fix: read theme from computing style (#8726)

* fix: read theme from computing style * fix: lint error
DimensionDev · Feb 16, 2023 · 0b19f26 · 0b19f26
1 parent 27107fe
commit 0b19f26
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 1 deletion.
diff --git a/packages/web3-providers/src/Twitter/apis/getUserSettings.ts b/packages/web3-providers/src/Twitter/apis/getUserSettings.ts
@@ -1,3 +1,4 @@
+import { hexToRgb } from '@mui/material'
 import { getStore } from './getDatabase.js'
 import { TwitterBaseAPI } from '../../entry-types.js'
 
@@ -33,3 +34,51 @@ export function getDefaultUserSettings(): TwitterBaseAPI.UserSettings {
         themeColor: TwitterBaseAPI.ThemeColor.Blue,
     }
 }
+
+export function getComputedUserSettings(): TwitterBaseAPI.UserSettings {
+    const getThemeBackground = () => {
+        const { backgroundColor } = getComputedStyle(document.body)
+        const rgb = backgroundColor.startsWith('#') ? hexToRgb(backgroundColor) : backgroundColor
+
+        switch (rgb.toLowerCase()) {
+            case 'rgb(255, 255, 255)':
+                return TwitterBaseAPI.ThemeMode.Light
+            case 'rgb(21, 32, 43)':
+                return TwitterBaseAPI.ThemeMode.Dim
+            case 'rgb(0, 0, 0)':
+                return TwitterBaseAPI.ThemeMode.Dark
+            default:
+                return
+        }
+    }
+
+    const getThemeColor = () => {
+        const tweetButton = document.querySelector('a[href="/compose/tweet"][data-testid="SideNav_NewTweet_Button"]')
+        if (!tweetButton) return
+
+        const { backgroundColor } = getComputedStyle(tweetButton)
+        const rgb = backgroundColor.startsWith('#') ? hexToRgb(backgroundColor) : backgroundColor
+
+        switch (rgb.toLowerCase()) {
+            case 'rgb(29, 155, 240)':
+                return TwitterBaseAPI.ThemeColor.Blue
+            case 'rgb(255, 212, 0)':
+                return TwitterBaseAPI.ThemeColor.Yellow
+            case 'rgb(120, 86, 255)':
+                return TwitterBaseAPI.ThemeColor.Purple
+            case 'rgb(249, 24, 128)':
+                return TwitterBaseAPI.ThemeColor.Magenta
+            case 'rgb(255, 122, 0)':
+                return TwitterBaseAPI.ThemeColor.Orange
+            case 'rgb(0, 186, 124)':
+                return TwitterBaseAPI.ThemeColor.Green
+            default:
+                return
+        }
+    }
+
+    return {
+        themeBackground: getThemeBackground(),
+        themeColor: getThemeColor(),
+    }
+}
diff --git a/packages/web3-providers/src/Twitter/index.ts b/packages/web3-providers/src/Twitter/index.ts
@@ -12,6 +12,7 @@ import {
     getUserNFTAvatar,
     getUserNFTContainer,
     staleUserViaIdentity,
+    getComputedUserSettings,
 } from './apis/index.js'
 import type { TwitterBaseAPI } from '../entry-types.js'
 import { fetchJSON } from '../entry-helpers.js'
@@ -32,14 +33,21 @@ export class TwitterAPI implements TwitterBaseAPI.Provider {
 
     async getUserSettings() {
         const defaults = getDefaultUserSettings()
+        const computed = getComputedUserSettings()
+
         try {
             const userSettings = await timeout(getUserSettings(), 5000)
+
             return {
                 ...defaults,
+                ...computed,
                 ...userSettings,
             }
         } catch {
-            return defaults
+            return {
+                ...defaults,
+                ...computed,
+            }
         }
     }