feat: implement theme color switching feature

src/contentScripts/views/App.vue

@@ -12,6 +12,7 @@ import Video from './Video/Video.vue'
 import { activatedPage, settings } from '~/logic'
 import '~/styles/index.ts'
 import { AppPage, LanguageType } from '~/enums/appEnums'
+import { hexToRGBA } from '~/utils'
 
 const { locale } = useI18n()
 const [showSettings, toggle] = useToggle(false)
@@ -41,6 +42,17 @@ watch(
     }, 500)
   },
 )
+watch(
+  () => settings.value.themeColor,
+  (newValue) => {
+    const bewlyElement = document.querySelector('#bewly') as HTMLElement
+    if (bewlyElement) {
+      bewlyElement.style.setProperty('--bew-theme-color', newValue)
+      for (let i = 0; i < 9; i++)
+        bewlyElement.style.setProperty(`--bew-theme-color-${i + 1}0`, hexToRGBA(newValue, i * 0.1 + 0.1))
+    }
+  },
+)
 
 // Watch for changes in the 'isDark' variable and add the 'dark' class to the 'mainApp' element
 // to prevent some Unocss dark-specific styles from failing to take effect