diff --git a/src/SEQTA.ts b/src/SEQTA.ts index b1c75c2f..ae9ecca6 100644 --- a/src/SEQTA.ts +++ b/src/SEQTA.ts @@ -30,6 +30,10 @@ import stringToHTML from './seqta/utils/stringToHTML' import { updateAllColors } from './seqta/ui/colors/Manager' import { updateBgDurations } from './seqta/ui/Animation' +/* import injected from 'url:./css/injected.scss'; + */ /* import documentLoad from 'url:./css/documentload.scss'; */ + + declare global { interface Window { chrome?: any @@ -62,8 +66,18 @@ document.addEventListener( import('./css/injected.scss') import('./css/documentload.scss') - /* const link = GetCSSElement() - document.getElementsByTagName('html')[0].appendChild(link); */ + /* const injectedCSS = document.createElement('link') + injectedCSS.setAttribute('rel', 'stylesheet') + injectedCSS.setAttribute('type', 'text/css') + injectedCSS.setAttribute('href', injected) */ + + /* const documentLoadCSS = document.createElement('link') + documentLoadCSS.setAttribute('rel', 'stylesheet') + documentLoadCSS.setAttribute('type', 'text/css') + documentLoadCSS.setAttribute('href', documentLoad) */ + + /* document.head.appendChild(documentLoadCSS) */ + /* document.head.appendChild(injectedCSS) */ enableCurrentTheme() try { diff --git a/src/css/injected.scss b/src/css/injected.scss index 889bb7dd..5f314755 100644 --- a/src/css/injected.scss +++ b/src/css/injected.scss @@ -525,7 +525,7 @@ div > ol:has(.uiFileHandlerWrapper) { #menu ul { width: 280px; // TODO: I know its 10px larger than its parent, but for some reason there is a 10px right padding that doesn't show up properly in devtools??? } -.student #menu > ul::before { +/* .student #menu > ul::before { background-image: url(data-url:../resources/icons/betterseqta-dark-full.png); position: -webkit-sticky; position: sticky; @@ -536,7 +536,7 @@ div > ol:has(.uiFileHandlerWrapper) { } .dark .student #menu > ul::before { background-image: url(data-url:../resources/icons/betterseqta-light-full.png); -} +} */ .assessmentsWrapper .message { display: none; @@ -685,12 +685,9 @@ div > ol:has(.uiFileHandlerWrapper) { left: 0; width: 100%; } -.dark #title::before { - background-image: url(data-url:../resources/icons/betterseqta-light-full.png); -} #title::before { - background-image: url(data-url:../resources/icons/betterseqta-dark-full.png); + background-image: var(--betterseqta-logo); background-position: left; background-repeat: no-repeat; background-size: auto 48px; @@ -1682,7 +1679,7 @@ li.MessageList__unread___3imtO { content: ""; width: 14px; height: 12px; - background-image: url("data-url:../resources/icons/betterseqta-light-outline.png"); + background-image: url("../resources/icons/betterseqta-light-outline.png"); display: inline-block; background-size: 18px 18px; color: #fff; diff --git a/src/seqta/ui/colors/Manager.ts b/src/seqta/ui/colors/Manager.ts index 4667f499..73f8f020 100644 --- a/src/seqta/ui/colors/Manager.ts +++ b/src/seqta/ui/colors/Manager.ts @@ -4,6 +4,8 @@ import { lightenAndPaleColor } from './lightenAndPaleColor'; import ColorLuminance from './ColorLuminance'; 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 @@ -37,9 +39,12 @@ export function updateAllColors(storedSetting: any, newColor = null) { // Mode-based properties, applied if storedSetting is provided let modeProps = {}; if (DarkMode !== null) { - if (!DarkMode) { - modeProps = { '--better-pale': lightenAndPaleColor(selectedColor) }; - } + modeProps = DarkMode ? { + '--betterseqta-logo': `url(${darkLogo})` + } : { + '--better-pale': lightenAndPaleColor(selectedColor), + '--betterseqta-logo': `url(${lightLogo})` + }; if (DarkMode) { document.documentElement.style.removeProperty('--better-pale');