From 6f19b29993b6c8e551adb4e8c9d018cc2b938318 Mon Sep 17 00:00:00 2001 From: Stephen Zhou Date: Fri, 10 May 2024 14:59:25 +0800 Subject: [PATCH] fix: sync theme when loading page, close #736 --- src/contentScripts/index.ts | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/src/contentScripts/index.ts b/src/contentScripts/index.ts index 16f4967a..2478608b 100644 --- a/src/contentScripts/index.ts +++ b/src/contentScripts/index.ts @@ -1,7 +1,7 @@ import { createApp } from 'vue' import 'uno.css' -import '~/styles/index.ts' +import '~/styles' import App from './views/App.vue' import { setupApp } from '~/logic/common-setup' import { SVG_ICONS } from '~/utils/svgIcons' @@ -73,15 +73,8 @@ 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') - // Fix: flash dark mode when using the light theme - || (settings.value.adaptToOtherPageStyles && (isDarkSystemTheme && settings.value.theme !== 'light')) - ) - document.documentElement.classList.add('dark') + if (settings.value.adaptToOtherPageStyles) + useDark() if (settings.value.adaptToOtherPageStyles) document.documentElement.classList.add('bewly-design')