Merge branch 'master' of https://github.com/sugarlabs/musicblocks

Author: falgun143

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;

css/darkmode.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 here if you don't want to modify the existing dark mode */

css/themes.css

@@ -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>