Rename cssFiles option to themes and add menu entry

Author: th-ch

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,
 				() => {

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);
+										}
+									},
+								},
+							],
+						},
 					],
 				},
 				{

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