Improve readability of Set Pitch Preview text in light mode (#5165)

* Fixed text color in light mode

* fix: help widget in dark mode and overall text coloring

* fix prettier formatting

Author: kartikktripathi

css/activities.css

@@ -1182,7 +1182,6 @@ table {
   overflow-x: hidden;
   overflow-y: auto;
   width: 350px;
-  background: #e8e8e8 !important;
   padding: 1rem 1rem 0 0;
   display: flex;
   flex-direction: column;

css/darkmode.css

@@ -1,10 +1,35 @@
-/* css/darkmode.css - placeholder dark mode styles */
-:root{
-  --bg: #0f0f10;
-  --fg: #e8e8e8;
-}
+/* Light Mode Defaults */
 body {
+  --bg: #e8e8e8;
+  --fg: #666666;
+  --overlay-bg: rgba(255, 255, 255, 0.75);
+}
+
+/* Dark Mode Overrides */
+body.dark {
+  --bg: #1d1d20;
+  --fg: #e8e8e8;
+  --overlay-bg: rgba(15, 15, 16, 0.75);
+
   background: var(--bg);
   color: var(--fg);
 }
 
+/* Help widget colors */
+.dark #helpBodyDiv {
+  background: #1d1d20;
+  color: var(--fg);
+}
+
+.dark #helpBodyDiv > .heading,
+.dark #helpBodyDiv p {
+  color: var(--fg);
+}
+/* Fix white side bars in Help / Tour widget */
+.dark #floatingWindows .wfWinBody {
+  background-color: var(--bg) !important;
+}
+
+.dark #floatingWindows .windowFrame {
+  background-color: var(--bg) !important;
+}

css/themes.css

@@ -34,8 +34,8 @@
 }
 
 .dark #floatingWindows>.windowFrame {
-  border: 2px solid #000000;
-  background-color: #454545;
+  border: 2px solid var(--border);
+  background-color: var(--bg);
 }
 
 .dark .wfbtItem {
@@ -46,6 +46,11 @@
   color: #e8e8e8;
 }
 
+.dark #floatingWindows>.windowFrame>.wfWinBody .wfbWidget {
+  color: #ccc !important;
+  background-color: #3f3f44 !important;
+}
+
 .dark .popupMsg {
   background-color: #084e86;
   color: #e8e8e8;
@@ -56,8 +61,7 @@
 }
 
 .dark #loading-image-container {
-  background: #1a1a1a !important;
-  background-color: #1a1a1a !important;
+  background-color: var(--bg) !important;
 }
 
 .dark #loadingText {
@@ -68,18 +72,18 @@
   color: #fff;
 }
 
-.dark .modal-content {
-  background-color: #1c1c1c;
-  color: #fff;
+.modal-content {
+  background-color: var(--panel-bg);
+  color: var(--fg);
 }
 
 .dark #submitLilypond {
   background-color: rgb(0, 102, 255);
 }
 
 .dark #search,
-#helpfulSearch,
-.ui-autocomplete {
+.dark #helpfulSearch,
+.dark .ui-autocomplete {
   background-color: #1c1c1c !important;
   color: #fff !important;
 }
@@ -139,5 +143,20 @@
 .dark #confirmation-message {
   color: #e2e2e2;
 }
+body {
+  --border: #cccccc;
+  --bg: #ffffff;
+  --fg: #666666;
+  --panel-bg: #f5f5f5;
+  --accent: #2196F3;
+}
+
+body.dark {
+  --border: #000000;
+  --bg: #1d1d20;
+  --fg: #e8e8e8;
+  --panel-bg: #1c1c1c;
+  --accent: #3fe0d1;
+}
 
 /* Your Custom Theme can go here if you don't want to modify the existing dark mode */

dist/css/windows.css

@@ -189,7 +189,6 @@
     height: 100vh;
     left: 0 !important;
     top: 0 !important;
-    background-color: #e8e8e8;
     display: flex;
     flex-direction: column;
   }
@@ -292,7 +291,6 @@
     height: 100vh;
     left: 0 !important;
     top: 0 !important;
-    background-color: #e8e8e8;
     display: flex;
     flex-direction: column;
   }
@@ -369,7 +367,6 @@
     height: 100vh;
     left: 0;
     top: 0;
-    background-color: #e8e8e8;
     display: flex;
     flex-direction: column;
   }

js/widgets/help.js

@@ -73,7 +73,7 @@ class HelpWidget {
         // Which help page are we on?
 
         this._helpDiv.style.width = 100 + "%";
-        this._helpDiv.style.backgroundColor = "#e8e8e8";
+        // this._helpDiv.style.backgroundColor = "#e8e8e8";
 
         // this._helpDiv.style.maxHeight = "100%";
         // this._helpDiv.style.overflowY = "auto";
@@ -453,7 +453,7 @@ class HelpWidget {
 
         //this._helpDiv.style.width = "500px";
         this._helpDiv.style.height = "70vh";
-        this._helpDiv.style.backgroundColor = "#e8e8e8";
+        // this._helpDiv.style.backgroundColor = "#e8e8e8";
 
         const helpDivHTML =
             '<div id="right-arrow" class="hover" tabindex="-1"></div><div id="left-arrow" class="hover" tabindex="-1"></div><div id="helpButtonsDiv" tabindex="-1"></div><div id="helpBodyDiv" tabindex="-1"></div>';
@@ -536,7 +536,7 @@ class HelpWidget {
 
             const helpBody = docById("helpBodyDiv");
             helpBody.style.height = "70vh";
-            helpBody.style.backgroundColor = "#e8e8e8";
+            // helpBody.style.backgroundColor = "#e8e8e8";
             if (message) {
                 let body = "";
                 if (message.length > 1) {

js/widgets/widgetWindows.js

@@ -232,12 +232,12 @@ class WidgetWindow {
             this._overlayframe.style.width = "100vw";
             this._overlayframe.style.height = "calc(100vh - 64px)";
             this._overlayframe.style.border = "0.25vw solid black";
-            this._overlayframe.style.backgroundColor = "rgba(255,255,255,0.75)";
+            this._overlayframe.style.backgroundColor = "var(--overlay-bg)";
         } else {
             this._frame.style.zIndex = "10000";
             this._overlayframe.style.border = "0px";
             this._overlayframe.style.zIndex = "-1";
-            this._overlayframe.style.backgroundColor = "rgba(255,255,255,0)";
+            this._overlayframe.style.backgroundColor = "transparent";
         }
     }