diff --git a/src/background/index.ts b/src/background/index.ts index 9cff76b0..3075f820 100644 --- a/src/background/index.ts +++ b/src/background/index.ts @@ -87,18 +87,18 @@ browser.tabs.onUpdated.addListener((tabId: number, changInfo: Tabs.OnUpdatedChan tabId, }, }) - setTimeout(() => { - browser.scripting.insertCSS({ - css: ` - body { - opacity: 1; - overflow-y: auto; - pointer-events: auto; - } - `, - target: { tabId }, - }) - }, 1500) + // setTimeout(() => { + // browser.scripting.insertCSS({ + // css: ` + // body { + // opacity: 1; + // overflow-y: auto; + // pointer-events: auto; + // } + // `, + // target: { tabId }, + // }) + // }, 2000) // If it not a macOS, we will inject CSS to design the scrollbar if (!navigator.userAgent.includes('Mac OS X')) { @@ -133,18 +133,18 @@ browser.tabs.onUpdated.addListener((tabId: number, changInfo: Tabs.OnUpdatedChan } } else if (changInfo.status === 'complete') { - // const css = ` - // body { - // opacity: 1; - // overflow-y: auto; - // pointer-events: auto; - // } - // ` + const css = ` + body { + opacity: 1; + overflow-y: auto; + pointer-events: auto; + } + ` - // browser.scripting.insertCSS({ - // css, - // target: { tabId }, - // }) + browser.scripting.insertCSS({ + css, + target: { tabId }, + }) } } }) diff --git a/src/background/resetWebsiteStyle.ts b/src/background/resetWebsiteStyle.ts index 709f1c02..a1ea7bbd 100644 --- a/src/background/resetWebsiteStyle.ts +++ b/src/background/resetWebsiteStyle.ts @@ -4,16 +4,22 @@ export const resetCss = ` */ :root { - --band_blue: var(--bew-theme-color); - --text1: var(--bew-text-1); - --text2: var(--bew-text-2); - --text3: var(--bew-text-3); - --bg1: var(--bew-content-1); - --bg2: var(--bew-content-1); - --bg3: var(--bew-content-1); - --line-light: var(--bew-fill-2); - --line_regular: var(--bew-fill-3); - --line_bold: var(--bew-fill-4); + --bew-bg: hsl(220, 14%, 96%); + + // --band_blue: var(--bew-theme-color); + // --text1: var(--bew-text-1); + // --text2: var(--bew-text-2); + // --text3: var(--bew-text-3); + // --bg1: var(--bew-content-1); + // --bg2: var(--bew-content-1); + // --bg3: var(--bew-content-1); + // --line-light: var(--bew-fill-2); + // --line_regular: var(--bew-fill-3); + // --line_bold: var(--bew-fill-4); +} + +:root.dark { + --bew-bg: hsl(230 12% 6%); } html, @@ -22,6 +28,10 @@ body { min-width: unset !important; } +html { + background-color: var(--bew-bg); +} + a, a:hover { color: unset; diff --git a/src/contentScripts/index.ts b/src/contentScripts/index.ts index 26e13a19..d794717d 100644 --- a/src/contentScripts/index.ts +++ b/src/contentScripts/index.ts @@ -23,45 +23,42 @@ import { SVG_ICONS, getCookie, i18n, setCookie } from '~/utils' || /https?:\/\/www.bilibili.com\/\?spm_id_from=(.)*/.test(currentUrl) || /https?:\/\/(www.)?bilibili.com\/video\/.*/.test(currentUrl) ) { - // if the current homepage is an old version, redirect to the new version - // because they had some style errors in the old version - // if (`${getCookie('i-wanna-go-back')}` === '2') { - // setCookie('i-wanna-go-back', '-1', 1) - // location.reload() - // } - const originalPageContent = document.querySelector('#i_cecream') if (originalPageContent) originalPageContent.innerHTML = '' - // const container = document.createElement('div') - // const root = document.createElement('div') - // const styleEl = document.createElement('link') - // styleEl.setAttribute('rel', 'stylesheet') - // styleEl.setAttribute('href', browser.runtime.getURL('dist/contentScripts/style.css')) - // container.id = 'bewly' - // container.appendChild(styleEl) - // container.appendChild(root) - // document.body.appendChild(container) + if (/https?:\/\/(www.)?bilibili.com\/video\/.*/.test(currentUrl)) { + const container = document.createElement('div') + const root = document.createElement('div') + const styleEl = document.createElement('link') + styleEl.setAttribute('rel', 'stylesheet') + styleEl.setAttribute('href', browser.runtime.getURL('dist/contentScripts/style.css')) + container.id = 'bewly' + container.appendChild(styleEl) + container.appendChild(root) + document.body.appendChild(container) + + const app = createApp(App) + setupApp(app) + app.use(i18n).mount(root) + } + else { + // mount component to context window + const container = document.createElement('div') + container.id = 'bewly' + const root = document.createElement('div') + const styleEl = document.createElement('link') + const shadowDOM = container.attachShadow?.({ mode: __DEV__ ? 'open' : 'closed' }) || container + styleEl.setAttribute('rel', 'stylesheet') + styleEl.setAttribute('href', browser.runtime.getURL('dist/contentScripts/style.css')) + shadowDOM.appendChild(styleEl) + shadowDOM.appendChild(root) + document.body.appendChild(container) + const app = createApp(App) + setupApp(app) + app.use(i18n).mount(root) + } - // const app = createApp(App) - // setupApp(app) - // app.use(i18n).mount(root) - - // mount component to context window - const container = document.createElement('div') - container.id = 'bewly' - const root = document.createElement('div') - const styleEl = document.createElement('link') - const shadowDOM = container.attachShadow?.({ mode: __DEV__ ? 'open' : 'closed' }) || container - styleEl.setAttribute('rel', 'stylesheet') - styleEl.setAttribute('href', browser.runtime.getURL('dist/contentScripts/style.css')) - shadowDOM.appendChild(styleEl) - shadowDOM.appendChild(root) - document.body.appendChild(container) - const app = createApp(App) - setupApp(app) - app.use(i18n).mount(root) // inject svg icons const svgDiv = document.createElement('div') diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue index 19c1cb7e..a24dbf74 100644 --- a/src/contentScripts/views/App.vue +++ b/src/contentScripts/views/App.vue @@ -16,10 +16,23 @@ import { AppPage, LanguageType } from '~/enums/appEnums' const { locale } = useI18n() const [showSettings, toggle] = useToggle(false) -const isDark = useDark({ selector: '#bewly' }) +const isDark = useDark({ + // selector: '#bewly', + onChanged: (isDark: boolean) => { + if (isDark) { + document.querySelector('html')?.classList.add('dark') + document.querySelector('#bewly')?.classList.add('dark') + } + else { + document.querySelector('html')?.classList.remove('dark') + document.querySelector('#bewly')?.classList.remove('dark') + } + }, +}) const toggleDark = useToggle(isDark) const pages = { Home, Search, Anime, History, Favorites, Video } const isVideoPage = ref(false) +const mainApp = ref() watch( () => activatedPage.value, @@ -28,6 +41,12 @@ watch( }, ) +// Watch for changes in the 'isDark' variable and add the 'dark' class to the 'mainApp' element +// to prevent some Unocss dark-specific styles from failing to take effect +watch(() => isDark.value, (newValue, oldValue) => { + setAppAppearance() +}) + onUpdated(() => { setAppLanguage() }) @@ -35,6 +54,11 @@ onUpdated(() => { onMounted(() => { if (/https?:\/\/(www.)?bilibili.com\/video\/.*/.test(location.href)) isVideoPage.value = true + setAppAppearance() + setAppLanguage() + // nextTick(() => { + // setAppLanguage() + // }) }) function changeActivatePage(pageName: AppPage) { @@ -59,13 +83,26 @@ async function setAppLanguage() { language.value = LanguageType.English } } + console.log('hey, im here', language.value) locale.value = language.value } + +/** + * Watch for changes in the 'isDark' 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) + mainApp.value?.classList.add('dark') + + else + mainApp.value?.classList.remove('dark') +}