feat: theme files are now loaded & applied on startup

src/pages/settings/preload.ts

@@ -66,7 +66,7 @@ function handleFileUploads() {
 function refreshSettings() {
   adBlock.checked = settingsStore.get(settings.adBlock);
   api.checked = settingsStore.get(settings.api);
-  customCSS.value = settingsStore.get(settings.customCSS);
+  customCSS.value = settingsStore.get<string, string[]>(settings.customCSS).join("\n");
   disableBackgroundThrottle.checked = settingsStore.get(settings.disableBackgroundThrottle);
   disableHardwareMediaKeys.checked = settingsStore.get(settings.flags.disableHardwareMediaKeys);
   enableCustomHotkeys.checked = settingsStore.get(settings.enableCustomHotkeys);

src/preload.ts

@@ -1,5 +1,6 @@
 import { Notification, app, dialog } from "@electron/remote";
 import { ipcRenderer } from "electron";
+import fs from "fs";
 import Player from "mpris-service";
 import { globalEvents } from "./constants/globalEvents";
 import { settings } from "./constants/settings";
@@ -147,8 +148,24 @@ const elements = {
 
 function addCustomCss() {
   window.addEventListener("DOMContentLoaded", () => {
+    const selectedTheme = settingsStore.get(settings.theme);
+    if (selectedTheme !== "none") {
+      const themeFile = `${process.resourcesPath}/${selectedTheme}`;
+      fs.readFile(themeFile, "utf-8", (err, data) => {
+        if (err) {
+          alert("An error ocurred reading the theme file.");
+          return;
+        }
+
+        const themeStyle = document.createElement("style");
+        themeStyle.innerHTML = data;
+        document.head.appendChild(themeStyle);
+      });
+    }
+
+    // read customCSS (it will override the theme)
     const style = document.createElement("style");
-    style.innerHTML = settingsStore.get(settings.customCSS);
+    style.innerHTML = settingsStore.get<string, string[]>(settings.customCSS).join("\n");
     document.head.appendChild(style);
   });
 }

src/themes/Blood.scss

@@ -0,0 +1,10 @@
+$foreground: red;
+$background: black;
+
+span {
+  color: $foreground;
+}
+
+.sidebar--WvRg_ {
+  background-color: $background;
+}

src/themes/csstest.css

@@ -1,3 +0,0 @@
-h2 {
-  color: black;
-}

src/themes/test.scss

@@ -1,7 +0,0 @@
-h1 {
-  color: black;
-
-  .title {
-    color: blue;
-  }
-}