add theme saving (This took hours)

src/interface/pages/SettingsPage/Themes.tsx

@@ -9,7 +9,7 @@ const Themes: FC = () => {
 
   useEffect(() => {
     listThemes().then(themes => {
-      if (themes.selectedTheme) {
+      if (themes?.selectedTheme) {
         setSelectedType('theme');
       } else {
         setSelectedType('background');
@@ -18,12 +18,12 @@ const Themes: FC = () => {
   }, [])
 
   return (
-  <div>
+  <div className="px-0.5">
       <button className="absolute top-12 z-20 right-0 p-2 text-[0.8rem] text-blue-500" onClick={() => setIsEditMode(!isEditMode)}>
         {isEditMode ? 'Done' : 'Edit'}
       </button>
     <BackgroundSelector setSelectedType={setSelectedType} selectedType={selectedType} isEditMode={isEditMode} />
-    <ThemeSelector setSelectedType={setSelectedType} selectedType={selectedType} isEditMode={isEditMode} />
+    <ThemeSelector selectedType={selectedType} setSelectedType={setSelectedType} isEditMode={isEditMode} />
   </div>
   );
 };

src/interface/pages/ThemeCreator.tsx

@@ -7,6 +7,7 @@ import { sendThemeUpdate } from '../hooks/ThemeManagment';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 import localforage from 'localforage';
 import { v4 as uuidv4 } from 'uuid';
+import { CustomTheme } from '../types/CustomThemes';
 
 function ThemeCreator({ themeID }: { themeID?: string }) {
   const [theme, setTheme] = useState<CustomTheme>({
@@ -77,24 +78,8 @@ function ThemeCreator({ themeID }: { themeID?: string }) {
     }));
   }
 
-  const saveTheme = async () => {
-    try {
-      await localforage.setItem(theme.id, theme);
-      await localforage.getItem('customThemes').then((themes: unknown) => {
-        const themeList = themes as string[] | null;
-        if (themeList) {
-          if (!themeList.includes(theme.id)) {
-            themeList.push(theme.id);
-            localforage.setItem('customThemes', themeList);
-          }
-        } else {
-          localforage.setItem('customThemes', [theme.id]);
-        }
-      });
-      console.log('Theme saved successfully!');
-    } catch (error) {
-      console.error('Error saving theme:', error);
-    }
+  const saveTheme = () => {
+    sendThemeUpdate(theme, true);
   };
 
   useEffect(() => {