separate thems into separate files

src/seqta/ui/themes/UpdateThemePreview.ts

@@ -0,0 +1,57 @@
+import browser from 'webextension-polyfill';
+import { CustomThemeBase64 } from '../../../interface/types/CustomThemes';
+import { imageData, removeImageFromDocument, UpdateImageData, applyCustomCSS } from './Themes';
+
+
+export const UpdateThemePreview = async (updatedTheme: CustomThemeBase64 /* Omit<CustomTheme, 'CustomImages'> & { CustomImages: Omit<CustomImage, 'blob'>[] } */) => {
+  const { CustomCSS, CustomImages, defaultColour } = updatedTheme;
+
+  // Update image data
+  const currentImageIds = Object.keys(imageData);
+  const updatedImageIds = CustomImages.map((image) => image.id);
+
+  // Remove unused images from imageData and document
+  currentImageIds.forEach((imageId) => {
+    if (!updatedImageIds.includes(imageId)) {
+      const { variableName } = imageData[imageId];
+      removeImageFromDocument(variableName);
+      delete imageData[imageId];
+    }
+  });
+
+  // Update or add new images to imageData
+  CustomImages.forEach((image) => {
+    const existingImage = imageData[image.id];
+
+    if (existingImage && existingImage.variableName !== image.variableName) {
+      // Remove the previous variableName from the document
+      removeImageFromDocument(existingImage.variableName);
+
+      // Update the variableName in imageData
+      imageData[image.id].variableName = image.variableName;
+
+      // Update the variableName in the document
+      document.documentElement.style.setProperty('--' + image.variableName, `url(${existingImage.url})`);
+    }
+
+    if (image.url) {
+      UpdateImageData({
+        id: image.id,
+        base64: image.url
+      });
+    }
+
+    imageData[image.id] = {
+      url: imageData[image.id]?.url || '',
+      variableName: image.variableName,
+    };
+  });
+
+  // Apply custom CSS
+  applyCustomCSS(CustomCSS);
+
+  // Apply default color
+  if (defaultColour !== '') {
+    browser.storage.local.set({ selectedColor: defaultColour });
+  }
+};