Add white mode with a setting

main.js

@@ -125,7 +125,7 @@ function createWindow(env) {
         minHeight: 650,
         width: 815,
         height: 800,
-        backgroundColor: '#212121',
+        backgroundColor: env.settings.theme === "dark" ? '#212121' : '#ffffff',
         titleBarStyle: process.platform === "darwin" ? "hiddenInset" : "hidden",
         frame: false,
         icon: env.paths.icon,
@@ -146,10 +146,11 @@ function createWindow(env) {
     win.on('closed', () => {
         win = null
     })
-    win.once('ready-to-show', () => {
-        win.show()
-    })
-    win.webContents.on('did-finish-load', () => startCriticalHandlers(env));
+    win.once('focus', () => win.flashFrame(false))
+    win.webContents.on('did-finish-load', () => {
+        win.show();
+        startCriticalHandlers(env)
+    });
 }
 
 app.on('ready', async () => {
@@ -209,6 +210,11 @@ ipcMain.handle("platform", () => {
     return process.platform;
 })
 
+//Return the user selected theme to the renderer process
+ipcMain.handle("theme", () => {
+    return env.settings.theme;
+})
+
 //Handle titlebar click events from the renderer process
 ipcMain.handle('titlebarClick', (event, arg) => {
     if(arg === 'close') {

modules/Settings.js

@@ -2,7 +2,7 @@ const os = require("os");
 const fs = require("fs").promises;
 
 class Settings {
-    constructor(paths, env, outputFormat, spoofUserAgent, sizeMode, splitMode, maxConcurrent, updateBinary, updateApplication, cookiePath, statSend, downloadMetadata, downloadThumbnail, keepUnmerged, calculateTotalSize) {
+    constructor(paths, env, outputFormat, spoofUserAgent, sizeMode, splitMode, maxConcurrent, updateBinary, updateApplication, cookiePath, statSend, downloadMetadata, downloadThumbnail, keepUnmerged, calculateTotalSize, theme) {
         this.paths = paths;
         this.env = env
         this.outputFormat = outputFormat == null ? "none" : outputFormat;
@@ -18,13 +18,14 @@ class Settings {
         this.updateApplication = updateApplication == null ? true : updateApplication;
         this.cookiePath = cookiePath;
         this.statSend = statSend == null ? false : statSend;
+        this.theme = theme == null ? "dark" : theme;
     }
 
     static async loadFromFile(paths, env) {
         try {
             let result = await fs.readFile(paths.settings, "utf8");
             let data = JSON.parse(result);
-            return new Settings(paths, env, data.outputFormat, data.spoofUserAgent, data.sizeMode, data.splitMode, data.maxConcurrent, data.updateBinary, data.updateApplication, data.cookiePath, data.statSend, data.downloadMetadata, data.downloadThumbnail, data.keepUnmerged, data.calculateTotalSize);
+            return new Settings(paths, env, data.outputFormat, data.spoofUserAgent, data.sizeMode, data.splitMode, data.maxConcurrent, data.updateBinary, data.updateApplication, data.cookiePath, data.statSend, data.downloadMetadata, data.downloadThumbnail, data.keepUnmerged, data.calculateTotalSize, data.theme);
         } catch(err) {
             console.log(err);
             let settings = new Settings(paths, env);
@@ -49,6 +50,7 @@ class Settings {
         }
         this.updateBinary = settings.updateBinary;
         this.updateApplication = settings.updateApplication;
+        this.theme = settings.theme;
         this.save();
 
         //Prevent installing already downloaded updates on app close.
@@ -71,6 +73,7 @@ class Settings {
             downloadThumbnail: this.downloadThumbnail,
             keepUnmerged: this.keepUnmerged,
             calculateTotalSize: this.calculateTotalSize,
+            theme: this.theme,
             version: this.env.version
         }
     }

preload.js

@@ -4,7 +4,7 @@ contextBridge.exposeInMainWorld(
     "main",
     {
         invoke: async (channel, data) => {
-            let validChannels = ["platform", "messageBox","errorReport", "titlebarClick", "openInputMenu", "settingsAction", "videoAction", "cookieFile", "downloadFolder", "installUpdate"];
+            let validChannels = ["platform", "messageBox","errorReport", "titlebarClick", "openInputMenu", "settingsAction", "videoAction", "cookieFile", "downloadFolder", "installUpdate", "iconProgress", "theme"];
             if (validChannels.includes(channel)) {
                 return await ipcRenderer.invoke(channel, data);
             }

renderer/img/card-text-strike-light.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 15.92"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs><path d="M1,12.12V3.45A.5.5,0,0,1,1.5,3h8.67l1-1H1.5A1.5,1.5,0,0,0,0,3.45v9A1.55,1.55,0,0,0,.11,13Z" transform="translate(0 0)"/><path d="M15,3.78v8.67a.5.5,0,0,1-.5.5H5.83l-1,1H14.5a1.5,1.5,0,0,0,1.5-1.5v-9a1.55,1.55,0,0,0-.11-.56Z" transform="translate(0 0)"/><path d="M3.5,8.45H4.69l1-1H3.5a.5.5,0,1,0,0,1Z" transform="translate(0 0)"/><path d="M3.5,6H7.19l1-1H3.5a.5.5,0,1,0,0,1Z" transform="translate(0 0)"/><path d="M12.5,7.45H11.34l-1,1H12.5a.5.5,0,0,0,0-1Z" transform="translate(0 0)"/><path d="M9.5,10H8.84l-1,1H9.5a.5.5,0,0,0,0-1Z" transform="translate(0 0)"/><line class="cls-1" x1="0.39" y1="15.56" x2="15.6" y2="0.35"/></svg>

renderer/renderer.css

@@ -10,6 +10,14 @@
     --error-color: #b73232;
 }
 
+.white-mode {
+    --bg-color: #ffffff;
+    --secondary-bg-color: #eaeaea;
+    --tertiary-bg-color: #dcdcdc;
+    --font-color: #3c3c3c;
+    --scroll-bar-color: #dcdcdc;
+}
+
 body {
     background-color: var(--bg-color);
     color: var(--font-color);
@@ -78,7 +86,7 @@ select {
 
 /* NAVBAR */
 .windowbar {
-    background-color: #212121 !important;
+    background-color: var(--bg-color) !important;
 }
 
 .windowbar.fixed {
@@ -94,6 +102,7 @@ select {
 }
 
 .windowbar-title {
+    color: var(--font-color) !important;
     font-size: 13px !important;
     line-height: 14px;
     margin-top: 4px;
@@ -414,7 +423,6 @@ option.audio {
     background-color: var(--secondary-bg-color) !important;
     border-color: var(--secondary-bg-color) !important;
     color: var(--font-color) !important;
-    font-weight: 600;
 }
 
 .modal .close {
@@ -566,6 +574,19 @@ i.img-overlay:hover, img.info-img:hover ~ i.img-overlay  {
     }
 }
 
+/* WHITE MODE CLASSES */
+.invert {
+    filter: invert(1);
+}
+
+.desaturate:disabled {
+    filter: saturate(.1);
+}
+
+.light-icon.bi-card-text-strike {
+    background: url("img/card-text-strike-light.svg");
+}
+
 /* CUSTOM SCROLLBAR */
 ::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
@@ -581,3 +602,4 @@ i.img-overlay:hover, img.info-img:hover ~ i.img-overlay  {
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
     background-color: var(--scroll-bar-color);
 }
+

renderer/renderer.js

@@ -31,6 +31,11 @@ async function init() {
         window.main.invoke('titlebarClick', "maximize")
     })
 
+    //Set the selected theme (dark | light)
+    const startupTheme = await window.main.invoke('theme');
+    console.log(startupTheme)
+    toggleWhiteMode(startupTheme);
+
     $('.video-cards').each(function() {
         let sel = this;
         new MutationObserver(function() {
@@ -117,10 +122,12 @@ async function init() {
             calculateTotalSize: $('#calculateTotalSize').prop('checked'),
             sizeMode: $('#sizeSetting').val(),
             splitMode: $('#splitMode').val(),
-            maxConcurrent: parseInt($('#maxConcurrent').val())
+            maxConcurrent: parseInt($('#maxConcurrent').val()),
+            theme: $('#theme').val()
         }
         window.settings = settings;
-        window.main.invoke("settingsAction", {action: "save", settings})
+        window.main.invoke("settingsAction", {action: "save", settings});
+        toggleWhiteMode(settings.theme);
     });
 
     $('#maxConcurrent').on('input', () => {
@@ -142,6 +149,7 @@ async function init() {
             $('#sizeSetting').val(settings.sizeMode);
             $('#splitMode').val(settings.splitMode);
             $('#settingsModal').modal("show");
+            $('#theme').val(settings.theme);
             $('#version').html("<strong>Version: </strong>" + settings.version);
             window.settings = settings;
         });
@@ -319,6 +327,15 @@ async function init() {
     });
 }
 
+function toggleWhiteMode(setting) {
+    const value = setting === "light";
+    $('body').toggleClass("white-mode", value);
+    $('.windowbar-minimize, .windowbar-maximize, .windowbar-close > svg').toggleClass("invert", value);
+    $('.windowbar > img').attr('src', "img/icon-titlebar-" + (value ? "light" : "dark") + ".png");
+    $('#downloadBtn').toggleClass("desaturate", value);
+    $('#subtitleBtn > i').toggleClass("light-icon", value);
+}
+
 function parseURL(data) {
     if(data.includes(',')) {
         let urls = data.replaceAll(" ", "").split(",");

tests/Settings.test.js

@@ -2,8 +2,8 @@ const fs = require('fs').promises;
 const os = require("os");
 const Settings = require('../modules/Settings');
 const env = {version: "2.0.0-test1"};
-const defaultSettingsInstance = new Settings({settings: "tests/test-settings.json"}, env, "none", true, "click", "49", 8, true, true, "C:\\Users\\user\\cookies.txt", false, true, false, false, true);
-const defaultSettings = "{\"outputFormat\":\"none\",\"spoofUserAgent\":true,\"sizeMode\":\"click\",\"splitMode\":\"49\",\"maxConcurrent\":8,\"defaultConcurrent\":8,\"updateBinary\":true,\"updateApplication\":true,\"statSend\":false,\"downloadMetadata\":true,\"downloadThumbnail\":false,\"keepUnmerged\":false,\"calculateTotalSize\":true,\"version\":\"2.0.0-test1\"}"
+const defaultSettingsInstance = new Settings({settings: "tests/test-settings.json"}, env, "none", true, "click", "49", 8, true, true, "C:\\Users\\user\\cookies.txt", false, true, false, false, true, "dark");
+const defaultSettings = "{\"outputFormat\":\"none\",\"spoofUserAgent\":true,\"sizeMode\":\"click\",\"splitMode\":\"49\",\"maxConcurrent\":8,\"defaultConcurrent\":8,\"updateBinary\":true,\"updateApplication\":true,\"statSend\":false,\"downloadMetadata\":true,\"downloadThumbnail\":false,\"keepUnmerged\":false,\"calculateTotalSize\":true,\"theme\":\"dark\",\"version\":\"2.0.0-test1\"}"
 
 describe('Load settings from file', () => {
     beforeEach(() => {

tests/test-settings.json

@@ -1 +1 @@
-{"outputFormat":"none","spoofUserAgent":true,"sizeMode":"click","splitMode":"49","maxConcurrent":8,"defaultConcurrent":8,"updateBinary":true,"updateApplication":true,"cookiePath":"C:\\Users\\user\\cookies.txt","statSend":false,"downloadMetadata":true,"downloadThumbnail":false,"keepUnmerged":false,"calculateTotalSize":true,"version":"2.0.0-test1"}
+{"outputFormat":"none","spoofUserAgent":true,"sizeMode":"click","splitMode":"49","maxConcurrent":8,"defaultConcurrent":8,"updateBinary":true,"updateApplication":true,"cookiePath":"C:\\Users\\user\\cookies.txt","statSend":false,"downloadMetadata":true,"downloadThumbnail":false,"keepUnmerged":false,"calculateTotalSize":true,"theme": "dark","version":"2.0.0-test1"}