diff --git a/CHANGELOG.md b/CHANGELOG.md
index 24397c2..5fa7a58 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- moved from Javascript to Typescript for all files
- use `npm run watch` to watch for changes & recompile typescript and sass files
+- Added support for theming the application
+
## 5.1.0
### New features
diff --git a/src/pages/settings/preload.ts b/src/pages/settings/preload.ts
index fb64769..830c5e4 100644
--- a/src/pages/settings/preload.ts
+++ b/src/pages/settings/preload.ts
@@ -1,5 +1,6 @@
import remote from "@electron/remote";
import { ipcRenderer, shell } from "electron";
+import fs from "fs";
import { globalEvents } from "../../constants/globalEvents";
import { settings } from "../../constants/settings";
import { settingsStore } from "./../../scripts/settings";
@@ -24,6 +25,36 @@ let adBlock: HTMLInputElement,
trayIcon: HTMLInputElement,
updateFrequency: HTMLInputElement;
+function getThemeFiles() {
+ const selectElement = document.getElementById("themesList") as HTMLSelectElement;
+ const fileNames = fs.readdirSync(process.resourcesPath).filter((file) => file.endsWith(".css"));
+ const options = fileNames.map((name) => {
+ return new Option(name, name);
+ });
+
+ // empty old options
+ const oldOptions = document.querySelectorAll("#themesList option");
+ oldOptions.forEach((o) => o.remove());
+
+ [new Option("Tidal - Default", "none")].concat(options).forEach((option) => {
+ selectElement.add(option, null);
+ });
+}
+
+function handleFileUploads() {
+ const fileMessage = document.getElementById("file-message");
+ fileMessage.innerText = "or drag and drop files here";
+
+ document.getElementById("theme-files").addEventListener("change", function (e: any) {
+ Array.from(e.target.files).forEach((file: File) => {
+ const destination = `${process.resourcesPath}/${file.name}`;
+ fs.copyFileSync(file.path, destination, null);
+ });
+ fileMessage.innerText = `${e.target.files.length} files successfully uploaded`;
+ getThemeFiles();
+ });
+}
+
/**
* Sync the UI forms with the current settings
*/
@@ -79,6 +110,9 @@ window.addEventListener("DOMContentLoaded", () => {
return document.getElementById(id) as HTMLInputElement;
}
+ getThemeFiles();
+ handleFileUploads();
+
document.getElementById("close").addEventListener("click", hide);
document.getElementById("restart").addEventListener("click", restart);
document.querySelectorAll(".external-link").forEach((elem) =>
diff --git a/src/pages/settings/settings.html b/src/pages/settings/settings.html
index b784a02..63b2599 100644
--- a/src/pages/settings/settings.html
+++ b/src/pages/settings/settings.html
@@ -35,6 +35,9 @@
+
+
+
@@ -226,6 +229,49 @@
+
+
Flags
+
+
+
Disable hardware built-in media keys
+
+ Also prevents certain desktop environments from recognizing the chrome MPRIS
+ client separately from the custom MPRIS client.
+
+
+
+
+
+
+
Enable GPU rasterization
+
Move a part of the rendering to the GPU for increased performance.
+
+
+
+
+
+
Disable Background Throttling
+
+ Makes app more responsive while in the background, at the cost of performance.
+
+
+
+
+
+
+
+
+
+
Theming
Custom CSS
@@ -238,41 +284,34 @@
-
Flags
+
Theme files
-
Disable hardware built-in media keys
+
Current theme
- Also prevents certain desktop environments from recognizing the chrome MPRIS
- client separately from the custom MPRIS client.
+ Select a theme below or "Tidal - Default" to return to the original Tidal look.
+
-
+
-
Enable GPU rasterization
-
Move a part of the rendering to the GPU for increased performance.
-
-
-
-
-
-
Disable Background Throttling
+
Upload new themes
- Makes app more responsive while in the background, at the cost of performance.
+ Click the button and select the css files to import. They will be added to the theme list
+ automatically.