feat: add a "follow the bilibili evolved color" option

src/_locales/cmn-CN.yml

@@ -38,6 +38,9 @@ settings:
     left: 左侧
     right: 右侧
     bottom: 底部
+  theme_color: 主题色
+  follow_bilibili_evolved_color: 使用 Bilibili Evolved 主题色
+  follow_bilibili_evolved_color_desc: 每次选完 Bilibili Evolved 主题色时，记得重新选中这一选项以更新配置
 auth:
   err_tip: Failed to grant Access Key
   plz_login_first: Please login to bilibili first

src/_locales/cmn-TW.yml

@@ -38,6 +38,9 @@ settings:
     left: 左側
     right: 右側
     bottom: 底部
+  theme_color: 主題色
+  follow_bilibili_evolved_color: 使用 Bilibili Evolved 主題色
+  follow_bilibili_evolved_color_desc: 每次變更 Bilibili Evolved 主題色後，必須重新選取此選項以更新配置
 topbar:
   sign_in: 登入
   notifications: 通知

src/_locales/en.yml

@@ -41,6 +41,9 @@ settings:
     left: Left
     right: Right
     bottom: Bottom
+  theme_color: Theme color
+  follow_bilibili_evolved_color: Follow the Bilibili Evolved theme color
+  follow_bilibili_evolved_color_desc: After changing the theme color in Bilibili Evolved, you will need to re-select this option in order to update the theme color.
 auth:
   err_tip: Failed to grant Access Key
   plz_login_first: Please login to bilibili first

src/_locales/jyut.yml

@@ -38,6 +38,9 @@ settings:
     left: 左側
     right: 右側
     bottom: 下低
+  theme_color: 佈景色
+  follow_bilibili_evolved_color: 跟返 Bilibili Evolved 佈景色
+  follow_bilibili_evolved_color_desc: 每次換完 Bilibili Evolved 佈景色嗰陣，記得揀多一次呢個選項愛嚟更新佈置
 auth:
   err_tip: Failed to grant Access Key
   plz_login_first: Please login to bilibili first

src/components/Settings.vue

@@ -11,22 +11,15 @@ 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: '#22c55e',
+    label: '#22c55e',
   },
   {
     value: '#34d399',
     label: '#34d399',
   },
-  {
-    value: '#22c55e',
-    label: '#22c55e',
-  },
   {
     value: '#14b8a6',
     label: '#14b8a6',
@@ -35,6 +28,18 @@ const themeColorOptions = reactive<Array<{ value: string; label: string }>>([
     value: '#06b6d4',
     label: '#06b6d4',
   },
+  {
+    value: '#00a1d6',
+    label: '#00a1d6',
+  },
+  {
+    value: '#60a5fa',
+    label: '#60a5fa',
+  },
+  {
+    value: '#3b82f6',
+    label: '#3b82f6',
+  },
   {
     value: '#6366f1',
     label: '#6366f1',
@@ -47,14 +52,6 @@ const themeColorOptions = reactive<Array<{ value: string; label: string }>>([
     value: '#a78bfa',
     label: '#a78bfa',
   },
-  {
-    value: '#3b82f6',
-    label: '#3b82f6',
-  },
-  {
-    value: '#60a5fa',
-    label: '#60a5fa',
-  },
   {
     value: '#f46d43',
     label: '#f46d43',
@@ -75,11 +72,16 @@ const themeColorOptions = reactive<Array<{ value: string; label: string }>>([
     value: '#f43f5e',
     label: '#f43f5e',
   },
+  {
+    value: '#fb7299',
+    label: '#fb7299',
+  },
   {
     value: '#fda4af',
     label: '#fda4af',
   },
 ])
+const bilibiliEvolvedThemeColor = ref<string>('#00a1d6')
 
 const langs = computed(() => {
   return [
@@ -118,6 +120,12 @@ const dockPositions = computed(() => {
   ]
 })
 
+onMounted(() => {
+  bilibiliEvolvedThemeColor.value
+    = getComputedStyle(document.querySelector('html') as HTMLElement).getPropertyValue('--theme-color').trim()
+      ?? '#00a1d6'
+})
+
 watch(() => settings.value.language, (newValue, oldValue) => {
   locale.value = newValue
 })
@@ -211,9 +219,8 @@ function changeThemeColor(color: string) {
 
     <div class="settings-item">
       <div>
-        Theme color
+        {{ $t('settings.theme_color') }}
         <br>
-        <!-- <span class="desc">{{ $t('settings.topbar_visible_desc') }}</span> -->
       </div>
       <div flex="~ gap-2 wrap">
         <div
@@ -229,6 +236,27 @@ function changeThemeColor(color: string) {
       </div>
     </div>
 
+    <div class="settings-item">
+      <div>
+        {{ $t('settings.follow_bilibili_evolved_color') }}
+        <br>
+        <span class="desc">
+          {{ $t('settings.follow_bilibili_evolved_color_desc') }}
+        </span>
+      </div>
+      <div>
+        <div
+          w-20px h-20px rounded-8 cursor-pointer
+          :style="{
+            background: bilibiliEvolvedThemeColor,
+            transform: bilibiliEvolvedThemeColor === settings.themeColor ? 'scale(1.2)' : 'scale(1)',
+            border: bilibiliEvolvedThemeColor === settings.themeColor ? '2px solid var(--bew-text-1)' : 'none',
+          }"
+          @click="changeThemeColor(bilibiliEvolvedThemeColor)"
+        />
+      </div>
+    </div>
+
     <div class="settings-item">
       <div>
         {{ $t('settings.dock_position') }}