diff --git a/package.json b/package.json index 63ebf47c..b87c8560 100644 --- a/package.json +++ b/package.json @@ -15,10 +15,10 @@ "author": "", "license": "MIT", "devDependencies": { - "@parcel/config-webextension": "^2.10.3", + "@parcel/config-webextension": "^2.11.0", "@parcel/optimizer-data-url": "^2.11.0", "@parcel/transformer-inline-string": "^2.11.0", - "@parcel/transformer-sass": "^2.11.0", + "@parcel/transformer-sass": "2.11.0", "assert": "^2.0.0", "browserify-zlib": "^0.2.0", "crypto-browserify": "^3.12.0", diff --git a/src/SEQTA.ts b/src/SEQTA.ts index f977aaf3..d0216462 100644 --- a/src/SEQTA.ts +++ b/src/SEQTA.ts @@ -24,10 +24,10 @@ import browser from 'webextension-polyfill' import coursesicon from './seqta/icons/coursesIcon' import { delay } from "./seqta/utils/delay" import { enableCurrentTheme } from './seqta/ui/Themes' -import iframeCSS from "url:./css/iframe.scss" +import iframeCSS from "bundle-text:./css/iframe.scss" import { onError } from './seqta/utils/onError' import stringToHTML from './seqta/utils/stringToHTML' -import { updateAllColors } from './seqta/ui/colors/Manager' +import { getDarkMode, updateAllColors } from './seqta/ui/colors/Manager' import { updateBgDurations } from './seqta/ui/Animation' declare global { @@ -413,6 +413,7 @@ function removeThemeTagsFromNotices () { async function updateIframesWithDarkMode(): Promise { // Load the CSS file to overwrite iFrame default CSS const cssLink = document.createElement('style') + cssLink.classList.add('iframecss') const cssContent = document.createTextNode(iframeCSS) cssLink.appendChild(cssContent) @@ -423,16 +424,14 @@ async function updateIframesWithDarkMode(): Promise { const iframe = node as HTMLIFrameElement try { const settings = await browser.storage.local.get('DarkMode') as SettingsState - if (settings.DarkMode) { - applyDarkModeToIframe(iframe, cssLink) - } + applyDarkModeToIframe(iframe, cssLink, settings.DarkMode); } catch (error) { console.error('Error applying dark mode:', error) } } } } - }) + }); if (document.body) { observer.observe(document.body, { @@ -449,17 +448,14 @@ async function updateIframesWithDarkMode(): Promise { } } -function applyDarkModeToIframe(iframe: HTMLIFrameElement, cssLink: HTMLStyleElement): void { +function applyDarkModeToIframe(iframe: HTMLIFrameElement, cssLink: HTMLStyleElement, DarkMode: boolean): void { const iframeDocument = iframe.contentDocument if (!iframeDocument) return - const body = iframeDocument.body - if (body && body.style.color !== 'white') { - body.style.color = 'white' - } + if (DarkMode) iframeDocument.body.classList.add('dark') const head = iframeDocument.head - if (head && !head.innerHTML.includes('iframe.css')) { + if (head && !head.innerHTML.includes('iframecss')) { head.appendChild(cssLink) } } diff --git a/src/css/iframe.scss b/src/css/iframe.scss index 4069541d..5b5ef625 100644 --- a/src/css/iframe.scss +++ b/src/css/iframe.scss @@ -15,89 +15,99 @@ * along with EvenBetterSEQTA. If not, see . */ -html, p, div, span { - color: white !important; - text-shadow: 1px 1px 2px #161616, 0 0 1em #161616; + body { + background: transparent; } -body { - background-color: transparent !important; -} +.dark { + p, + div, + span { + color: white !important; + text-shadow: 1px 1px 2px #161616, 0 0 1em #161616; + } -blockquote.forward > .preamble { - color: rgba(255, 255, 255, 0.7) !important; - - > .date > .value, blockquote.forward > .preamble > .sender > .value { + body { + background-color: transparent !important; + } + + blockquote.forward > .preamble { + color: rgba(255, 255, 255, 0.7) !important; + + > p, + div, + span { + background: transparent !important; + } + + > .date > .value, + blockquote.forward > .preamble > .sender > .value { + color: rgba(255, 255, 255, 0.7) !important; + } + + > .date > .label, + blockquote.forward > .preamble > .sender > .label { + color: rgba(255, 255, 255, 0.7) !important; + } + } + + [bgcolor="#ffffff"] > * { + color: black !important; + text-shadow: none !important; + } + + table th { + background-color: #161616; + } + + ::-webkit-scrollbar { + width: 10px; + height: 10px; + transition: 1s; + } + + ::-webkit-scrollbar-track { + background-color: transparent; + } + + ::-webkit-scrollbar-thumb { + border-radius: 10rem !important; + } + + ::-webkit-scrollbar-corner { + background: none; + } + + .forward { + border-radius: 1rem; + } + + .preamble { + border-top-left-radius: 1rem; + border-top-right-radius: 1rem; + } + + blockquote.forward > .preamble { color: rgba(255, 255, 255, 0.7) !important; } - - > .date > .label, blockquote.forward > .preamble > .sender > .label { + + blockquote.forward > .preamble > .date > .value, + blockquote.forward > .preamble > .sender > .value { + color: rgba(255, 255, 255, 0.7) !important; + } + blockquote.forward > .preamble > .date > .label, + blockquote.forward > .preamble > .sender > .label { color: rgba(255, 255, 255, 0.7) !important; } -} -[bgcolor="#ffffff"] { - color: black; -} + #backgroundTable > * { + background-color: #161616; + border: none; + } -table th { - background-color: #161616; -} - -::-webkit-scrollbar { - width: 10px; - height: 10px; - transition: 1s; -} - -::-webkit-scrollbar-track { - background-color: transparent; -} - -::-webkit-scrollbar-thumb { - border-radius: 10rem !important; -} - -::-webkit-scrollbar-corner { - background: none; -} - -.forward { - border-radius: 1rem; -} - -.preamble { - border-top-left-radius: 1rem; - border-top-right-radius: 1rem; -} - -html, p, div, span { - color: white !important; - background-color: #232323 -} -body { - background-color: #232323; -} -blockquote.forward > .preamble { - color: rgba(255, 255, 255, 0.7) !important; -} - -blockquote.forward > .preamble > .date > .value, -blockquote.forward > .preamble > .sender > .value { - color: rgba(255, 255, 255, 0.7) !important; -} -blockquote.forward > .preamble > .date > .label, -blockquote.forward > .preamble > .sender > .label { - color: rgba(255, 255, 255, 0.7) !important; -} - -#backgroundTable > * { - background-color: #161616; - border: none; -} - -.userHTML>div>a:not(.resource) { - color: #06b4fc; - text-decoration: underline; - transition: text-shadow 0.5s; + .userHTML > div > a:not(.resource) { + color: #06b4fc; + text-decoration: underline; + transition: text-shadow 0.5s; + } } \ No newline at end of file diff --git a/src/css/iframe.ts b/src/css/iframe.ts deleted file mode 100644 index cc616640..00000000 --- a/src/css/iframe.ts +++ /dev/null @@ -1 +0,0 @@ -import './iframe.scss'; diff --git a/src/seqta/ui/colors/Manager.ts b/src/seqta/ui/colors/Manager.ts index 73f8f020..a8c68782 100644 --- a/src/seqta/ui/colors/Manager.ts +++ b/src/seqta/ui/colors/Manager.ts @@ -6,7 +6,6 @@ import { SettingsState } from '../../../types/storage'; import darkLogo from 'url:../../../resources/icons/betterseqta-light-full.png'; import lightLogo from 'url:../../../resources/icons/betterseqta-dark-full.png'; -import iFrameCSS from 'url:../../../css/iframe.scss'; // Helper functions const setCSSVar = (varName: any, value: any) => document.documentElement.style.setProperty(varName, value); @@ -71,7 +70,6 @@ export function updateAllColors(storedSetting: any, newColor = null) { } let alliframes = document.getElementsByTagName('iframe'); - let fileref = iFrameCSS; for (let i = 0; i < alliframes.length; i++) { const element = alliframes[i]; @@ -80,11 +78,11 @@ export function updateAllColors(storedSetting: any, newColor = null) { continue; } - (element.contentDocument!.documentElement.childNodes[1] as HTMLIFrameElement).style.color = - DarkMode ? 'white' : 'black'; - element.contentDocument!.documentElement.firstChild!.appendChild( - fileref, - ); + if (DarkMode) { + element.contentDocument?.body.classList.add('dark'); + } else { + element.contentDocument?.body.classList.remove('dark'); + } } }