chore: add theme css support

src/app.css

@@ -148,62 +148,6 @@
   --color-sidebar-ring: var(--sidebar-ring);
 }
 
-main[data-theme="execution_clap"] {
-  --primary: #fc112b;
-  --primary-foreground: #fff;
-  --ring: #fc112b;
-  --color-primary-50: #fef2f2;
-  --color-primary-100: #fee2e2;
-  --color-primary-200: #fecaca;
-  --color-primary-300: #fca5a5;
-  --color-primary-400: #f87171;
-  --color-primary-500: #ef4444;
-  --color-primary-600: #dc2626;
-  --color-primary-700: #b91c1c;
-  --color-primary-800: #991b1b;
-  --color-primary-900: #7f1d1d;
-  --color-primary-950: #450a0a;
-  --bg-primary-50: #fef2f2;
-  --bg-primary-100: #fee2e2;
-  --bg-primary-200: #fecaca;
-  --bg-primary-300: #fca5a5;
-  --bg-primary-400: #f87171;
-  --bg-primary-500: #ef4444;
-  --bg-primary-600: #dc2626;
-  --bg-primary-700: #b91c1c;
-  --bg-primary-800: #991b1b;
-  --bg-primary-900: #7f1d1d;
-  --bg-primary-950: #450a0a;
-}
-
-main[data-theme="lost_umbrella"] {
-  --primary: #e5e5e5;
-  --primary-foreground: #000;
-  --ring: #e5e5e5;
-  --color-primary-50: #0d0d0d;
-  --color-primary-100: #1a1a1a;
-  --color-primary-200: #333333;
-  --color-primary-300: #4d4d4d;
-  --color-primary-400: #666666;
-  --color-primary-500: #808080;
-  --color-primary-600: #999999;
-  --color-primary-700: #b3b3b3;
-  --color-primary-800: #cccccc;
-  --color-primary-900: #e6e6e6;
-  --color-primary-950: #f2f2f2;
-  --bg-primary-50: #0d0d0d;
-  --bg-primary-100: #1a1a1a;
-  --bg-primary-200: #333333;
-  --bg-primary-300: #4d4d4d;
-  --bg-primary-400: #666666;
-  --bg-primary-500: #808080;
-  --bg-primary-600: #999999;
-  --bg-primary-700: #b3b3b3;
-  --bg-primary-800: #cccccc;
-  --bg-primary-900: #e6e6e6;
-  --bg-primary-950: #f2f2f2;
-}
-
 @layer base {
   * {
     @apply border-border outline-ring/50;

src/lib/themes.ts

@@ -14,6 +14,7 @@ export type Theme = {
   version: string;
   author: string;
   scriptUrl: string;
+  cssStyle: string;
   assets: string;
   preview: string;
   status: 'installed' | 'downloading' | 'extracting' | 'deleting' | 'not-installed';
@@ -77,6 +78,7 @@ export const getDownloadableThemes = async () => {
         status: 'not-installed',
         progress: 0,
         updateAvailable: false,
+        cssStyle: '',
       });
     }
   } else {
@@ -99,6 +101,7 @@ export const getThemes = async (): Promise<Theme[]> => {
     status: 'installed',
     progress: 0,
     updateAvailable: false,
+    cssStyle: '',
   });
   const folderPath = await path.join(await path.homeDir(), '.ezpplauncher', 'themes');
   if (await fs.exists(folderPath)) {
@@ -110,6 +113,8 @@ export const getThemes = async (): Promise<Theme[]> => {
         const themeConfig = await fs.readTextFile(themeConfigFilePath);
         const theme = JSON.parse(themeConfig) as ThemeInfo;
         const scriptFile = await path.join(folderPath, themeFolder.name, theme.entry);
+        const cssStylePath = await path.join(folderPath, themeFolder.name, theme.style);
+        const cssStyle = (await fs.exists(cssStylePath)) ? await fs.readTextFile(cssStylePath) : '';
         if (await fs.exists(scriptFile)) {
           themes.push({
             folder_name: themeFolder.name,
@@ -124,6 +129,7 @@ export const getThemes = async (): Promise<Theme[]> => {
             status: 'installed',
             progress: 0,
             updateAvailable: false,
+            cssStyle,
           });
         }
       }
@@ -233,11 +239,14 @@ export const downloadTheme = async (
   const themePreview = convertFileSrc(
     await path.normalize(`${themeFolder}/assets/${themeInfoObj.preview}`)
   );
+  const cssStylePath = await path.join(themeFolder, themeInfoObj.style);
+  const cssStyle = (await fs.exists(cssStylePath)) ? await fs.readTextFile(cssStylePath) : '';
 
   custom_themes.update((themes) => {
     const matchedTheme = themes.find((t) => t.name === theme.name);
     if (matchedTheme) {
       matchedTheme.scriptUrl = themeScriptUrl;
+      matchedTheme.cssStyle = cssStyle;
       matchedTheme.assets = themeAssets;
       matchedTheme.preview = themePreview;
       matchedTheme.status = 'installed';
@@ -286,6 +295,7 @@ export const deleteTheme = async (themeToUninstall: Theme) => {
     const matchedTheme = themes.find((t) => t.name === themeToUninstall.name);
     if (matchedTheme) {
       matchedTheme.scriptUrl = '';
+      matchedTheme.cssStyle = '';
       matchedTheme.assets = '';
       matchedTheme.preview = `https://git.ez-pp.farm/EZPPFarm/EZPPLauncher-Themes/raw/branch/main/previews/${toSafeName(themeToUninstall.name)}.png`;
       matchedTheme.status = 'not-installed';
@@ -352,11 +362,14 @@ export const importThemeFromFile = async (themeName: string, filePath: string) =
   const themePreview = convertFileSrc(
     await path.normalize(`${themeFolder}/assets/${themeInfoObj.preview}`)
   );
+  const cssStylePath = await path.join(themeFolder, themeInfoObj.style);
+  const cssStyle = (await fs.exists(cssStylePath)) ? await fs.readTextFile(cssStylePath) : '';
 
   custom_themes.update((themes) => {
     const matchedTheme = themes.find((t) => t.name === themeInfoObj.name);
     if (matchedTheme) {
       matchedTheme.scriptUrl = themeScriptUrl;
+      matchedTheme.cssStyle = cssStyle;
       matchedTheme.assets = themeAssets;
       matchedTheme.preview = themePreview;
       matchedTheme.status = 'installed';
@@ -406,6 +419,7 @@ export const reloadThemes = async () => {
       storeTheme.version = theme.version;
       storeTheme.author = theme.author;
       storeTheme.updateAvailable = theme.updateAvailable;
+      storeTheme.cssStyle = theme.cssStyle;
     }
 
     const newThemes = combinedThemes.filter((t) => !storeMap.has(t.name));

src/routes/+layout.svelte

@@ -167,6 +167,7 @@
     cursorSmoothening.subscribe(async (val) => await config_cursor_smoothening.set(val));
     reduceAnimations.subscribe(async (val) => await config_reduce_animations.set(val));
     openTabletDriverEnabled.subscribe(async (val) => config_otd_enabled.set(val));
+    osuInstallationPath.subscribe(async (val) => await config_osu_installation_path.set(val));
 
     discordPresence.subscribe(async (val) => {
       config_discord_presence.set(val);
@@ -235,6 +236,11 @@
   });
 </script>
 
+<svelte:head>
+  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+  {@html `<style>${$active_custom_theme?.cssStyle || ''}</style>`}
+</svelte:head>
+
 {#if $customCursor}
   <OsuCursor smoothCursor={$cursorSmoothening} />
 {/if}

src/screens/Loading.svelte

@@ -133,36 +133,38 @@
 
     if (!$firstStartup) {
       currentLoadingInfo.set('Checking osu installation path...');
-      const validFolder = await isValidOsuFolder($osuInstallationPath);
+      if ($osuInstallationPath && $osuInstallationPath.length > 0) {
-      if (!validFolder) {
+        const validFolder = await isValidOsuFolder($osuInstallationPath);
-        osuInstallationPath.set('');
+        if (!validFolder) {
-        await config.value<string>('osu_installation_path').set('');
+          await config.value<string>('osu_installation_path').set('');
-        sileo.error({
+          osuInstallationPath.set('');
-          title: 'Hmm...',
+          sileo.error({
-          description: 'Your previously set osu! installation path seems to be invalid.',
+            title: 'Hmm...',
-        });
+            description: 'Your previously set osu! installation path seems to be invalid.',
-      } else {
+          });
-        currentLoadingInfo.set('Getting osu version...');
-        const osuReleaseStream = await getReleaseStream($osuInstallationPath);
-        osuStream.set(osuReleaseStream);
-        const osuVersion = await getVersion($osuInstallationPath);
-        osuBuild.set(osuVersion);
-
-        currentLoadingInfo.set('Counting beatmapsets...');
-        const beatmapSetCount = await getBeatmapSetsCount($osuInstallationPath);
-        if (beatmapSetCount !== null) beatmapSets.set(beatmapSetCount);
-
-        currentLoadingInfo.set('Counting skins...');
-        const skins_list = await getSkins($osuInstallationPath);
-        if (skins_list) {
-          skins.set(skins_list);
-          skinsCount.set(skins_list.length);
         } else {
-          skinsCount.set(0);
+          currentLoadingInfo.set('Getting osu version...');
-        }
+          const osuReleaseStream = await getReleaseStream($osuInstallationPath);
+          osuStream.set(osuReleaseStream);
+          const osuVersion = await getVersion($osuInstallationPath);
+          osuBuild.set(osuVersion);
 
-        const skin: string = await getSkin($osuInstallationPath);
+          currentLoadingInfo.set('Counting beatmapsets...');
-        currentSkin.set(skin);
+          const beatmapSetCount = await getBeatmapSetsCount($osuInstallationPath);
+          if (beatmapSetCount !== null) beatmapSets.set(beatmapSetCount);
+
+          currentLoadingInfo.set('Counting skins...');
+          const skins_list = await getSkins($osuInstallationPath);
+          if (skins_list) {
+            skins.set(skins_list);
+            skinsCount.set(skins_list.length);
+          } else {
+            skinsCount.set(0);
+          }
+
+          const skin: string = await getSkin($osuInstallationPath);
+          currentSkin.set(skin);
+        }
       }
     }