From ef6fb402bf3eed752b0981c402f33c4419fd7132 Mon Sep 17 00:00:00 2001
From: TC <th-ch@users.noreply.github.com>
Date: Sun, 21 Aug 2022 23:36:02 +0200
Subject: [PATCH 1/2] Allow user to pass custom CSS file

---
 index.js         | 16 ++++++++++++++++
 plugins/utils.js |  9 ++++++++-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/index.js b/index.js
index f93b7d7b41..c09859bcd8 100644
--- a/index.js
+++ b/index.js
@@ -84,6 +84,22 @@ function onClosed() {
 
 function loadPlugins(win) {
 	injectCSS(win.webContents, path.join(__dirname, "youtube-music.css"));
+	// Load user CSS
+	const cssFiles = config.get("options.cssFiles");
+	if (Array.isArray(cssFiles)) {
+		cssFiles.forEach((cssFile) => {
+			fileExists(
+				cssFile,
+				() => {
+					injectCSS(win.webContents, cssFile);
+				},
+				() => {
+					console.warn(`CSS file "${cssFile}" does not exist, ignoring`);
+				}
+			);
+		});
+	}
+
 	win.webContents.once("did-finish-load", () => {
 		if (is.dev()) {
 			console.log("did finish load");
diff --git a/plugins/utils.js b/plugins/utils.js
index 735af3b9a9..5ccf1839bd 100644
--- a/plugins/utils.js
+++ b/plugins/utils.js
@@ -32,9 +32,16 @@ module.exports.listenAction = (channel, callback) => {
 	return ipcMain.on(channel, callback);
 };
 
-module.exports.fileExists = (path, callbackIfExists) => {
+module.exports.fileExists = (
+	path,
+	callbackIfExists,
+	callbackIfError = undefined
+) => {
 	fs.access(path, fs.F_OK, (err) => {
 		if (err) {
+			if (callbackIfError) {
+				callbackIfError();
+			}
 			return;
 		}
 

From e62ee35b42d8114d6409178006a882cb4ec0922c Mon Sep 17 00:00:00 2001
From: TC <th-ch@users.noreply.github.com>
Date: Thu, 25 Aug 2022 22:50:33 +0200
Subject: [PATCH 2/2] Rename cssFiles option to themes and add menu entry

---
 index.js  |  6 +++---
 menu.js   | 28 ++++++++++++++++++++++++++++
 readme.md |  6 ++++++
 3 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/index.js b/index.js
index c09859bcd8..73cf080885 100644
--- a/index.js
+++ b/index.js
@@ -85,9 +85,9 @@ function onClosed() {
 function loadPlugins(win) {
 	injectCSS(win.webContents, path.join(__dirname, "youtube-music.css"));
 	// Load user CSS
-	const cssFiles = config.get("options.cssFiles");
-	if (Array.isArray(cssFiles)) {
-		cssFiles.forEach((cssFile) => {
+	const themes = config.get("options.themes");
+	if (Array.isArray(themes)) {
+		themes.forEach((cssFile) => {
 			fileExists(
 				cssFile,
 				() => {
diff --git a/menu.js b/menu.js
index ad0e12f817..630b48d409 100644
--- a/menu.js
+++ b/menu.js
@@ -100,6 +100,34 @@ const mainMenuTemplate = (win) => {
 								config.set("options.ForceShowLikeButtons", item.checked);
 							},
 						},
+						{
+							label: "Theme",
+							submenu: [
+								{
+									label: "No theme",
+									type: "radio",
+									checked: !config.get("options.themes"), // todo rename "themes"
+									click: () => {
+										config.set("options.themes", []);
+									},
+								},
+								{ type: "separator" },
+								{
+									label: "Import custom CSS file",
+									type: "radio",
+									checked: false,
+									click: async () => {
+										const { filePaths } = await dialog.showOpenDialog({
+											filters: [{ name: "CSS Files", extensions: ["css"] }],
+											properties: ["openFile", "multiSelections"],
+										});
+										if (filePaths) {
+											config.set("options.themes", filePaths);
+										}
+									},
+								},
+							],
+						},
 					],
 				},
 				{
diff --git a/readme.md b/readme.md
index 2204d44708..56f532ab68 100644
--- a/readme.md
+++ b/readme.md
@@ -97,6 +97,12 @@ If you get an error "is damaged and can’t be opened." when launching the app,
 
 > If using `Hide Menu` option - you can show the menu with the `alt` key (or `escape` if using the in-app-menu plugin)
 
+## Themes
+
+You can load CSS files to change the look of the application (Options > Visual Tweaks > Themes).
+
+Some predefined themes are available in https://github.com/OceanicSquirrel/themes-for-ytmdesktop-player.
+
 ## Dev
 
 ```sh