feat: add deep link theme installation support

src/main/events/themes/deeplink.ts

@@ -0,0 +1,38 @@
+import { themes } from "@main/level/sublevels/themes";
+import { WindowManager } from "@main/services";
+import { Theme } from "@types";
+
+export const handleDeepLinkTheme = async (
+  themeName: string,
+  authorCode: string
+) => {
+  const theme: Theme = {
+    id: crypto.randomUUID(),
+    name: themeName,
+    isActive: false,
+    author: authorCode,
+    authorName: "spectre",
+    code: `https://hydrathemes.shop/themes/${themeName}.css`,
+    createdAt: new Date(),
+    updatedAt: new Date(),
+  };
+
+  await themes.put(theme.id, theme);
+
+  const allThemes = await themes.values().all();
+  const activeTheme = allThemes.find((theme: Theme) => theme.isActive);
+
+  if (activeTheme) {
+    await themes.put(activeTheme.id, {
+      ...activeTheme,
+      isActive: false,
+    });
+  }
+
+  WindowManager.mainWindow?.webContents.send("css-injected", theme.code);
+
+  await themes.put(theme.id, {
+    ...theme,
+    isActive: true,
+  });
+};

src/main/index.ts

@@ -10,6 +10,7 @@ import { PythonRPC } from "./services/python-rpc";
 import { Aria2 } from "./services/aria2";
 import { db, levelKeys } from "./level";
 import { loadState } from "./main";
+import { handleDeepLinkTheme } from "./events/themes/deeplink";
 
 const { autoUpdater } = updater;
 
@@ -86,6 +87,15 @@ const handleDeepLinkPath = (uri?: string) => {
     if (url.host === "install-source") {
       WindowManager.redirect(`settings${url.search}`);
     }
+
+    if (url.host === "install-theme") {
+      const themeName = url.searchParams.get("theme");
+      const authorCode = url.searchParams.get("author");
+
+      if (themeName && authorCode) {
+        handleDeepLinkTheme(themeName, authorCode);
+      }
+    }
   } catch (error) {
     logger.error("Error handling deep link", uri, error);
   }

src/renderer/src/helpers.ts

@@ -61,13 +61,20 @@ export const injectCustomCss = (css: string) => {
       currentCustomCss.remove();
     }
 
-    const style = document.createElement("style");
+    if (css.startsWith("https://hydrathemes.shop/")) {
-
+      const link = document.createElement("link");
-    style.id = "custom-css";
+      link.id = "custom-css";
-    style.textContent = `
+      link.rel = "stylesheet";
-      ${css}
+      link.href = css;
-    `;
+      document.head.appendChild(link);
-    document.head.appendChild(style);
+    } else {
+      const style = document.createElement("style");
+      style.id = "custom-css";
+      style.textContent = `
+        ${css}
+      `;
+      document.head.appendChild(style);
+    }
   } catch (error) {
     console.error("failed to inject custom css:", error);
   }

src/renderer/src/pages/settings/aparence/components/theme-card.scss

@@ -85,6 +85,10 @@
       flex-direction: row;
       gap: 8px;
 
+      &--external {
+        display: none;
+      }
+
       Button {
         padding: 8px 11px;
       }

src/renderer/src/pages/settings/aparence/components/theme-card.tsx

@@ -111,6 +111,7 @@ export const ThemeCard = ({ theme, onListUpdated }: ThemeCardProps) => {
 
           <div className="theme-card__actions__right">
             <Button
+              className={theme.code.startsWith("https://hydrathemes.shop/") ? "theme-card__actions__right--external" : ""}
               onClick={() => window.electron.openEditorWindow(theme.id)}
               title={t("edit_theme")}
               theme="outline"