Fix Dark Mode Bugs

Signed-off-by: Justin Charles <[email protected]>

Author: justin212407

css/themes.css

@@ -104,6 +104,14 @@
   color: white;
 }
 
+.dark .dropdown-content {
+  background-color: #1c1c1c;
+}
+
+.dark .dropdown-content:hover {
+  background-color: #292929; 
+}
+
 
 
 /* Your Custom Theme can go here if you don't want to modify the existing dark mode */

js/toolbar.js

@@ -1122,12 +1122,19 @@ class Toolbar {
 function renderNewProjectConfirmation() {
     const modalContainer = document.getElementById("modal-container");
     const newDropdown = document.getElementById("newdropdown");
+    const isDarkMode = document.body.classList.contains("dark");
+    newDropdown.style.backgroundColor = isDarkMode ? "#424242" : "#ffffff";
+    newDropdown.style.border = isDarkMode ? "1px solid #444444" : "1px solid #cccccc";
+    newDropdown.style.color = isDarkMode ? "#ffffff" : "#000000";
+    newDropdown.style.padding = "24px";
     newDropdown.innerHTML = '';
     const title = document.createElement("div");
-    title.innerHTML = `<h2 style="color: #0066FF; font-size: 24px; text-align: left; margin: 0;">${_("New project")}</h2>`;
+    title.innerHTML = `<h2 style="font-size: 24px; text-align: left; margin: 0; color: #2196F3;">${_("New project")}</h2>`;
     newDropdown.appendChild(title);
     const confirmationMessage = document.createElement("div");
-    confirmationMessage.innerHTML = `<div id="confirmation-message" style="color: #666666; font-size: 16px; margin-bottom: 24px; text-align: left;">${_("Are you sure you want to create a new project?")}</div>`;
+    confirmationMessage.innerHTML = `<div id="confirmation-message" style="font-size: 16px; margin-bottom: 24px; text-align: left; ${
+        isDarkMode ? "color: #ffffff;" : "color: #666666;"
+    }">${_("Are you sure you want to create a new project?")}</div>`;
     newDropdown.appendChild(confirmationMessage);
     const confirmationButtonLi = document.createElement("li");
     confirmationButtonLi.style.textAlign = "center";
@@ -1138,7 +1145,7 @@ function renderNewProjectConfirmation() {
     confirmationButton.style.backgroundColor = platformColor.blueButton;
     confirmationButton.style.color = "white";
     confirmationButton.style.textDecoration = "none";
-    confirmationButton.style.borderRadius = "4px";
+    confirmationButton.style.borderRadius = "0px";
     confirmationButton.style.fontWeight = "bold";
     confirmationButton.innerHTML = _("Confirm");
     confirmationButtonLi.appendChild(confirmationButton);

js/utils/platformstyle.js

@@ -115,10 +115,10 @@ let platformThemes = {
             "#66BB6A"
         ],
         gridWheelcolors: {
-            wheel: ["#1C1C1C"],
+            wheel: ["#D6D6D6"], 
             selected: {
-                fill: "#303030",
-                stroke: "#757575"
+                fill: "#858585", 
+                stroke: "#777"  
             }
         },
         drumWheelcolors: ["#008BA3", "#00ACC1"],