diff --git a/index.js b/index.js index f93b7d7b41..73cf080885 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 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"); 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/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; } 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