Feature: Changed the styling of theme dropdown list to icons (#4373)

* Changed the styling of theme dropdown to icons * Adjusted the dropdown postioning to center * Added translations of theme tooltips for hindi
sugarlabs · Feb 11, 2025 · f98ec73 · f98ec73
1 parent a0d4ece
commit f98ec73
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 53 deletions.
diff --git a/css/themes.css b/css/themes.css
@@ -1,3 +1,23 @@
+/* Theme DropDown Styling */
+
+#themedropdown{
+  background-color: transparent;
+  box-shadow: none;
+  display: flex;         
+  transform: translateX(-25%) !important;  
+}
+
+#themedropdown a{
+  color: #2196F3;
+  transition: all 0.3s ease;
+}
+#themedropdown a:hover{
+  color: #1E88E5;
+  background-color: transparent;
+  transition: all 0.3s ease;
+}
+
+
 /* Dark Mode */
 
 .dark .blue {
@@ -39,19 +59,6 @@
     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;
   }

diff --git a/index.html b/index.html
@@ -781,7 +781,7 @@
                                   class="tooltipped dropdown-trigger"
                                   data-position="left"
                                   data-activates="themedropdown"
-                                  ><i class="material-icons md-48">brightness_4</i></a
+                                  ><i class="material-icons md-48">brightness_7</i></a
                                 >
                                 </li>
                                 <li>
@@ -921,9 +921,9 @@
                     <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 style="display: none;" id="themedropdown" class="dropdown-content">
+                  <a id="light" class="tooltipped" data-tooltip="Light Mode"><i class='material-icons'>brightness_7</i></a>
+                  <a id="dark" class="tooltipped" data-tooltip="Dark Mode"><i class='material-icons'>brightness_4</i></a>
                 </ul>
 
                 <div id="modal-container" style="display: none;z-index: 999;">

diff --git a/js/toolbar.js b/js/toolbar.js
@@ -68,6 +68,8 @@ class Toolbar {
                 ["enableHorizScrollIcon", _("Enable horizontal scrolling")],
                 ["disableHorizScrollIcon", _("Disable horizontal scrolling")],
                 ["themeSelectIcon", _("Change theme")],
+                ["light", _("Light Mode")],
+                ["dark", _("Dark Mode")],
                 ["mergeWithCurrentIcon", _("Merge with current project")],
                 ["chooseKeyIcon", _("Set Pitch Preview")],
                 ["toggleJavaScriptIcon", _("JavaScript Editor")],
@@ -104,10 +106,7 @@ class Toolbar {
                 ["ar", _("عربى"), "innerHTML"],
                 ["te", _("తెలుగు"), "innerHTML"],
                 ["he", _("עִברִית"), "innerHTML"],
-                ["ur", _("اردو"), "innerHTML"],
-                ["light", _("Light Mode"), "innerHTML"],
-                ["dark", _("Dark Mode"), "innerHTML"],
-                // ["custom", _("Custom Theme"), "innerHTML"],
+                ["ur", _("اردو"), "innerHTML"]
             ];
 
             // Workaround for FF
@@ -134,7 +133,9 @@ class Toolbar {
                 _("Delete plugin"),
                 _("Enable horizontal scrolling"),
                 _("Disable horizontal scrolling"),
-                _("Change theme"),
+                _("Change theme"),               
+                _("Light Mode"),
+                _("Dark Mode"),
                 _("Merge with current project"),
                 _("Set Pitch Preview"),
                 _("JavaScript Editor"),
@@ -177,10 +178,7 @@ class Toolbar {
                 _("igbo"),
                 _("عربى"),
                 _("עִברִית"),
-                _("اردو"),
-                _("Light Mode"),
-                _("Dark Mode")
-                // _("Custom Theme"),
+                _("اردو")
             ];
         } else {
             strings = [
@@ -207,6 +205,8 @@ class Toolbar {
                 ["enableHorizScrollIcon", _("Enable horizontal scrolling")],
                 ["disableHorizScrollIcon", _("Disable horizontal scrolling")],
                 ["themeSelectIcon", _("Change theme")],
+                ["light", _("Light Mode")],
+                ["dark", _("Dark Mode")],
                 ["mergeWithCurrentIcon", _("Merge with current project")],
                 ["toggleJavaScriptIcon", _("JavaScript Editor")],
                 ["restoreIcon", _("Restore")],
@@ -238,10 +238,7 @@ class Toolbar {
                 ["ar", _("عربى"), "innerHTML"],
                 ["te", _("తెలుగు"), "innerHTML"],
                 ["he", _("עִברִית"), "innerHTML"],
-                ["ur", _("اردو"), "innerHTML"],
-                ["light", _("Light Mode"), "innerHTML"],
-                ["dark", _("Dark Mode"), "innerHTML"]
-                // ["custom", _("Custom Theme"), "innerHTML"],
+                ["ur", _("اردو"), "innerHTML"]
             ];
 
             // Workaround for FF
@@ -268,7 +265,9 @@ class Toolbar {
                 _("Delete plugin"),
                 _("Enable horizontal scrolling"),
                 _("Disable horizontal scrolling"),
-                _("Change theme"),
+                _("Change theme"),               
+                _("Light Mode"),
+                _("Dark Mode"),
                 _("Merge with current project"),
                 _("JavaScript Editor"),
                 _("Restore"),
@@ -300,10 +299,7 @@ class Toolbar {
                 _("igbo"),
                 _("عربى"),
                 _("עִברִית"),
-                _("اردو"),
-                _("Light Mode"),
-                _("Dark Mode")
-                // _("Custom Theme"),
+                _("اردو")
             ];
         }
 
@@ -472,6 +468,12 @@ class Toolbar {
     }
 
     renderThemeSelectIcon(themeBox, themes) {
+        const icon = document.getElementById("themeSelectIcon")
+        themes.forEach((theme) =>{
+            if(localStorage.themePreference === theme){
+                icon.innerHTML = document.getElementById(theme).innerHTML;
+            }
+        })
         const themeSelectIcon = docById("themeSelectIcon");
         let themeList = themes;
         themeSelectIcon.onclick = () => {

diff --git a/js/utils/README.md b/js/utils/README.md
@@ -29,34 +29,30 @@ This guide explains how you can add your own custom theme or customize an existi
 
 Note: If you want to customise an existing theme, just put your changes in the dark mode and choose dark mode from the theme dropdown. You can skip to step no. 6 if that is your goal.
 
-1.  **Adding your theme's name to the list in index.html**
+1.  **Adding your theme's icon to the list in index.html**
 
-    Go to index.html from root, and add your theme to the list (please follow the conventions used by other themes for proper implementation)
+    Go to index.html from root, and add your theme's icon to the list (please follow the conventions used by other themes for proper implementation)
+    Add your theme's icon to the bottom of the list, you can find icons in [Material Icons](https://materializecss.com/icons.html).
 
     ```javascript
-    <ul id="themedropdown" class="dropdown-content">
-        <li>
-            <a id="light"></a>
-        </li>
-        <li>
-            <a id="dark"></a>
-        </li>
-        <li>
-            <a id="custom"></a>
-        </li>
+    <ul style="display: none;" id="themedropdown" class="dropdown-content">
+        <a id="light" class="tooltipped" data-tooltip="Light Mode"><i class='material-icons'>brightness_7</i></a>
+        <a id="dark" class="tooltipped" data-tooltip="Dark Mode"><i class='material-icons'>brightness_4</i></a>
+        <a id="custom" class="tooltipped" data-tooltip="Custom Theme"><i class='material-icons'>choose_your_material_icon</i></a>
     </ul>
     ```
 
 2.  **Now go to js/toolbar.js, find init(activity){...}**
 
     There will be 4 arrays named string (two in an if statement, rest two in the else statement).
-    Add your theme's name to the bottom of the array
+    Add your theme's name to the bottom of the pre-existing themes.
+
 
     ```javascript
     string = [[...],
-        ["light", _("Light Mode"), "innerHTML"],
-        ["dark", _("Dark Mode"), "innerHTML"],
-        ["custom", _("Custom Theme"), "innerHTML"]];
+        ["light", _("Light Mode")],
+        ["dark", _("Dark Mode")],
+        ["custom", _("Custom Theme")]];
     ```
 
     ```javascript
@@ -177,7 +173,7 @@ Note: If you want to customise an existing theme, just put your changes in the d
 
 6.  **Now to add styling for your theme**
 
-    (If you skipped to here, these are the files responsible for styling, the CSS is easy to understand and modify, but to change the color of elements in javascript files, look at the entire code base and search for "platformColor". You will find all the places where JS is used to style. You don't have to add your own theme, you can just change styling in dark mode CSS and JS, and then choose dark mode n the toolbar.)
+    (If you skipped to here, these are the files responsible for styling, the CSS is easy to understand and modify, but to change the color of elements in javascript files, look at the entire code base and search for "platformColor". You will find all the places where JS is used to style. You don't have to add your own theme, you can just change styling in dark mode CSS and JS, and then choose dark mode in the toolbar.)
 
     You have to add styling to three places,
 

diff --git a/js/widgets/jseditor.js b/js/widgets/jseditor.js
@@ -210,7 +210,7 @@ class JSEditor {
         menuRight.appendChild(styleBtn);
         menubar.appendChild(menuRight);
         this._editor.appendChild(menubar);
-        generateTooltip(styleBtn, "Change Theme", "left");
+        generateTooltip(styleBtn, "Change theme", "left");
 
         const editorContainer = document.createElement("div");
         editorContainer.id = "editor_container";

diff --git a/localization.ini b/localization.ini
@@ -6233,6 +6233,9 @@ Load-plugin = प्लगइन लोड करें
 Delete-plugin = प्लगइन हटाएं
 Enable-horizontal-scrolling = क्षैतिज स्क्रोलिंग सक्षम करें
 Disable-horizontal-scrolling = क्षैतिज स्क्रोलिंग अक्षम करें
+Change-theme = थीम बदलें
+Light-Mode = प्रकाश मोड
+Dark-Mode = अंधेरा मोड
 Merge-with-current-project = वर्तमान परियोजना के साथ मर्ज करें
 Set-Pitch-Preview = पिच पूर्वावलोकन सेट करें
 Restore = पुनर्स्थापित करें