From 5f3a5d1f7e31e41d40dd9d6da4ad6bd8739471a2 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Fri, 31 Mar 2023 01:52:58 +0800
Subject: [PATCH] feat: implement theme color switching feature

---
 src/components/Settings.vue      | 48 +++++++++++++++++++++++++++-----
 src/contentScripts/views/App.vue | 12 ++++++++
 src/logic/storage.ts             |  1 +
 src/models/models.ts             |  1 +
 src/utils/main.ts                | 18 ++++++++++++
 5 files changed, 73 insertions(+), 7 deletions(-)

diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index 73d920ee..14b10a63 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -10,6 +10,28 @@ const { t, locale } = useI18n()
 
 const authorizeBtn = ref<HTMLButtonElement>() as Ref<HTMLButtonElement>
 const langsSelect = ref<HTMLElement>() as Ref<HTMLElement>
+const themeColorOptions = reactive<Array<{ value: string; label: string }>>([
+  {
+    value: '#00a1d6',
+    label: '#00a1d6',
+  },
+  {
+    value: '#fb7299',
+    label: '#fb7299',
+  },
+  {
+    value: '#49e0ad',
+    label: '#49e0ad',
+  },
+  {
+    value: '#0d9488',
+    label: '#0d9488',
+  },
+  {
+    value: '#6366f1',
+    label: '#6366f1',
+  },
+])
 
 const langs = computed(() => {
   return [
@@ -56,13 +78,17 @@ function close() {
   emit('close')
 }
 
-function onAuthorize() {
+function handleAuthorize() {
   grantAccessKey(authorizeBtn.value)
 }
 
-function onRevoke() {
+function handleRevoke() {
   revokeAccessKey()
 }
+
+function changeThemeColor(color: string) {
+  settings.value.themeColor = color
+}
 </script>
 
 <template>
@@ -111,11 +137,11 @@ function onRevoke() {
         v-if="`${accessKey}` === 'undefined' || `${accessKey}` === 'null' || accessKey === ''"
         ref="authorizeBtn"
         class="btn"
-        @click="onAuthorize"
+        @click="handleAuthorize"
       >
         {{ $t('settings.btn.authorize') }}
       </button>
-      <button v-else class="line-btn" @click="onRevoke">
+      <button v-else class="line-btn" @click="handleRevoke">
         <span>{{ $t('settings.btn.revoke') }}</span>
       </button>
     </div>
@@ -137,13 +163,21 @@ function onRevoke() {
 
     <div class="settings-item">
       <div>
-        Accent color
+        Theme color
         <br>
         <!-- <span class="desc">{{ $t('settings.topbar_visible_desc') }}</span> -->
       </div>
       <div flex="~ gap-2">
-        <div w-20px h-20px rounded-8 bg="#00a1d6" />
-        <div w-20px h-20px rounded-8 bg="#fb7299" />
+        <div
+          v-for="item in themeColorOptions" :key="item.value"
+          w-20px h-20px rounded-8 cursor-pointer transition duration-300
+          :bg="item.value"
+          :style="{
+            transform: item.value === settings.themeColor ? 'scale(1.2)' : 'scale(1)',
+            border: item.value === settings.themeColor ? '2px solid var(--bew-text-1)' : 'none',
+          }"
+          @click="changeThemeColor(item.value)"
+        />
       </div>
     </div>
 
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index 48c2e26f..c6e7aeaa 100644
--- a/src/contentScripts/views/App.vue
+++ b/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
diff --git a/src/logic/storage.ts b/src/logic/storage.ts
index e7998b41..574bce75 100644
--- a/src/logic/storage.ts
+++ b/src/logic/storage.ts
@@ -10,4 +10,5 @@ export const settings = useStorageLocal('settings', ref<Settings>({
   language: '',
   isShowTopbar: true,
   dockPosition: 'left',
+  themeColor: '#00a1d6',
 }), { mergeDefaults: true })
diff --git a/src/models/models.ts b/src/models/models.ts
index 10669688..51239287 100644
--- a/src/models/models.ts
+++ b/src/models/models.ts
@@ -2,4 +2,5 @@ export interface Settings {
   language: string
   isShowTopbar: boolean
   dockPosition: 'left' | 'right' | 'bottom'
+  themeColor: string
 }
diff --git a/src/utils/main.ts b/src/utils/main.ts
index 6bae473c..08913938 100644
--- a/src/utils/main.ts
+++ b/src/utils/main.ts
@@ -45,3 +45,21 @@ export const removeHttpFromUrl = (url: string) => {
 export const openLinkToNewTab = (url: string) => {
   window.open(url, '_blank')
 }
+
+/**
+ * convert a hex color value to RGBA, thanks ChatGPT 🫡
+ * @param hex hex color value
+ * @param alpha color opacity
+ * @returns
+ */
+export const hexToRGBA = (hex: string, alpha: number) => {
+  const r = parseInt(hex.slice(1, 3), 16)
+  const g = parseInt(hex.slice(3, 5), 16)
+  const b = parseInt(hex.slice(5, 7), 16)
+
+  if (alpha)
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`
+
+  else
+    return `rgb(${r}, ${g}, ${b})`
+}