Merge pull request #800 from th-ch/custom-css-file

Allow user to pass custom CSS file

Author: th-ch

index.js

@@ -84,6 +84,22 @@ function onClosed() {
 
 function loadPlugins(win) {
 	injectCSS(win.webContents, path.join(__dirname, "youtube-music.css"));
+	// Load user CSS
+	const themes = config.get("options.themes");
+	if (Array.isArray(themes)) {
+		themes.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");

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

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;
 		}
 

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