Dark mode (#4244)

* highlights fix

* Dark Mode

* css file added

* css toogle

* linked to html

* fix 1

* update 2

* update 3

* suggested changes are updated

* added README file

* space

* no boolean

* platformColor

* platform2

* highlight fix

Author: Commanderk3

css/darkmode.css

@@ -0,0 +1,53 @@
+.dark-mode .blue {
+    background-color: #022363 !important;
+}
+
+.dark-mode .blue.darken-1 {
+    background-color: #01143b !important;
+}
+
+.dark-mode  #floatingWindows > .windowFrame {
+    border: 2px solid #000000;
+    background-color: #454545;
+}
+
+.dark-mode .wfbtItem {
+    background-color: #225a91;
+}
+
+.dark-mode #floatingWindows > .windowFrame > .wfTopBar .wftTitle {
+    color: #e8e8e8;
+}
+
+.dark-mode .popupMsg {
+    background-color: #084e86;
+    color: #e8e8e8;
+}
+
+.dark-mode #printText {
+    border-color: #000000;
+}
+
+.dark-mode #loading-image-container {
+    background: #1a1a1a !important;
+    background-color: #1a1a1a !important;
+}
+
+.dark-mode #loadingText {
+    color: white !important;
+}
+
+.dark-mode .dropdown-content li > a{
+    background-color: #1c1c1c;
+    color: #3fe0d1;
+}
+
+.dark-mode .dropdown-content li > a:hover {
+    color: #252525
+}
+
+.dark-mode .dropdown-content{
+    background-color: #1c1c1c;
+}
+
+

index.html

@@ -70,6 +70,7 @@
 
         <link type="text/css" href="fonts/material-icons.css" rel="stylesheet"/>
         <link rel="stylesheet" href="lib/materialize-iso.css" />
+        <link rel="stylesheet" href="css/darkmode.css" />
 
         <script src="lib/easeljs.min.js" defer></script>
 
@@ -767,6 +768,15 @@
                                         ></a
                                     >
                                 </li>
+                                <li>
+                                    <a
+                                        id="darkModeIcon"
+                                        class="tooltipped"
+                                        data-position="bottom"
+                                        ><i class="material-icons md-48"
+                                            >brightness_4</i
+                                        ></a>
+                                </li>
                                 <li>
                                     <a
                                         id="mergeWithCurrentIcon"

js/activity.js

@@ -272,6 +272,17 @@ class Activity {
         //Flag to check if any other input box is active or not
         this.isInputON = false;
 
+        // If the theme is set to "darkMode", enable dark mode else diable
+        try {
+            if (this.storage.myThemeName === "darkMode") {
+                body.classList.add("dark-mode");
+            } else {
+                body.classList.remove("dark-mode");
+            }
+        } catch (e) {
+            console.error("Error accessing myThemeName storage:", e);
+        }
+
         this.beginnerMode = true;
         try {
             if (this.storage.beginnerMode === undefined) {
@@ -1054,31 +1065,31 @@ class Activity {
             modal.style.transform = "translate(-50%, -50%)";
             modal.style.width = "400px";
             modal.style.padding = "24px";
-            modal.style.backgroundColor = "#fff";
+            modal.style.backgroundColor = platformColor.dialogueBox;
             modal.style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.2)";
             modal.style.borderRadius = "8px";
             modal.style.zIndex = "10000";
             modal.style.textAlign = "left";
             const title = document.createElement("h2");
             title.textContent = "Clear Workspace";
-            title.style.color = "#0066FF";
+            title.style.color = platformColor.blueButton;
             title.style.fontSize = "24px";
             title.style.margin = "0 0 16px 0";
             modal.appendChild(title);
             const message = document.createElement("p");
-            message.textContent = "Are you sure you want to clear the workspace?";
-            message.style.color = "#666666";
+            message.textContent = _("Are you sure you want to clear the workspace?");
+            message.style.color = platformColor.textColor;
             message.style.fontSize = "16px";
             message.style.marginBottom = "24px";
             modal.appendChild(message);
             // Add buttons
             const buttonContainer = document.createElement("div");
             buttonContainer.style.display = "flex";
             buttonContainer.style.justifyContent = "flex-start";
-        
+
             const confirmBtn = document.createElement("button");
             confirmBtn.textContent = "Confirm";
-            confirmBtn.style.backgroundColor = "#2196F3";
+            confirmBtn.style.backgroundColor = platformColor.blueButton;
             confirmBtn.style.color = "white";
             confirmBtn.style.border = "none";
             confirmBtn.style.borderRadius = "4px";
@@ -1670,7 +1681,7 @@ class Activity {
                 if (this.blockscale > 0) {
                     this.resizeDebounce = true;
                     this.blockscale -= 1;
-                    this.clearCache();                
+                    this.clearCache();
                     await this.blocks.setBlockScale(BLOCKSCALES[this.blockscale]);
                     this.blocks.checkBounds();
                     this.refreshCanvas();
@@ -6561,6 +6572,21 @@ class Activity {
 
             this._createErrorContainers();
 
+            // Function to toggle theme mode
+            this.toggleThemeMode = () => {
+                if (this.storage.myThemeName === "darkMode") {
+                    // If currently in dark mode, remove the theme
+                    delete this.storage.myThemeName;
+                } else {
+                    this.storage.myThemeName = "darkMode";
+                }
+                try {
+                    window.location.reload();
+                } catch (e) {
+                    console.error("Error reloading the window:", e);
+                }
+            };
+
             /* Z-Order (top to bottom):
              *   menus
              *   palettes
@@ -6627,6 +6653,7 @@ class Activity {
             this.toolbar.renderModeSelectIcon(doSwitchMode, doRecordButton, doAnalytics, doOpenPlugin, deletePlugin, setScroller);
             this.toolbar.renderRunSlowlyIcon(doSlowButton);
             this.toolbar.renderRunStepIcon(doStepButton);
+            this.toolbar.renderDarkModeIcon(this.toggleThemeMode);
             this.toolbar.renderMergeIcon(_doMergeLoad);
             this.toolbar.renderRestoreIcon(restoreTrash);
             if (_THIS_IS_MUSIC_BLOCKS_) {
@@ -7190,6 +7217,7 @@ class Activity {
     saveLocally() {
         try {
             localStorage.setItem('beginnerMode', this.beginnerMode.toString());
+            localStorage.setItem('isDarkModeON', this.isDarkModeON.toString());
         } catch (e) {
             console.error('Error saving to localStorage:', e);
         }

js/palette.js

@@ -130,12 +130,13 @@ class Palettes {
         td.width = 1.5 * this.cellSize;
         td.height = 1.5 * this.cellSize;
         td.style.position = "relative";
+        td.style.backgroundColor = platformColor.paletteBackground;
         td.appendChild(
             makePaletteIcons(
                 PALETTEICONS[MULTIPALETTEICONS[i]]
-                    .replace("background_fill_color", platformColor.selectorBackground)
-                    .replace(/stroke_color/g, platformColor.ruleColor)
-                    .replace(/fill_color/g, platformColor.background),
+                    .replace("background_fill_color", platformColor.paletteLabelBackground)
+                    .replace(/stroke_color/g, platformColor.strokeColor)
+                    .replace(/fill_color/g, platformColor.fillColor),
                 1.5 * this.cellSize,
                 1.5 * this.cellSize
             )
@@ -146,7 +147,7 @@ class Palettes {
         cover.style.top = "0";
         cover.style.width = "100%";
         cover.style.height = "1px";
-        cover.style.background = platformColor.selectorBackground;
+        cover.style.background = platformColor.paletteLabelBackground;
         td.appendChild(cover);
         td.onmouseover = () => {
             this.showSelection(i, tr);
@@ -161,23 +162,23 @@ class Palettes {
             if (j === i) {
                 img = makePaletteIcons(
                     PALETTEICONS[MULTIPALETTEICONS[j]]
-                        .replace("background_fill_color", platformColor.selectorSelected)
-                        .replace(/stroke_color/g, platformColor.ruleColor)
-                        .replace(/fill_color/g, platformColor.background),
+                        .replace("background_fill_color", platformColor.paletteLabelSelected)
+                        .replace(/stroke_color/g, platformColor.strokeColor)
+                        .replace(/fill_color/g, platformColor.fillColor),
                     this.cellSize,
                     this.cellSize
                 );
-                tr.children[j].children[1].style.background = platformColor.selectorSelected;
+                tr.children[j].children[1].style.background = platformColor.paletteLabelSelected;
             } else {
                 img = makePaletteIcons(
                     PALETTEICONS[MULTIPALETTEICONS[j]]
-                        .replace("background_fill_color", platformColor.selectorBackground)
-                        .replace(/stroke_color/g, platformColor.ruleColor)
-                        .replace(/fill_color/g, platformColor.background),
+                        .replace("background_fill_color", platformColor.paletteLabelBackground)
+                        .replace(/stroke_color/g, platformColor.strokeColor)
+                        .replace(/fill_color/g, platformColor.fillColor),
                     this.cellSize,
                     this.cellSize
                 );
-                tr.children[j].children[1].style.background = platformColor.selectorBackground;
+                tr.children[j].children[1].style.background = platformColor.paletteLabelBackground;
             }
             tr.children[j].children[0].src = img.src;
         }
@@ -283,7 +284,7 @@ class Palettes {
             );
         }
     }
-    
+
     makeSearchButton(name, icon, listBody) {
         const row = listBody.insertRow(-1);
         const img = row.insertCell(-1);
@@ -302,6 +303,7 @@ class Palettes {
         row.style.flexDirection = "row";
         row.style.alignItems = "center";
         row.style.width = "126px";
+        row.style.backgroundColor = platformColor.paletteBackground;
 
         this._loadPaletteButtonHandler(name, row);
     }
@@ -323,6 +325,13 @@ class Palettes {
         row.style.flexDirection = "row";
         row.style.alignItems = "center";
         row.style.width = "126px";
+        row.style.backgroundColor = platformColor.paletteBackground;
+        row.addEventListener('mouseover', () => {
+            row.style.backgroundColor = platformColor.hoverColor;
+        });
+        row.addEventListener('mouseout', () => {
+            row.style.backgroundColor = platformColor.paletteBackground;
+        });
 
         this._loadPaletteButtonHandler(name, row);
     }
@@ -426,7 +435,7 @@ class Palettes {
                 'px"bgcolor="white"><thead><tr><td style= "width:28px"></tr></thead><tbody></tbody></table></div>';
             element.childNodes[0].style.border = `1px solid ${platformColor.selectorSelected}`;
             document.body.appendChild(element);
-    
+
         } catch (e) {
             console.error('Error clearing palettes:', e);
         }
@@ -457,9 +466,9 @@ class Palettes {
                 timeout = setTimeout(() => this.showPalette(name), 400);
             }
         };
-        
+
         row.onmouseout = () => clearTimeout(timeout);
-        
+
         // eslint-disable-next-line no-unused-vars
         row.onclick = (event) => {
             if (name == "search") {
@@ -881,7 +890,7 @@ class Palette {
         if (createHeader) {
             let header = this.menuContainer.children[0];
             header = header.insertRow();
-            header.style.background = platformColor.selectorSelected;
+            header.style.backgroundColor = platformColor.paletteLabelBackground;
             header.innerHTML =
                 '<td style ="width: 100%; height: 42px; box-sizing: border-box; display: flex; flex-direction: row; align-items: center; justify-content: space-between;"></td>';
             header = header.children[0];
@@ -900,7 +909,7 @@ class Palette {
             const label = document.createElement("span");
             label.textContent = toTitleCase(_(this.name));
             label.style.fontWeight = "bold";
-            label.style.color = platformColor.paletteBackground;
+            label.style.color = platformColor.textColor;
             header.appendChild(label);
 
             const closeDownImg = document.createElement("span");

js/planetInterface.js

@@ -307,6 +307,7 @@ class PlanetInterface {
          */
         this.init = async () => {
             this.iframe = document.getElementById("planet-iframe");
+            this.iframe.style.backgroundColor = platformColor.background;
             try {
                 await this.iframe.contentWindow.makePlanet(
                     _THIS_IS_MUSIC_BLOCKS_,

js/toolbar.js

@@ -67,6 +67,7 @@ class Toolbar {
                 ["delPluginIcon", _("Delete plugin")],
                 ["enableHorizScrollIcon", _("Enable horizontal scrolling")],
                 ["disableHorizScrollIcon", _("Disable horizontal scrolling")],
+                ["darkModeIcon", _("Change theme")],
                 ["mergeWithCurrentIcon", _("Merge with current project")],
                 ["chooseKeyIcon", _("Set Pitch Preview")],
                 ["toggleJavaScriptIcon", _("JavaScript Editor")],
@@ -128,6 +129,7 @@ class Toolbar {
                 _("Delete plugin"),
                 _("Enable horizontal scrolling"),
                 _("Disable horizontal scrolling"),
+                _("Change theme"),
                 _("Merge with current project"),
                 _("Set Pitch Preview"),
                 _("JavaScript Editor"),
@@ -193,6 +195,7 @@ class Toolbar {
                 ["delPluginIcon", _("Delete plugin")],
                 ["enableHorizScrollIcon", _("Enable horizontal scrolling")],
                 ["disableHorizScrollIcon", _("Disable horizontal scrolling")],
+                ["darkModeIcon", _("Change theme")],
                 ["mergeWithCurrentIcon", _("Merge with current project")],
                 ["toggleJavaScriptIcon", _("JavaScript Editor")],
                 ["restoreIcon", _("Restore")],
@@ -249,6 +252,7 @@ class Toolbar {
                 _("Delete plugin"),
                 _("Enable horizontal scrolling"),
                 _("Disable horizontal scrolling"),
+                _("Change theme"),
                 _("Merge with current project"),
                 _("JavaScript Editor"),
                 _("Restore"),
@@ -433,7 +437,7 @@ class Toolbar {
 
     /**
      * Renders the load icon with the provided onclick handler.
-     * 
+     *
      * @public
      * @param {Function} onclick - The onclick handler for the load icon.
      * @returns {void}
@@ -446,6 +450,14 @@ class Toolbar {
         };
     }
 
+    renderDarkModeIcon(onclick) {
+        const darkModeIcon = docById("darkModeIcon");
+
+        darkModeIcon.onclick = () => {
+            onclick();
+        }
+    }
+
     /**
      * Renders the wrap icon.
      * 
@@ -1085,7 +1097,7 @@ function renderNewProjectConfirmation() {
     const confirmationButton = document.createElement("a");
     confirmationButton.id = "new-project";
     confirmationButton.style.display = "inline-block";
-    confirmationButton.style.backgroundColor = "#2196F3";
+    confirmationButton.style.backgroundColor = platformColor.blueButton;
     confirmationButton.style.color = "white";
     confirmationButton.style.textDecoration = "none";
     confirmationButton.style.borderRadius = "4px";