renun/BewlyBewly
1
0
Fork 0
mirror of https://github.com/BewlyBewly/BewlyBewly.git synced 2025-04-14 13:15:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: group dark mode logic to useDark (#694)

Browse Source 
* refactor: group dark mode logic to useDark

* fix: cannot get the bewlyWrapper

---------

Co-authored-by: hakadao <a578457889743@gmail.com>
This commit is contained in:
Stephen Zhou
2024-05-02 02:10:59 +08:00
committed by GitHub
parent 9a15d17f2d
commit 79f11cbb87
5 changed files with 138 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/contentScripts/views/App.vue
View File

@@ -1,14 +1,15 @@
<script setup lang="ts">
import { usePreferredDark, useThrottleFn, useToggle } from '@vueuse/core'
import { useThrottleFn, useToggle } from '@vueuse/core'
import type { Ref } from 'vue'
import { useI18n } from 'vue-i18n'
import browser from 'webextension-polyfill'
import type { Ref } from 'vue'
import { accessKey, settings } from '~/logic'
import { AppPage, LanguageType } from '~/enums/appEnums'
import { getUserID, hexToRGBA, isHomePage, smoothScrollToTop } from '~/utils/main'
import type { BewlyAppProvider } from '~/composables/useAppProvider'
import { AppPage, LanguageType } from '~/enums/appEnums'
import { accessKey, settings } from '~/logic'
import { getUserID, hexToRGBA, isHomePage, smoothScrollToTop } from '~/utils/main'
const { isDark } = useDark()
const activatedPage = ref<AppPage>(settings.value.dockItemVisibilityList.find(e => e.visible === true)?.page ?? AppPage.Home)
const { locale } = useI18n()
const [showSettings, toggleSettings] = useToggle(false)
@@ -29,13 +30,6 @@ const handleThrottledPageRefresh = useThrottleFn(() => handlePageRefresh.value?.
const handleThrottledReachBottom = useThrottleFn(() => handleReachBottom.value?.(), 500)
const topBarRef = ref()
const isPreferredDark = usePreferredDark()
const isDark = computed(() => {
if (settings.value.theme === 'auto')
return isPreferredDark.value
return settings.value.theme === 'dark'
})
const isVideoPage = computed(() => {
if (/https?:\/\/(www.)?bilibili.com\/video\/.*/.test(location.href))
return true
@@ -82,12 +76,6 @@ watch(
{ immediate: true },
)
// Watch for changes in the 'settings.value.theme' variable and add the 'dark' class to the 'mainApp' element
// to prevent some Unocss dark-specific styles from failing to take effect
watch(() => settings.value.theme, () => {
setAppAppearance()
}, { immediate: true })
watch(() => settings.value.language, () => {
setAppLanguage()
})
@@ -133,10 +121,7 @@ onMounted(() => {
else showTopBarMask.value = false
})
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', setAppAppearance)
handleChangeAccessKey()
setAppAppearance()
setAppLanguage()
})
@@ -184,21 +169,6 @@ async function setAppLanguage() {
locale.value = settings.value.language
}
/**
* Watch for changes in the 'settings.value.theme' variable and add the 'dark' class to the 'mainApp' element
* to prevent some Unocss dark-specific styles from failing to take effect
*/
function setAppAppearance() {
if (isDark.value) {
document.querySelector('#bewly')?.classList.add('dark')
document.documentElement.classList.add('dark')
}
else {
document.querySelector('#bewly')?.classList.remove('dark')
document.documentElement.classList.remove('dark')
}
}
function setAppThemeColor() {
const bewlyElement = document.querySelector('#bewly') as HTMLElement
if (bewlyElement) {
@@ -311,7 +281,7 @@ provide<BewlyAppProvider>('BEWLY_APP', {
</script>
<template>
<div ref="mainAppRef" class="bewly-wrapper" :class="{ dark: isDark }" text="$bew-text-1">
<div id="bewly-wrapper" ref="mainAppRef" class="bewly-wrapper" :class="{ dark: isDark }" text="$bew-text-1">
<!-- Background -->
<template v-if="isHomePage() && !settings.useOriginalBilibiliHomepage">
<AppBackground :activated-page="activatedPage" />