add theme selector

interface/src/components/ThemeSelector.tsx

@@ -0,0 +1,18 @@
+const downloadTheme = (themeName: string, themeURL: string) => {
+  // send message to the background script
+  chrome.runtime.sendMessage({
+    type: 'currentTab',
+    info: 'SetTheme',
+    body: {
+      themeName: themeName,
+      themeURL: themeURL
+    }
+  });
+}
+
+
+export default function ThemeSelector() {
+  return (
+  <button onClick={() => downloadTheme('Dark', 'https://raw.githubusercontent.com/SethBurkart123/BetterSEQTA-Themes/main/themes/test.json')}>Dark</button>
+  )
+}

interface/src/pages/Themes.tsx

@@ -1,11 +1,13 @@
 import { FC } from 'react';
 import BackgroundSelector from '../components/BackgroundSelector';
+import ThemeSelector from '../components/ThemeSelector';
 
 const Themes: FC = () => {
 
   return (
   <div>
     <BackgroundSelector />
+    <ThemeSelector />
   </div>
   );
 };

src/seqta/ui/Themes.js

@@ -2,7 +2,7 @@ import localforage from "localforage";
 
 // Utility function to fetch and parse JSON
 const fetchJSON = async (url) => {
-  const res = await fetch(url);
+  const res = await fetch(url, {cache: "no-store"});
   return await res.json();
 };
 
@@ -71,11 +71,11 @@ export const downloadTheme = async (themeName, themeUrl) => {
   const themeData = await fetchThemeJSON(themeUrl);
   await saveToIndexedDB(themeData, themeName);
   console.log(`Theme ${themeName} saved to IndexedDB`);
-  setTheme(themeName);
   return;
 };
 
 export const setTheme = async (themeName, themeUrl) => {
+  await downloadTheme(themeName, themeUrl);
   if (!(await themeExistsInDB(themeName))) {
     await downloadTheme(themeName, themeUrl);
   }

src/seqta/utils/MessageListener.js

@@ -15,6 +15,7 @@ export class MessageHandler {
       this.editSidebar();
       break;
     case "SetTheme":
+      console.log(request);
       setTheme(request.body.themeName, request.body.themeURL);
       break;
     case "DownloadTheme":