updated themes + bug fixes

public/backgrounds/background.html

@@ -26,8 +26,6 @@
     <!-- Will be populated dynamically -->
   </div>
 
-  <script src="localForage.js"></script>
   <script src="background.js"></script>
-  <script src="themeManager.js"></script>
 </body>
 </html>

src/SEQTA.js

@@ -15,8 +15,8 @@ import { MessageHandler } from "./seqta/utils/MessageListener.js";
 import { updateBgDurations } from "./seqta/ui/Animation.js";
 import { updateAllColors } from "./seqta/ui/colors/Manager.js";
 import { appendBackgroundToUI } from "./seqta/ui/ImageBackgrounds.js";
-import { EnableThemes } from "./seqta/ui/Themes.js";
+/* import { EnableThemes } from "./seqta/ui/Themes.js";
-
+ */
 export let isChrome = window.chrome;
 let SettingsClicked = false;
 export let MenuOptionsOpen = false;
@@ -651,7 +651,6 @@ function main(storedSetting) {
   if (storedSetting.onoff) {
     console.log("[BetterSEQTA+] Enabled");
     InjectStyles();
-    EnableThemes();
     InjectCustomIcons();
     updateAllColors(storedSetting);
     ApplyCSSToHiddenMenuItems();
@@ -775,6 +774,7 @@ document.addEventListener(
 
       chrome.storage.local.get(null, function (items) {
         main(items);
+        /* EnableThemes(); */
       });
     }
     if (

src/inject/injected.css

@@ -1509,6 +1509,16 @@ ul {
   color: var(--text-primary) !important;
 }
 
+.dailycal>.content>.wrapper>.days>tbody>tr>td>.entriesWrapper>.entry[data-yiq='light'],
+.dailycal>.content>.wrapper>.days>tbody>tr>td>.entriesWrapper>.entry[data-yiq='light'] .title {
+  color: #fff !important;
+}
+
+.dailycal>.content>.wrapper>.days>tbody>tr>td>.entriesWrapper>.entry[data-yiq='dark'],
+.dailycal>.content>.wrapper>.days>tbody>tr>td>.entriesWrapper>.entry[data-yiq='dark'] .title {
+  color: #000 !important;
+}
+
 div.entry.class {
   width: 100% !important;
   border-radius: 0.25rem;
@@ -1781,7 +1791,7 @@ body {
   right: 47px;
   top: 14px;
   width: 42px;
-  z-index: 2;
+  z-index: 21;
 }
 
 #userActions > .details > .name::before {

src/seqta/ui/Themes.js

@@ -1,93 +1,98 @@
 import localforage from "localforage";
 
-// 🎨 Theme Management Functions 🎨
+// Utility function to fetch and parse JSON
+const fetchJSON = async (url) => {
+  const res = await fetch(url);
+  return await res.json();
+};
+
+// Utility function to fetch and parse text
+const fetchText = async (url) => {
+  const res = await fetch(url);
+  return await res.text();
+};
+
+// Check if the theme already exists in IndexedDB
+const themeExistsInDB = async (themeName) => {
+  return (await localforage.getItem(`css_${themeName}`)) !== null;
+};
 
 // Fetch theme details (CSS, images, className) from a given URL
-async function fetchThemeJSON(url) {
+const fetchThemeJSON = async (url) => {
-  console.log("Fetching theme from:", url);
+  const { css, images, className } = await fetchJSON(url);
-  const response = await fetch(url);
+  const cssText = await fetchText(css);
-  const data = await response.json();
+  return { css: cssText, images, className };
+};
 
-  const cssResponse = await fetch(data.css);
+// Save individual image to IndexedDB
-  const cssText = await cssResponse.text();
+const saveImageToDB = async (themeName, cssVar, imageUrl) => {
-  
+  try {
-  return {
+    const response = await fetch(imageUrl);
-    css: cssText,
+    if (!response.ok) throw new Error(response.statusText);
-    images: data.images,
+    const blob = await response.blob();
-    className: data.className
+    await localforage.setItem(`images_${themeName}_${cssVar}`, blob);
-  };
+  } catch (error) {
-}
+    console.error(`Failed to save image for ${cssVar}: ${error}`);
+  }
+};
 
 // Save theme details to storage via localForage
-async function saveToIndexedDB(theme, themeName) {
+const saveToIndexedDB = async (theme, themeName) => {
-  console.log("Saving theme to IndexedDB:", themeName);
+  await localforage.setItem(`css_${themeName}`, theme);
-  await localforage.setItem(`css_${themeName}`, { css: theme.css, className: theme.className, images: theme.images });
+  await Promise.all(Object.entries(theme.images).map(([cssVar, imageUrl]) => saveImageToDB(themeName, cssVar, imageUrl)));
-
+};
-  for (const [cssVar, imageUrl] of Object.entries(theme.images)) {
-    try {
-      const response = await fetch(imageUrl);
-      if (!response.ok) {
-        console.error(`Failed to fetch image: ${response.statusText}`);
-        continue;
-      }
-      const blob = await response.blob();
-      await localforage.setItem(`images_${themeName}_${cssVar}`, blob);
-    } catch (error) {
-      console.error(`Error while handling image for ${cssVar}: ${error}`);
-    }
-  }
-}
 
 // Apply theme from storage via localForage to document
-async function applyTheme(themeName) {
+const applyTheme = async (themeName) => {
-  console.log("Applying theme:", themeName);
+  const { css, className, images } = await localforage.getItem(`css_${themeName}`);
-  const themeData = await localforage.getItem(`css_${themeName}`);
+  console.log(`Applying theme ${themeName}`);
-  console.log("Retrieved Theme Data:", themeData); // Debugging info
+  console.log(`CSS: ${css}`);
+  console.log(`className: ${className}`);
+  console.log(`images: ${images}`);
   
+  // Apply CSS
   const style = document.createElement("style");
-  style.innerHTML = themeData.css;
+  style.innerHTML = css;
   document.head.appendChild(style);
 
-  document.body.className = themeData.className;
+  // Apply className
+  document.body.classList.add(className);
 
-  if (themeData.images) {
+  // Apply images
-    for (const cssVar of Object.keys(themeData.images)) {
+  if (images) {
-      const imageData = await localforage.getItem(`images_${themeName}_${cssVar}`);
+    await Promise.all(
-      console.log(imageData);
+      Object.keys(images).map(async (cssVar) => {
-      const objectURL = URL.createObjectURL(imageData);
+        const imageData = await localforage.getItem(`images_${themeName}_${cssVar}`);
-      console.log("Applying image:", objectURL);
+        const objectURL = URL.createObjectURL(imageData);
-      document.documentElement.style.setProperty(cssVar, `url(${objectURL})`);
+        document.documentElement.style.setProperty(cssVar, `url(${objectURL})`);
-    }
+      })
-  } else {
+    );
-    console.error("themeData.images is not defined!");
   }
-}
+};
-
-// Save available themes to localStorage
-function saveAvailableThemes(themeList) {
-  localStorage.setItem("availableThemes", JSON.stringify(themeList));
-}
-
-// Set the currently selected theme in localStorage
-function setSelectedTheme(themeName) {
-  localStorage.setItem("selectedTheme", themeName);
-}
 
 // 🚀 Main function to orchestrate everything 🚀
-export async function EnableThemes() {
+export const EnableThemes = async () => {
-  console.log("Enabling themes!");
   const availableThemes = [
     { name: "dark", url: "https://raw.githubusercontent.com/SethBurkart123/BetterSEQTA-Themes/main/themes/test.json" }
   ];
   
-  saveAvailableThemes(availableThemes);
+  // Save available themes
+  localStorage.setItem("availableThemes", JSON.stringify(availableThemes));
   
+  // Determine theme to apply
   const themeToApply = availableThemes[0].name;
-  const themeData = await fetchThemeJSON(availableThemes[0].url);
   
-  await saveToIndexedDB(themeData, themeToApply);
+  // Fetch, save, and apply theme if not already in IndexedDB
-  setSelectedTheme(themeToApply);
+  if (!(await themeExistsInDB(themeToApply))) {
+    console.log(`Theme ${themeToApply} not found in IndexedDB, fetching...`);
+    const themeData = await fetchThemeJSON(availableThemes[0].url);
+    await saveToIndexedDB(themeData, themeToApply);
+    console.log(`Theme ${themeToApply} saved to IndexedDB`, themeData);
+  }
+  
+  // Set and apply the selected theme
+  localStorage.setItem("selectedTheme", themeToApply);
   await applyTheme(themeToApply).catch((error) => {
-    console.error("Error while applying theme:", error);
+    console.error(`Failed to apply theme: ${error}`);
   });
-}
+};