BetterSEQTA/BetterSEQTA-Plus
1
0
Fork 0
mirror of https://github.com/BetterSEQTA/BetterSEQTA-Plus.git synced 2026-06-06 03:34:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix light-dark mode

Browse Source
This commit is contained in:
SethBurkart123
2023-10-20 18:17:38 +11:00
parent 7b5db2d89f
commit b28e0e8732
3 changed files with 100 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/SEQTA.js
+36 -112
View File
@@ -14,7 +14,6 @@ import StorageListener from "./seqta/utils/StorageListener.js";
import { updateBgDurations } from "./seqta/ui/Animation.js"; import { updateBgDurations } from "./seqta/ui/Animation.js";
import { updateAllColors } from "./seqta/ui/colors/Manager.js"; import { updateAllColors } from "./seqta/ui/colors/Manager.js";
import { appendBackgroundToUI } from "./seqta/ui/ImageBackgrounds.js"; import { appendBackgroundToUI } from "./seqta/ui/ImageBackgrounds.js";
import { lightenAndPaleColor } from "./seqta/ui/colors/lightenAndPaleColor.js";
export let isChrome = window.chrome; export let isChrome = window.chrome;
let SettingsClicked = false; let SettingsClicked = false;
@@ -308,7 +307,7 @@ async function RunColourCheck(element) {
} }
} }
function GetiFrameCSSElement() { export function GetiFrameCSSElement() {
var cssFile = chrome.runtime.getURL("inject/iframe.css"); var cssFile = chrome.runtime.getURL("inject/iframe.css");
var fileref = document.createElement("link"); var fileref = document.createElement("link");
fileref.setAttribute("rel", "stylesheet"); fileref.setAttribute("rel", "stylesheet");
@@ -403,8 +402,8 @@ function SortMessagePageItems(messagesParentElement) {
}); });
} }
function LoadPageElements() { async function LoadPageElements() {
AddBetterSEQTAElements(true); await AddBetterSEQTAElements(true);
var sublink = window.location.href.split("/")[4]; var sublink = window.location.href.split("/")[4];
switch (sublink) { switch (sublink) {
case "news": case "news":
@@ -1094,7 +1093,7 @@ function ReplaceMenuSVG(element, svg) {
item.insertBefore(newsvg, item.firstChild); item.insertBefore(newsvg, item.firstChild);
} }
function AddBetterSEQTAElements(toggle) { async function AddBetterSEQTAElements(toggle) {
var code = document.getElementsByClassName("code")[0]; var code = document.getElementsByClassName("code")[0];
// Replaces students code with the version of BetterSEQTA // Replaces students code with the version of BetterSEQTA
if (code != null) { if (code != null) {
@@ -1275,114 +1274,38 @@ function AddBetterSEQTAElements(toggle) {
var ContentDiv = document.getElementById("content"); var ContentDiv = document.getElementById("content");
ContentDiv.append(SettingsButton.firstChild); ContentDiv.append(SettingsButton.firstChild);
chrome.storage.local.get(["DarkMode"], function (result) { const result = await new Promise(resolve => {
DarkMode = result.DarkMode; chrome.storage.local.get(null, resolve);
});
let tooltipstring = GetLightDarkModeString(DarkMode);
var LightDarkModeButton = stringToHTML( const DarkMode = result.DarkMode;
String.raw`<button class="addedButton DarkLightButton tooltip" id="LightDarkModeButton"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px);" preserveAspectRatio="xMidYMid meet"></svg><div class="tooltiptext topmenutooltip" id="darklighttooliptext">${tooltipstring}</div></button>`, const tooltipString = GetLightDarkModeString(DarkMode);
); const svgContent = DarkMode ? "<defs><clipPath id=\"__lottie_element_80\"><rect width=\"24\" height=\"24\" x=\"0\" y=\"0\"></rect></clipPath></defs><g clip-path=\"url(#__lottie_element_80)\"><g style=\"display: block;\" transform=\"matrix(1,0,0,1,12,12)\" opacity=\"1\"><g opacity=\"1\" transform=\"matrix(1,0,0,1,0,0)\"><path fill-opacity=\"1\" d=\" M0,-4 C-2.2100000381469727,-4 -4,-2.2100000381469727 -4,0 C-4,2.2100000381469727 -2.2100000381469727,4 0,4 C2.2100000381469727,4 4,2.2100000381469727 4,0 C4,-2.2100000381469727 2.2100000381469727,-4 0,-4z\"></path></g></g><g style=\"display: block;\" transform=\"matrix(1,0,0,1,12,12)\" opacity=\"1\"><g opacity=\"1\" transform=\"matrix(1,0,0,1,0,0)\"><path fill-opacity=\"1\" d=\" M0,6 C-3.309999942779541,6 -6,3.309999942779541 -6,0 C-6,-3.309999942779541 -3.309999942779541,-6 0,-6 C3.309999942779541,-6 6,-3.309999942779541 6,0 C6,3.309999942779541 3.309999942779541,6 0,6z M8,-3.309999942779541 C8,-3.309999942779541 8,-8 8,-8 C8,-8 3.309999942779541,-8 3.309999942779541,-8 C3.309999942779541,-8 0,-11.3100004196167 0,-11.3100004196167 C0,-11.3100004196167 -3.309999942779541,-8 -3.309999942779541,-8 C-3.309999942779541,-8 -8,-8 -8,-8 C-8,-8 -8,-3.309999942779541 -8,-3.309999942779541 C-8,-3.309999942779541 -11.3100004196167,0 -11.3100004196167,0 C-11.3100004196167,0 -8,3.309999942779541 -8,3.309999942779541 C-8,3.309999942779541 -8,8 -8,8 C-8,8 -3.309999942779541,8 -3.309999942779541,8 C-3.309999942779541,8 0,11.3100004196167 0,11.3100004196167 C0,11.3100004196167 3.309999942779541,8 3.309999942779541,8 C3.309999942779541,8 8,8 8,8 C8,8 8,3.309999942779541 8,3.309999942779541 C8,3.309999942779541 11.3100004196167,0 11.3100004196167,0 C11.3100004196167,0 8,-3.309999942779541 8,-3.309999942779541z\"></path></g></g></g>" :
ContentDiv.append(LightDarkModeButton.firstChild); "<defs><clipPath id=\"__lottie_element_263\"><rect width=\"24\" height=\"24\" x=\"0\" y=\"0\"></rect></clipPath></defs><g clip-path=\"url(#__lottie_element_263)\"><g style=\"display: block;\" transform=\"matrix(1.5,0,0,1.5,7,12)\" opacity=\"1\"><g opacity=\"1\" transform=\"matrix(1,0,0,1,0,0)\"><path fill-opacity=\"1\" d=\" M0,-4 C-2.2100000381469727,-4 -1.2920000553131104,-2.2100000381469727 -1.2920000553131104,0 C-1.2920000553131104,2.2100000381469727 -2.2100000381469727,4 0,4 C2.2100000381469727,4 4,2.2100000381469727 4,0 C4,-2.2100000381469727 2.2100000381469727,-4 0,-4z\"></path></g></g><g style=\"display: block;\" transform=\"matrix(-1,0,0,-1,12,12)\" opacity=\"1\"><g opacity=\"1\" transform=\"matrix(1,0,0,1,0,0)\"><path fill-opacity=\"1\" d=\" M0,6 C-3.309999942779541,6 -6,3.309999942779541 -6,0 C-6,-3.309999942779541 -3.309999942779541,-6 0,-6 C3.309999942779541,-6 6,-3.309999942779541 6,0 C6,3.309999942779541 3.309999942779541,6 0,6z M8,-3.309999942779541 C8,-3.309999942779541 8,-8 8,-8 C8,-8 3.309999942779541,-8 3.309999942779541,-8 C3.309999942779541,-8 0,-11.3100004196167 0,-11.3100004196167 C0,-11.3100004196167 -3.309999942779541,-8 -3.309999942779541,-8 C-3.309999942779541,-8 -8,-8 -8,-8 C-8,-8 -8,-3.309999942779541 -8,-3.309999942779541 C-8,-3.309999942779541 -11.3100004196167,0 -11.3100004196167,0 C-11.3100004196167,0 -8,3.309999942779541 -8,3.309999942779541 C-8,3.309999942779541 -8,8 -8,8 C-8,8 -3.309999942779541,8 -3.309999942779541,8 C-3.309999942779541,8 0,11.3100004196167 0,11.3100004196167 C0,11.3100004196167 3.309999942779541,8 3.309999942779541,8 C3.309999942779541,8 8,8 8,8 C8,8 8,3.309999942779541 8,3.309999942779541 C8,3.309999942779541 11.3100004196167,0 11.3100004196167,0 C11.3100004196167,0 8,-3.309999942779541 8,-3.309999942779541z\"></path></g></g></g>";
let LightDarkModeElement = document.getElementById("LightDarkModeButton"); const LightDarkModeButton = stringToHTML(`
<button class="addedButton DarkLightButton tooltip" id="LightDarkModeButton">
if (DarkMode) { <svg xmlns="http://www.w3.org/2000/svg">${svgContent}</svg>
LightDarkModeElement.firstChild.innerHTML = "<defs><clipPath id=\"__lottie_element_80\"><rect width=\"24\" height=\"24\" x=\"0\" y=\"0\"></rect></clipPath></defs><g clip-path=\"url(#__lottie_element_80)\"><g style=\"display: block;\" transform=\"matrix(1,0,0,1,12,12)\" opacity=\"1\"><g opacity=\"1\" transform=\"matrix(1,0,0,1,0,0)\"><path fill-opacity=\"1\" d=\" M0,-4 C-2.2100000381469727,-4 -4,-2.2100000381469727 -4,0 C-4,2.2100000381469727 -2.2100000381469727,4 0,4 C2.2100000381469727,4 4,2.2100000381469727 4,0 C4,-2.2100000381469727 2.2100000381469727,-4 0,-4z\"></path></g></g><g style=\"display: block;\" transform=\"matrix(1,0,0,1,12,12)\" opacity=\"1\"><g opacity=\"1\" transform=\"matrix(1,0,0,1,0,0)\"><path fill-opacity=\"1\" d=\" M0,6 C-3.309999942779541,6 -6,3.309999942779541 -6,0 C-6,-3.309999942779541 -3.309999942779541,-6 0,-6 C3.309999942779541,-6 6,-3.309999942779541 6,0 C6,3.309999942779541 3.309999942779541,6 0,6z M8,-3.309999942779541 C8,-3.309999942779541 8,-8 8,-8 C8,-8 3.309999942779541,-8 3.309999942779541,-8 C3.309999942779541,-8 0,-11.3100004196167 0,-11.3100004196167 C0,-11.3100004196167 -3.309999942779541,-8 -3.309999942779541,-8 C-3.309999942779541,-8 -8,-8 -8,-8 C-8,-8 -8,-3.309999942779541 -8,-3.309999942779541 C-8,-3.309999942779541 -11.3100004196167,0 -11.3100004196167,0 C-11.3100004196167,0 -8,3.309999942779541 -8,3.309999942779541 C-8,3.309999942779541 -8,8 -8,8 C-8,8 -3.309999942779541,8 -3.309999942779541,8 C-3.309999942779541,8 0,11.3100004196167 0,11.3100004196167 C0,11.3100004196167 3.309999942779541,8 3.309999942779541,8 C3.309999942779541,8 8,8 8,8 C8,8 8,3.309999942779541 8,3.309999942779541 C8,3.309999942779541 11.3100004196167,0 11.3100004196167,0 C11.3100004196167,0 8,-3.309999942779541 8,-3.309999942779541z\"></path></g></g></g>"; <div class="tooltiptext topmenutooltip" id="darklighttooliptext">${tooltipString}</div>
document.documentElement.style.removeProperty("--better-pale"); </button>
} else { `);
LightDarkModeElement.firstChild.innerHTML = "<defs><clipPath id=\"__lottie_element_263\"><rect width=\"24\" height=\"24\" x=\"0\" y=\"0\"></rect></clipPath></defs><g clip-path=\"url(#__lottie_element_263)\"><g style=\"display: block;\" transform=\"matrix(1.5,0,0,1.5,7,12)\" opacity=\"1\"><g opacity=\"1\" transform=\"matrix(1,0,0,1,0,0)\"><path fill-opacity=\"1\" d=\" M0,-4 C-2.2100000381469727,-4 -1.2920000553131104,-2.2100000381469727 -1.2920000553131104,0 C-1.2920000553131104,2.2100000381469727 -2.2100000381469727,4 0,4 C2.2100000381469727,4 4,2.2100000381469727 4,0 C4,-2.2100000381469727 2.2100000381469727,-4 0,-4z\"></path></g></g><g style=\"display: block;\" transform=\"matrix(-1,0,0,-1,12,12)\" opacity=\"1\"><g opacity=\"1\" transform=\"matrix(1,0,0,1,0,0)\"><path fill-opacity=\"1\" d=\" M0,6 C-3.309999942779541,6 -6,3.309999942779541 -6,0 C-6,-3.309999942779541 -3.309999942779541,-6 0,-6 C3.309999942779541,-6 6,-3.309999942779541 6,0 C6,3.309999942779541 3.309999942779541,6 0,6z M8,-3.309999942779541 C8,-3.309999942779541 8,-8 8,-8 C8,-8 3.309999942779541,-8 3.309999942779541,-8 C3.309999942779541,-8 0,-11.3100004196167 0,-11.3100004196167 C0,-11.3100004196167 -3.309999942779541,-8 -3.309999942779541,-8 C-3.309999942779541,-8 -8,-8 -8,-8 C-8,-8 -8,-3.309999942779541 -8,-3.309999942779541 C-8,-3.309999942779541 -11.3100004196167,0 -11.3100004196167,0 C-11.3100004196167,0 -8,3.309999942779541 -8,3.309999942779541 C-8,3.309999942779541 -8,8 -8,8 C-8,8 -3.309999942779541,8 -3.309999942779541,8 C-3.309999942779541,8 0,11.3100004196167 0,11.3100004196167 C0,11.3100004196167 3.309999942779541,8 3.309999942779541,8 C3.309999942779541,8 8,8 8,8 C8,8 8,3.309999942779541 8,3.309999942779541 C8,3.309999942779541 11.3100004196167,0 11.3100004196167,0 C11.3100004196167,0 8,-3.309999942779541 8,-3.309999942779541z\"></path></g></g></g>";
try { ContentDiv.append(LightDarkModeButton.firstChild);
chrome.storage.local.get(null, function (result) {
document.documentElement.style.setProperty( updateAllColors(DarkMode, result.selectedColor);
"--better-pale",
lightenAndPaleColor(result.selectedColor), document.getElementById("LightDarkModeButton").addEventListener("click", async () => {
); const result = await new Promise(resolve => {
}); chrome.storage.local.get(null, resolve);
} catch (err) {
console.log(err);
}
}
let darklightText = document.getElementById("darklighttooliptext");
LightDarkModeElement.addEventListener("click", function () {
chrome.storage.local.get(["DarkMode"], function (result) {
DarkMode = result.DarkMode;
let alliframes = document.getElementsByTagName("iframe");
let fileref = GetiFrameCSSElement();
if (!DarkMode) {
document.documentElement.style.setProperty(
"--background-primary",
"#232323",
);
document.documentElement.style.setProperty(
"--background-secondary",
"#1a1a1a",
);
document.documentElement.style.setProperty(
"--text-primary",
"white",
);
document.documentElement.style.removeProperty("--better-pale");
LightDarkModeElement.firstChild.innerHTML = "<defs><clipPath id=\"__lottie_element_80\"><rect width=\"24\" height=\"24\" x=\"0\" y=\"0\"></rect></clipPath></defs><g clip-path=\"url(#__lottie_element_80)\"><g style=\"display: block;\" transform=\"matrix(1,0,0,1,12,12)\" opacity=\"1\"><g opacity=\"1\" transform=\"matrix(1,0,0,1,0,0)\"><path fill-opacity=\"1\" d=\" M0,-4 C-2.2100000381469727,-4 -4,-2.2100000381469727 -4,0 C-4,2.2100000381469727 -2.2100000381469727,4 0,4 C2.2100000381469727,4 4,2.2100000381469727 4,0 C4,-2.2100000381469727 2.2100000381469727,-4 0,-4z\"></path></g></g><g style=\"display: block;\" transform=\"matrix(1,0,0,1,12,12)\" opacity=\"1\"><g opacity=\"1\" transform=\"matrix(1,0,0,1,0,0)\"><path fill-opacity=\"1\" d=\" M0,6 C-3.309999942779541,6 -6,3.309999942779541 -6,0 C-6,-3.309999942779541 -3.309999942779541,-6 0,-6 C3.309999942779541,-6 6,-3.309999942779541 6,0 C6,3.309999942779541 3.309999942779541,6 0,6z M8,-3.309999942779541 C8,-3.309999942779541 8,-8 8,-8 C8,-8 3.309999942779541,-8 3.309999942779541,-8 C3.309999942779541,-8 0,-11.3100004196167 0,-11.3100004196167 C0,-11.3100004196167 -3.309999942779541,-8 -3.309999942779541,-8 C-3.309999942779541,-8 -8,-8 -8,-8 C-8,-8 -8,-3.309999942779541 -8,-3.309999942779541 C-8,-3.309999942779541 -11.3100004196167,0 -11.3100004196167,0 C-11.3100004196167,0 -8,3.309999942779541 -8,3.309999942779541 C-8,3.309999942779541 -8,8 -8,8 C-8,8 -3.309999942779541,8 -3.309999942779541,8 C-3.309999942779541,8 0,11.3100004196167 0,11.3100004196167 C0,11.3100004196167 3.309999942779541,8 3.309999942779541,8 C3.309999942779541,8 8,8 8,8 C8,8 8,3.309999942779541 8,3.309999942779541 C8,3.309999942779541 11.3100004196167,0 11.3100004196167,0 C11.3100004196167,0 8,-3.309999942779541 8,-3.309999942779541z\"></path></g></g></g>";
for (let i = 0; i < alliframes.length; i++) {
const element = alliframes[i];
if (element.getAttribute("excludeDarkCheck") == "true") {
continue;
}
console.log(element);
console.log(element.contentDocument.documentElement);
element.contentDocument.documentElement.childNodes[1].style.color =
"white";
element.contentDocument.documentElement.firstChild.appendChild(
fileref,
);
}
} else {
document.documentElement.style.setProperty(
"--background-primary",
"#ffffff",
);
document.documentElement.style.setProperty(
"--background-secondary",
"#e5e7eb",
);
document.documentElement.style.setProperty(
"--text-primary",
"black",
);
try {
chrome.storage.local.get(null, function (result) {
document.documentElement.style.setProperty(
"--better-pale",
lightenAndPaleColor(result.selectedColor),
);
});
} catch (err) {
console.log(err);
}
LightDarkModeElement.firstChild.innerHTML = "<defs><clipPath id=\"__lottie_element_263\"><rect width=\"24\" height=\"24\" x=\"0\" y=\"0\"></rect></clipPath></defs><g clip-path=\"url(#__lottie_element_263)\"><g style=\"display: block;\" transform=\"matrix(1.5,0,0,1.5,7,12)\" opacity=\"1\"><g opacity=\"1\" transform=\"matrix(1,0,0,1,0,0)\"><path fill-opacity=\"1\" d=\" M0,-4 C-2.2100000381469727,-4 -1.2920000553131104,-2.2100000381469727 -1.2920000553131104,0 C-1.2920000553131104,2.2100000381469727 -2.2100000381469727,4 0,4 C2.2100000381469727,4 4,2.2100000381469727 4,0 C4,-2.2100000381469727 2.2100000381469727,-4 0,-4z\"></path></g></g><g style=\"display: block;\" transform=\"matrix(-1,0,0,-1,12,12)\" opacity=\"1\"><g opacity=\"1\" transform=\"matrix(1,0,0,1,0,0)\"><path fill-opacity=\"1\" d=\" M0,6 C-3.309999942779541,6 -6,3.309999942779541 -6,0 C-6,-3.309999942779541 -3.309999942779541,-6 0,-6 C3.309999942779541,-6 6,-3.309999942779541 6,0 C6,3.309999942779541 3.309999942779541,6 0,6z M8,-3.309999942779541 C8,-3.309999942779541 8,-8 8,-8 C8,-8 3.309999942779541,-8 3.309999942779541,-8 C3.309999942779541,-8 0,-11.3100004196167 0,-11.3100004196167 C0,-11.3100004196167 -3.309999942779541,-8 -3.309999942779541,-8 C-3.309999942779541,-8 -8,-8 -8,-8 C-8,-8 -8,-3.309999942779541 -8,-3.309999942779541 C-8,-3.309999942779541 -11.3100004196167,0 -11.3100004196167,0 C-11.3100004196167,0 -8,3.309999942779541 -8,3.309999942779541 C-8,3.309999942779541 -8,8 -8,8 C-8,8 -3.309999942779541,8 -3.309999942779541,8 C-3.309999942779541,8 0,11.3100004196167 0,11.3100004196167 C0,11.3100004196167 3.309999942779541,8 3.309999942779541,8 C3.309999942779541,8 8,8 8,8 C8,8 8,3.309999942779541 8,3.309999942779541 C8,3.309999942779541 11.3100004196167,0 11.3100004196167,0 C11.3100004196167,0 8,-3.309999942779541 8,-3.309999942779541z\"></path></g></g></g>";
for (let i = 0; i < alliframes.length; i++) {
const element = alliframes[i];
if (element.getAttribute("excludeDarkCheck") == "true") {
continue;
}
element.contentDocument.documentElement.childNodes[1].style.color =
"black";
element.contentDocument.documentElement.firstChild.lastChild.remove();
}
}
tooltipstring = GetLightDarkModeString(!result.DarkMode);
darklightText.innerText = tooltipstring;
chrome.storage.local.set({ DarkMode: !result.DarkMode });
});
}); });
const newDarkMode = !result.DarkMode;
chrome.storage.local.set({ DarkMode: newDarkMode });
updateAllColors(newDarkMode, result.selectedColor);
const darklightText = document.getElementById("darklighttooliptext");
darklightText.innerText = GetLightDarkModeString(newDarkMode);
}); });
} else { } else {
// Creates settings and dashboard buttons next to alerts // Creates settings and dashboard buttons next to alerts
@@ -1395,6 +1318,7 @@ function AddBetterSEQTAElements(toggle) {
var AddedSettings = document.getElementById("AddedSettings"); var AddedSettings = document.getElementById("AddedSettings");
var extensionsettings = document.getElementById("ExtensionPopup"); var extensionsettings = document.getElementById("ExtensionPopup");
AddedSettings.addEventListener("click", function () { AddedSettings.addEventListener("click", function () {
extensionsettings.classList.toggle("hide"); extensionsettings.classList.toggle("hide");
SettingsClicked = true; SettingsClicked = true;
src/inject/injected.css
+35 -4
View File
@@ -35,6 +35,7 @@ html {
#main { #main {
color: var(--text-primary); color: var(--text-primary);
padding-top: 5rem;
} }
.forums { .forums {
@@ -143,7 +144,6 @@ ul.magicDelete > li.deleting {
color: var(--text-color); color: var(--text-color);
border-right: none; border-right: none;
font-family: Rubik, sans-serif !important; font-family: Rubik, sans-serif !important;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
z-index: 11 !important; z-index: 11 !important;
} }
@@ -474,12 +474,31 @@ div > ol:has(.uiFileHandlerWrapper) {
min-height: 8rem !important; min-height: 8rem !important;
} }
.student #menu > ul::before { /* .student #menu::before {
background: var(--better-main);
top: 0;
position: sticky;
height: 16px;
} */
/* .student #menu > ul::before {
background-image: var(--betterseqta-logo); background-image: var(--betterseqta-logo);
position: -webkit-sticky; /* Safari */ position: -webkit-sticky;
position: sticky; position: sticky;
top: 0; top: 0;
background-color: var(--better-main); background-color: var(--background-primary);
height: 69.5px;
webkit-box-shadow: 0px 5px 16px 6px rgba(0, 0, 0, 0.2) !important;
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
} */
.student #menu > ul::before {
background: none;
height: 0;
}
.student #menu > ul {
margin-top: 70px;
} }
.assessmentsWrapper .message { .assessmentsWrapper .message {
@@ -586,6 +605,14 @@ div > ol:has(.uiFileHandlerWrapper) {
--colour: unset; --colour: unset;
} }
/* #title span {
display: none;
} */
#editmenu {
display: none;
}
#title { #title {
background: var(--background-primary); background: var(--background-primary);
color: var(--text-primary); color: var(--text-primary);
@@ -595,6 +622,10 @@ div > ol:has(.uiFileHandlerWrapper) {
border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1);
font-weight: 500 !important; font-weight: 500 !important;
z-index: 1; z-index: 1;
position: fixed;
top: 0;
left: 0;
width: 100%;
} }
.bg { .bg {
src/seqta/ui/colors/Manager.js
+29 -4
View File
@@ -1,5 +1,5 @@
/* global chrome */ /* global chrome */
import { GetThresholdOfColor } from "../../../SEQTA.js"; import { GetThresholdOfColor, GetiFrameCSSElement } from "../../../SEQTA.js";
import { lightenAndPaleColor } from "./lightenAndPaleColor.js"; import { lightenAndPaleColor } from "./lightenAndPaleColor.js";
import ColorLuminance from "./ColorLuminance.js"; import ColorLuminance from "./ColorLuminance.js";
@@ -33,13 +33,19 @@ export function updateAllColors(storedSetting, newColor = null) {
modeProps = DarkMode ? { modeProps = DarkMode ? {
"--background-primary": "#232323", "--background-primary": "#232323",
"--background-secondary": "#1a1a1a", "--background-secondary": "#1a1a1a",
"--text-primary": "white" "--text-primary": "white",
"--betterseqta-logo": `url(${getChromeURL("icons/betterseqta-light-full.png")})`
} : { } : {
"--background-primary": "#ffffff", "--background-primary": "#ffffff",
"--background-secondary": "#e5e7eb", "--background-secondary": "#e5e7eb",
"--text-primary": "black", "--text-primary": "black",
"--better-pale": lightenAndPaleColor(selectedColor) "--better-pale": lightenAndPaleColor(selectedColor),
"--betterseqta-logo": `url(${getChromeURL("icons/betterseqta-dark-full.png")})`
}; };
if (DarkMode) {
document.documentElement.style.removeProperty("--better-pale");
}
} }
// Dynamic properties, always applied // Dynamic properties, always applied
@@ -47,7 +53,6 @@ export function updateAllColors(storedSetting, newColor = null) {
const isBright = rgbThreshold > 210; const isBright = rgbThreshold > 210;
const dynamicProps = { const dynamicProps = {
"--text-color": isBright ? "black" : "white", "--text-color": isBright ? "black" : "white",
"--betterseqta-logo": `url(${getChromeURL(`icons/betterseqta-${isBright ? "dark" : "light"}-full.png`)})`,
"--better-light": selectedColor === "#ffffff" ? "#b7b7b7" : ColorLuminance(selectedColor, 0.95) "--better-light": selectedColor === "#ffffff" ? "#b7b7b7" : ColorLuminance(selectedColor, 0.95)
}; };
@@ -58,6 +63,26 @@ export function updateAllColors(storedSetting, newColor = null) {
if (DarkMode !== null) { if (DarkMode !== null) {
document.querySelector("link[rel*='icon']").href = getChromeURL("icons/icon-48.png"); document.querySelector("link[rel*='icon']").href = getChromeURL("icons/icon-48.png");
} }
let alliframes = document.getElementsByTagName("iframe");
let fileref = GetiFrameCSSElement();
for (let i = 0; i < alliframes.length; i++) {
const element = alliframes[i];
if (element.getAttribute("excludeDarkCheck") == "true") {
continue;
}
console.log(element);
console.log(element.contentDocument.documentElement);
element.contentDocument.documentElement.childNodes[1].style.color =
DarkMode ? "black" : "white";
element.contentDocument.documentElement.firstChild.appendChild(
fileref,
);
}
} }
export function getDarkMode() { export function getDarkMode() {