light mode in main menu

w00000dy · Sep 8, 2020 · 549aa9a · 549aa9a
1 parent ac08b1c
commit 549aa9a
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # WLED-GUI changelog
 
+## WLED-GUI version 0.4.0
+- added support for light mode in main menu
+- updated to electron version 10.1.1
+
 ## WLED-GUI version 0.3.0
 - updated for WLED version 0.10.2
 - added settings functionality

diff --git a/css/style.css b/css/style.css
@@ -33,6 +33,19 @@ img {
 .icon.on {
     background-color: #666666;
 }
+.darkicon {
+    float: right;
+    background-color: #818181;
+    border: 5px solid #030303;
+    border-radius: 50px;
+}
+.darkicon:hover {
+    background-color: white;
+    border-color: #818181;
+}
+.darkicon.on {
+    background-color: #222222;
+}
 
 .logo {
     position: fixed;

diff --git a/js/script.js b/js/script.js
@@ -2,6 +2,13 @@ document.getElementById("logo").addEventListener("click", openRepositorie);
 // the imgClicked variable prevents the goToWled() function from beeing triggerd when clicking in a button
 var imgClicked = false;
 
+// Light mode
+var ui = JSON.parse(localStorage.getItem("wledUiCfg"));
+if (ui.theme.base == "light") {
+    document.body.style.backgroundColor = "#eee";
+    document.body.style.color = "black";
+}
+
 // Default PC Mode on
 if (localStorage.getItem("pcm") === null) {
     localStorage.setItem("pcm", true);
@@ -21,7 +28,13 @@ function showLights() {
     for (let index = 0; index < lights.length; index++) {
         const element = lights[index];
         txt += "<div class=\"light\" onclick=\"goToWled(" + index + ")\" style=\"cursor: pointer;\">\n<br>\n";
-        txt += "<img src=\"images/icon_power.png\" id=\"img" + index + "\" class=\"icon ";
+        // Light mode
+        if (ui.theme.base == "light") {
+            txt += "<img src=\"images/icon_power.png\" id=\"img" + index + "\" class=\"darkicon ";
+        }
+        else {
+            txt += "<img src=\"images/icon_power.png\" id=\"img" + index + "\" class=\"icon ";
+        }
         if (element.on === true) {
             txt += "on";
         }

diff --git a/main.js b/main.js
@@ -1,6 +1,6 @@
 const { app, BrowserWindow } = require('electron')
 
-function createWindow () {
+function createWindow() {
   // Create the browser window.
   const win = new BrowserWindow({
     width: 1263,

diff --git a/package.json b/package.json
@@ -1,11 +1,11 @@
 {
   "name": "wled-gui",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "main": "main.js",
   "scripts": {
     "start": "electron ."
   },
   "devDependencies": {
-    "electron": "^9.0.4"
+    "electron": "^10.1.1"
   }
 }