add theme creator iframe

src/seqta/ui/ThemeCreator.ts

@@ -0,0 +1,16 @@
+import browser from "webextension-polyfill";
+import popup from '../../interface/index.html?url'
+
+/**
+ * Open the Theme Creator sidebar, it is an embedded page loaded similar to the extension popup
+ */
+export function OpenThemeCreator() {
+    const container = document.querySelector('#container')
+    const themeCreatorIframe: HTMLIFrameElement = document.createElement('iframe')
+    themeCreatorIframe.src = `${browser.runtime.getURL(popup)}#themeCreator`
+    themeCreatorIframe.id = 'themeCreatorIframe'
+    themeCreatorIframe.setAttribute('allowTransparency', 'true')
+    themeCreatorIframe.setAttribute('excludeDarkCheck', 'true')
+    themeCreatorIframe.style.border = 'none'
+    container!.appendChild(themeCreatorIframe)
+}

src/seqta/utils/listeners/MessageListener.ts

@@ -2,6 +2,7 @@ import browser from 'webextension-polyfill'
 
 import { MenuOptionsOpen, OpenMenuOptions, OpenWhatsNewPopup, closeSettings } from '../../../SEQTA';
 import { deleteTheme, disableTheme, downloadTheme, listThemes, setTheme } from '../../ui/Themes';
+import { OpenThemeCreator } from '../../ui/ThemeCreator';
 
 export class MessageHandler {
   constructor() {
@@ -45,6 +46,9 @@ export class MessageHandler {
     case 'OpenChangelog':
       OpenWhatsNewPopup();
       break;
+    case 'OpenThemeCreator':
+      OpenThemeCreator();
+      break;
     
     default:
       console.log('Unknown request info:', request.info);