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

fix: flash dark theme (#565)

Browse Source 
* fix: flash dark mode when using the light theme

* improve color mode transition

---------

Co-authored-by: starknt <1431880400@qq.com>
This commit is contained in:
Hakadao
2024-04-14 22:39:25 +08:00
committed by GitHub
parent e4db15748b
commit 225188bba0
2 changed files with 20 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/contentScripts/index.ts
View File

@@ -73,11 +73,13 @@ function isSupportedPages() {
let beforeLoadedStyleEl: HTMLStyleElement | undefined
if (isSupportedPages()) {
const isDarkSystemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
// Since using runWhenIdle does not instantly inject the app to the page, a style class cannot be injected immediately to the <html> tag
// We have to manually add a class to the <html> app to ensure that the transition effect is applied
if (
(settings.value.adaptToOtherPageStyles && settings.value.theme === 'dark')
|| (settings.value.adaptToOtherPageStyles && window.matchMedia('(prefers-color-scheme: dark)').matches)
// Fix: flash dark mode when using the light theme
|| (settings.value.adaptToOtherPageStyles && (isDarkSystemTheme && settings.value.theme !== 'light'))
)
document.documentElement.classList.add('dark')
@@ -89,13 +91,13 @@ if (isSupportedPages()) {
if (settings.value.adaptToOtherPageStyles && isHomePage()) {
beforeLoadedStyleEl = injectCSS(`
html.dark.bewly-design {
background-color: hsl(230 12% 6%);
html.bewly-design {
background-color: var(--bew-bg);
transition: background-color 0.2s ease-in;
}
body {
opacity: 0;
background: none;
display: none;
}
`)

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

@@ -29,6 +29,13 @@ const handleThrottledPageRefresh = useThrottleFn(() => handlePageRefresh.value?.
const handleThrottledReachBottom = useThrottleFn(() => handleReachBottom.value?.(), 500)
const topBarRef = ref()
const isDark = computed(() => {
if (settings.value.theme === 'auto')
return window.matchMedia('(prefers-color-scheme: dark)').matches
return settings.value.theme === 'dark'
})
const isVideoPage = computed(() => {
if (/https?:\/\/(www.)?bilibili.com\/video\/.*/.test(location.href))
return true
@@ -72,13 +79,14 @@ watch(
() => {
setAppThemeColor()
},
{ 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()
@@ -90,7 +98,7 @@ watch(() => accessKey.value, () => {
watch(() => settings.value.adaptToOtherPageStyles, () => {
handleAdaptToOtherPageStylesChange()
})
}, { immediate: true })
watch(() => settings.value.blockAds, () => {
handleBlockAds()
@@ -105,8 +113,6 @@ watch(() => settings.value.reduceFrostedGlassBlur, () => {
})
onBeforeMount(() => {
setAppThemeColor()
handleAdaptToOtherPageStylesChange()
handleBlockAds()
handleDisableFrostedGlass()
handleReduceFrostedGlassBlur()
@@ -183,30 +189,14 @@ async function setAppLanguage() {
* to prevent some Unocss dark-specific styles from failing to take effect
*/
function setAppAppearance() {
const currentColorScheme = window.matchMedia('(prefers-color-scheme: dark)').matches
if (settings.value.theme === 'dark') {
mainAppRef.value?.classList.add('dark')
if (isDark.value) {
document.querySelector('#bewly')?.classList.add('dark')
document.documentElement.classList.add('dark')
}
else if (settings.value.theme === 'light') {
mainAppRef.value?.classList.remove('dark')
else {
document.querySelector('#bewly')?.classList.remove('dark')
document.documentElement.classList.remove('dark')
}
else if (settings.value.theme === 'auto') {
if (currentColorScheme) {
mainAppRef.value?.classList.add('dark')
document.querySelector('#bewly')?.classList.add('dark')
document.documentElement.classList.add('dark')
}
else {
mainAppRef.value?.classList.remove('dark')
document.querySelector('#bewly')?.classList.remove('dark')
document.documentElement.classList.remove('dark')
}
}
}
function setAppThemeColor() {
@@ -321,7 +311,7 @@ provide<BewlyAppProvider>('BEWLY_APP', {
</script>
<template>
<div ref="mainAppRef" class="bewly-wrapper" text="$bew-text-1">
<div ref="mainAppRef" class="bewly-wrapper" :class="{ dark: isDark }" text="$bew-text-1">
<!-- Background -->
<template v-if="isHomePage() && !settings.useOriginalBilibiliHomepage">
<AppBackground :activated-page="activatedPage" />