feat(DarkMode): B站节日活动页面仅插件元素适配暗黑模式，其它界面元素保持不变 #192

Author: keleus

src/composables/useDark.ts

@@ -6,6 +6,13 @@ import { runWhenIdle } from '~/utils/lazyLoad'
 import { setCookie } from '~/utils/main'
 import { executeTimes } from '~/utils/timer'
 
+/**
+ * Check if current page is festival page
+ */
+function isFestivalPage(): boolean {
+  return /https?:\/\/(?:www\.)?bilibili\.com\/festival\/.*/.test(document.URL)
+}
+
 /**
  * 设置深色模式基准颜色
  */
@@ -82,14 +89,22 @@ export function useDark() {
     if (themeChangeTimer)
       clearInterval(themeChangeTimer)
 
+    // Check if we should apply selective dark mode (plugin UI only) on festival pages
+    const isSelectiveDark = isFestivalPage() && settings.value.adaptToOtherPageStyles
+
     if (isDark.value) {
+      // Always apply dark mode to plugin container
       document.querySelector('#bewly')?.classList.add('dark')
-      document.documentElement.classList.add('dark')
-      nextTick(() => {
-        document.body?.classList.add('dark')
-      })
-      // bili_dark is bilibili's official dark mode class
-      document.documentElement.classList.add('bili_dark')
+
+      // Only apply global dark mode if not on festival pages
+      if (!isSelectiveDark) {
+        document.documentElement.classList.add('dark')
+        nextTick(() => {
+          document.body?.classList.add('dark')
+        })
+        // bili_dark is bilibili's official dark mode class
+        document.documentElement.classList.add('bili_dark')
+      }
 
       // 确保深色模式基准颜色被正确应用
       setDarkModeBaseColor(settings.value.darkModeBaseColor)
@@ -99,11 +114,15 @@ export function useDark() {
     }
     else {
       document.querySelector('#bewly')?.classList?.remove('dark')
-      document.documentElement.classList.remove('dark')
-      nextTick(() => {
-        document.body?.classList.remove('dark')
-      })
-      document.documentElement.classList.remove('bili_dark')
+
+      // Only remove global classes if we're not in selective mode or if we applied them
+      if (!isSelectiveDark) {
+        document.documentElement.classList.remove('dark')
+        nextTick(() => {
+          document.body?.classList.remove('dark')
+        })
+        document.documentElement.classList.remove('bili_dark')
+      }
 
       setCookie('theme_style', 'light', 365 * 10)
       window.dispatchEvent(new CustomEvent('global.themeChange', { detail: 'light' }))

src/contentScripts/index.ts

@@ -36,6 +36,10 @@ if (isFirefox) {
 
 const currentUrl = document.URL
 
+function isFestivalPage(): boolean {
+  return /https?:\/\/(?:www\.)?bilibili\.com\/festival\/.*/.test(document.URL)
+}
+
 function isSupportedPages(): boolean {
   if (isInIframe())
     return false
@@ -136,10 +140,12 @@ let lastUrl = location.href
 let hasAppliedPlayerMode = false // 添加标志变量
 
 if (isSupportedPages() || isSupportedIframePages()) {
+  // Always use dark mode if enabled, but let useDark() handle selective application
   if (settings.value.adaptToOtherPageStyles)
     useDark()
 
-  if (settings.value.adaptToOtherPageStyles) {
+  const shouldApplyFullStyles = settings.value.adaptToOtherPageStyles && !isFestivalPage()
+  if (shouldApplyFullStyles) {
     document.documentElement.classList.add('bewly-design')
 
     // Remove the Bilibili Evolved's dark mode style
@@ -533,18 +539,38 @@ window.addEventListener('message', (event) => {
   const { type, isDark, darkModeBaseColor } = event.data
 
   if (type === 'iframeDarkModeChange') {
+    // Check if we should apply selective dark mode (plugin UI only) on festival pages
+    const isSelectiveDark = isFestivalPage()
+
     if (isDark) {
-      document.documentElement.classList.add('dark')
-      document.body?.classList.add('dark')
+      // Always apply to plugin container if it exists
+      const bewlyElement = document.querySelector('#bewly')
+      if (bewlyElement) {
+        bewlyElement.classList.add('dark')
+      }
+
+      // Only apply global styles if not on festival pages
+      if (!isSelectiveDark) {
+        document.documentElement.classList.add('dark')
+        document.body?.classList.add('dark')
+      }
 
       // 如果提供了深色模式基准颜色，则应用它
       if (darkModeBaseColor) {
         document.documentElement.style.setProperty('--bew-dark-base-color', darkModeBaseColor)
       }
     }
     else {
-      document.documentElement.classList.remove('dark')
-      document.body?.classList.remove('dark')
+      const bewlyElement = document.querySelector('#bewly')
+      if (bewlyElement) {
+        bewlyElement.classList.remove('dark')
+      }
+
+      // Only remove global classes if not in selective mode
+      if (!isSelectiveDark) {
+        document.documentElement.classList.remove('dark')
+        document.body?.classList.remove('dark')
+      }
     }
   }
 }, { passive: true })

src/contentScripts/views/App.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onKeyStroke, useEventListener, useThrottleFn, useToggle } from '@vueuse/core'
 import type { Ref } from 'vue'
+import { ref } from 'vue'
 
 import type { BewlyAppProvider } from '~/composables/useAppProvider'
 import { useDark } from '~/composables/useDark'
@@ -16,9 +17,26 @@ import emitter from '~/utils/mitt'
 
 import { setupNecessarySettingsWatchers } from './necessarySettingsWatchers'
 
+// Check if current page is festival page
+function isFestivalPage(): boolean {
+  return /https?:\/\/(?:www\.)?bilibili\.com\/festival\/.*/.test(document.URL)
+}
+
 const mainStore = useMainStore()
 const settingsStore = useSettingsStore()
-const { isDark } = useDark()
+
+// Conditionally use dark mode (skip on festival pages)
+let isDark: Ref<boolean>
+// Always use dark mode if enabled, but let useDark() handle selective application
+const shouldUseDark = settings.value.adaptToOtherPageStyles
+
+if (shouldUseDark) {
+  const darkResult = useDark()
+  isDark = darkResult.isDark
+}
+else {
+  isDark = ref(false)
+}
 const [showSettings, toggleSettings] = useToggle(false)
 
 // Get the 'page' query parameter from the URL
@@ -114,12 +132,20 @@ useEventListener(window, 'message', ({ data, source }) => {
     // 在iframe环境中，只更新DOM样式，不修改用户的主题设置
     // 避免覆盖用户设置的"auto"模式
     if (isInIframe()) {
+      // Check if we should apply selective dark mode (plugin UI only) on festival pages
+      const isSelectiveDark = isFestivalPage()
+
       // 立即更新DOM样式，不修改settings.value.theme
       if (isDark) {
-        document.documentElement.classList.add('dark')
-        document.body?.classList.add('dark')
+        // Always apply to plugin container
         document.querySelector('#bewly')?.classList.add('dark')
 
+        // Only apply global styles if not on festival pages
+        if (!isSelectiveDark) {
+          document.documentElement.classList.add('dark')
+          document.body?.classList.add('dark')
+        }
+
         // 如果提供了深色模式基准颜色，则应用它（仅应用到DOM，不修改设置）
         if (darkModeBaseColor) {
           document.documentElement.style.setProperty('--bew-dark-base-color', darkModeBaseColor)
@@ -132,9 +158,13 @@ useEventListener(window, 'message', ({ data, source }) => {
         }
       }
       else {
-        document.documentElement.classList.remove('dark')
-        document.body?.classList.remove('dark')
         document.querySelector('#bewly')?.classList?.remove('dark')
+
+        // Only remove global classes if not in selective mode
+        if (!isSelectiveDark) {
+          document.documentElement.classList.remove('dark')
+          document.body?.classList.remove('dark')
+        }
       }
 
       // 强制重新计算样式

src/utils/main.ts

@@ -176,7 +176,7 @@ export function isVideoOrBangumiPage(url: string = location.href): boolean {
     || /https?:\/\/(?:www\.)?bilibili\.com\/list\/watchlater\?(?:bvid|avid).*/.test(url)
     // favorite playlist
     || /https?:\/\/(?:www\.)?bilibili\.com\/list\/ml.*/.test(url)
-    || /https?:\/\/(?:www\.)?bilibili\.com\/festival\/.*\?(?:bvid|avid).*/.test(url)
+    || /https?:\/\/(?:www\.)?bilibili\.com\/festival\/.*/.test(url)
   ) {
     return true
   }