feat: implement a theme downloader button

Author: notwindstone

bun.lockb

@@ -14,6 +14,8 @@
     "@kitbag/router": "^0.20.6",
     "@tanstack/vue-query": "^5.87.4",
     "@vueuse/core": "^13.9.0",
+    "file-saver": "^2.0.5",
+    "jszip": "^3.10.1",
     "pinia": "^3.0.3",
     "ua-parser-js": "^2.0.5",
     "vue": "^3.5.18",
@@ -28,6 +30,7 @@
     "@iconify-json/simple-icons": "^1.2.52",
     "@iconify-json/stash": "^1.2.4",
     "@stylistic/eslint-plugin": "^5.3.1",
+    "@types/file-saver": "^2.0.7",
     "@types/node": "^24.3.1",
     "@unocss/eslint-config": "^66.5.1",
     "@vitejs/plugin-vue": "^6.0.1",

package.json

@@ -10,6 +10,8 @@ import LauncherThemed from "@/components/themes/windows/LauncherThemed.vue";
 import SettingsThemed from "@/components/themes/windows/SettingsThemed.vue";
 import type { TranslationsReferenceType } from "@/types/translations-reference.type.ts";
 import { TranslationsContextKey } from "@/constants/application.ts";
+import { saveAs } from "file-saver";
+import JSZip from "jszip";
 
 const translations = inject<TranslationsReferenceType>(TranslationsContextKey);
 
@@ -28,6 +30,31 @@ function selectColor({
 function resetColors() {
   colors.value = { ...DefaultColors };
 }
+
+function downloadTheme() {
+  const zip = new JSZip;
+  const randomKey = Math.floor(Math.random() * 10_000);
+  const folder = zip.folder(`customTheme${randomKey}`);
+
+  if (!folder) {
+    return;
+  }
+
+  folder.file("themeStyle.css", "/* WIP */");
+  folder.file("theme.json", JSON.stringify({
+    "colors": {
+      ...colors.value,
+      "fadeAmount": 0.5,
+      "fadeColor" : "#000000",
+    },
+    "name"   : `A Custom Theme <${randomKey}>`,
+    "widgets": "Fusion",
+  }, null, 2));
+
+  zip.generateAsync({ "type": "blob" }).then(content => {
+    saveAs(content, `customTheme${randomKey}.zip`);
+  });
+}
 </script>
 
 <template>
@@ -62,6 +89,9 @@ function resetColors() {
         </button>
       </div>
       <div class="w-full flex flex-col gap-4 py-4 pr-4">
+        <button @click="downloadTheme" class="w-fit rounded-md p-3 leading-none transition-[background-color] hover:bg-catppuccin-800">
+          Download
+        </button>
         <ColorGenerator
           v-if="selected === 'colors'"
           :colors="colors"