Refactored the dark mode into general theme, Automatic reload after t…

…heme selection, Updated README.md for theme customisation
sugarlabs · Feb 5, 2025 · 49c6456 · 49c6456
1 parent 8ebe319
commit 49c6456
Show file tree

Hide file tree

Showing 13 changed files with 648 additions and 399 deletions.
diff --git a/css/activities.css b/css/activities.css
@@ -16,19 +16,7 @@
   outline: none;
 }
 
-body:not(.dark-mode) #helpfulSearch,
-body:not(.dark-mode) .ui-autocomplete {
-    background-color: #fff !important;
-    color: #000 !important;
-}
-
-body:not(.dark-mode) .ui-autocomplete li:hover {
-    background-color: #ddd !important;
-}
 
-body:not(.dark-mode) #helpfulSearchDiv {
-    background-color: #f9f9f9 !important;
-}
 
 .modal {
   display: none;

diff --git a/css/darkmode.css b/css/darkmode.css
diff --git a/css/themes.css b/css/themes.css
@@ -0,0 +1,88 @@
+/* Dark Mode */
+
+.dark .blue {
+    background-color: #022363 !important;
+  }
+
+  .dark .blue.darken-1 {
+    background-color: #01143b !important;
+  }
+
+  .dark #floatingWindows > .windowFrame {
+    border: 2px solid #000000;
+    background-color: #454545;
+  }
+
+  .dark .wfbtItem {
+    background-color: #225a91;
+  }
+
+  .dark #floatingWindows > .windowFrame > .wfTopBar .wftTitle {
+    color: #e8e8e8;
+  }
+
+  .dark .popupMsg {
+    background-color: #084e86;
+    color: #e8e8e8;
+  }
+
+  .dark #printText {
+    border-color: #000000;
+  }
+
+  .dark #loading-image-container {
+    background: #1a1a1a !important;
+    background-color: #1a1a1a !important;
+  }
+
+  .dark #loadingText {
+    color: white !important;
+  }
+
+  .dark .dropdown-content li > a {
+    background-color: #1c1c1c;
+    color: #3fe0d1;
+  }
+
+  .dark .dropdown-content li > a:hover {
+    color: #252525;
+  }
+
+  .dark .dropdown-content {
+    background-color: #1c1c1c;
+  }
+
+  .dark .language-link {
+    color: #fff;
+  }
+
+  .dark .modal-content {
+    background-color: #1c1c1c;
+    color: #fff;
+  }
+
+  .dark #submitLilypond {
+    background-color: rgb(0, 102, 255);
+  }
+
+  .dark #search,
+  #helpfulSearch,
+  .ui-autocomplete {
+    background-color: #1c1c1c;
+    color: #fff;
+  }
+
+  .dark .ui-autocomplete li:hover {
+    background-color: #225a91;
+  }
+
+  .dark #helpfulSearchDiv {
+    background-color: transparent;
+  }
+
+  .dark #crossButton {
+    color: #fff;
+  }
+
+
+/* Your Custom Theme can go down if you dont want to modify the existing dark mode */
diff --git a/index.html b/index.html
@@ -70,7 +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" />
+        <link rel="stylesheet" href="css/themes.css" />
 
         <script src="lib/easeljs.min.js" defer></script>
 
@@ -776,13 +776,13 @@
                                     >
                                 </li>
                                 <li>
-                                    <a
-                                        id="darkModeIcon"
-                                        class="tooltipped"
-                                        data-position="bottom"
-                                        ><i class="material-icons md-48"
-                                            >brightness_4</i
-                                        ></a>
+                                  <a
+                                  id="themeSelectIcon"
+                                  class="tooltipped dropdown-trigger"
+                                  data-position="left"
+                                  data-activates="themedropdown"
+                                  ><i class="material-icons md-48">brightness_4</i></a
+                                >
                                 </li>
                                 <li>
                                     <a
@@ -920,6 +920,12 @@
                     <li><a id="he"></a></li>
                     <li><a id="ur"></a></li>
                 </ul>
+
+                <ul id="themedropdown" class="dropdown-content">
+                  <li><a id="light"></a></li>
+                  <li><a id="dark"></a></li>
+                </ul>
+
                 <div id="modal-container" style="display: none;z-index: 999;">
                     <ul id="newdropdown" class="dropdown-content" style="padding: 24px;">
                     </ul>

diff --git a/js/activity.js b/js/activity.js
@@ -26,7 +26,7 @@
    getMacroExpansion, getOctaveRatio, getTemperament, GOHOMEBUTTON,
    GOHOMEFADEDBUTTON, GRAND, HelpWidget, HIDEBLOCKSFADEDBUTTON,
    hideDOMLabel, initBasicProtoBlocks, initPalettes,
-   INLINECOLLAPSIBLES, jQuery, JSEditor, LanguageBox, Logo, MSGBLOCK,
+   INLINECOLLAPSIBLES, jQuery, JSEditor, LanguageBox, ThemeBox, Logo, MSGBLOCK,
    NANERRORMSG, NOACTIONERRORMSG, NOBOXERRORMSG, NOINPUTERRORMSG,
    NOMICERRORMSG, NOSQRTERRORMSG, NOSTRINGERRORMSG, PALETTEFILLCOLORS,
    PALETTESTROKECOLORS, PALETTEHIGHLIGHTCOLORS, HIGHLIGHTSTROKECOLORS,
@@ -85,6 +85,7 @@ let MYDEFINES = [
     "activity/turtle-singer",
     "activity/turtle-painter",
     "activity/languagebox",
+    "activity/themebox",
     "activity/basicblocks",
     "activity/blockfactory",
     "activity/piemenus",
@@ -272,15 +273,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
+        this.themes = ["light", "dark"];
         try {
-            if (this.storage.myThemeName === "darkMode") {
-                body.classList.add("dark-mode");
-            } else {
-                body.classList.remove("dark-mode");
+            for (let i = 0; i < this.themes.length; i++) {
+                if (this.themes[i] === this.storage.themePreference) {
+                    body.classList.add(this.themes[i]);
+                } else {
+                    body.classList.remove(this.themes[i]);
+                }
             }
         } catch (e) {
-            console.error("Error accessing myThemeName storage:", e);
+            console.error("Error accessing themePreference storage:", e);
         }
 
         this.beginnerMode = true;
@@ -385,6 +388,7 @@ class Activity {
             this.logo = null;
             this.pasteBox = null;
             this.languageBox = null;
+            this.themeBox = null;
             this.planet = null;
             window.converter = null;
             this.buttonsVisible = true;
@@ -6665,28 +6669,7 @@ class Activity {
 
             this._createErrorContainers();
 
-            // Function to toggle theme mode
-            this.toggleThemeMode = () => {
-                if (this.storage.myThemeName === "darkMode") {
-                    delete this.storage.myThemeName;
-                    localStorage.setItem("darkMode", "disabled");
-                } else {
-                    this.storage.myThemeName = "darkMode";
-                    localStorage.setItem("darkMode", "enabled");
-                }
-                const planetIframe = document.getElementById("planet-iframe");
-                if (planetIframe) {
-                    planetIframe.contentWindow.postMessage(
-                        { darkMode: localStorage.getItem("darkMode") },
-                        "*"
-                    );
-                }
-                try {
-                    window.location.reload();
-                } catch (e) {
-                    console.error("Error reloading the window:", e);
-                }
-            };
+
 
             /* Z-Order (top to bottom):
              *   menus
@@ -6714,6 +6697,7 @@ class Activity {
 
             this.pasteBox = new PasteBox(this);
             this.languageBox = new LanguageBox(this);
+            this.themeBox = new ThemeBox(this);
 
             // Show help on startup if first-time user.
             if (this.firstTimeUser) {
@@ -6755,7 +6739,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.renderThemeSelectIcon(this.themeBox, this.themes);
             this.toolbar.renderMergeIcon(_doMergeLoad);
             this.toolbar.renderRestoreIcon(restoreTrash);
             if (_THIS_IS_MUSIC_BLOCKS_) {
@@ -7320,7 +7304,7 @@ class Activity {
     saveLocally() {
         try {
             localStorage.setItem('beginnerMode', this.beginnerMode.toString());
-            localStorage.setItem('isDarkModeON', this.isDarkModeON.toString());
+            localStorage.setItem("themePreference", this.themePreference.toString());
         } catch (e) {
             // eslint-disable-next-line no-console
             console.error('Error saving to localStorage:', e);