diff --git a/src/contentScripts/index.ts b/src/contentScripts/index.ts index 6d7f17a1..16f4967a 100644 --- a/src/contentScripts/index.ts +++ b/src/contentScripts/index.ts @@ -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 tag // We have to manually add a class to the 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; } `) diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue index 061cbdec..75cb2493 100644 --- a/src/contentScripts/views/App.vue +++ b/src/contentScripts/views/App.vue @@ -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('BEWLY_APP', {