From 1761c8dd40a033c95979dc8c1ee5b22c14fc5844 Mon Sep 17 00:00:00 2001
From: Mastermindzh <info@rickvanlieshout.com>
Date: Wed, 10 May 2023 22:07:11 +0200
Subject: [PATCH] feat: theme files are now loaded & applied on startup

---
 src/pages/settings/preload.ts |  2 +-
 src/preload.ts                | 19 ++++++++++++++++++-
 src/themes/Blood.scss         | 10 ++++++++++
 src/themes/csstest.css        |  3 ---
 src/themes/test.scss          |  7 -------
 5 files changed, 29 insertions(+), 12 deletions(-)
 create mode 100644 src/themes/Blood.scss
 delete mode 100644 src/themes/csstest.css
 delete mode 100644 src/themes/test.scss

diff --git a/src/pages/settings/preload.ts b/src/pages/settings/preload.ts
index b693af4..d6f51f6 100644
--- a/src/pages/settings/preload.ts
+++ b/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);
diff --git a/src/preload.ts b/src/preload.ts
index f35474f..cc6a682 100644
--- a/src/preload.ts
+++ b/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);
   });
 }
diff --git a/src/themes/Blood.scss b/src/themes/Blood.scss
new file mode 100644
index 0000000..b7dfd6e
--- /dev/null
+++ b/src/themes/Blood.scss
@@ -0,0 +1,10 @@
+$foreground: red;
+$background: black;
+
+span {
+  color: $foreground;
+}
+
+.sidebar--WvRg_ {
+  background-color: $background;
+}
diff --git a/src/themes/csstest.css b/src/themes/csstest.css
deleted file mode 100644
index f331fdf..0000000
--- a/src/themes/csstest.css
+++ /dev/null
@@ -1,3 +0,0 @@
-h2 {
-  color: black;
-}
diff --git a/src/themes/test.scss b/src/themes/test.scss
deleted file mode 100644
index 2de34b6..0000000
--- a/src/themes/test.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-h1 {
-  color: black;
-
-  .title {
-    color: blue;
-  }
-}