Added Dark Mode for Planet Page

Signed-off-by: Justin Charles <charlesjustin2124@gmail.com>

Author: justin212407

planet/css/darkMode.css

@@ -0,0 +1,106 @@
+.dark-mode {
+    background-color: #303030; 
+    color: #e0e0e0; 
+}
+
+.dark-mode .nav-extended {
+    background-color: #2f6b2f !important; 
+    border-bottom: 1px solid #444444; 
+}
+
+.dark-mode .nav-wrapper .brand-logo,
+.dark-mode .nav-wrapper a,
+.dark-mode .tabs .tab a {
+    color: #ffffff !important;
+}
+
+.dark-mode .tabs .tab a.active {
+    color: #a8d5a8 !important; 
+    border-bottom: 2px solid #a8d5a8;
+}
+
+.dark-mode #backToTopBtn {
+    background-color: #2f6b2f !important; 
+    color: #ffffff !important; 
+}
+
+.dark-mode .modal {
+    background-color: #424242; 
+    color: #e0e0e0; 
+}
+
+.dark-mode .modal-footer {
+    background-color: #383838;
+}
+
+.dark-mode .dropdown-content {
+    background-color: #424242 !important; 
+    color: #ffffff !important;
+    border: 1px solid #444444;
+}
+
+.dark-mode .dropdown-content li > a:hover {
+    background-color: #383838 !important; 
+    color: #ffffff !important;
+}
+
+.dark-mode #view-more-chips {
+    color: #e0e0e0 !important; 
+}
+.dark-mode #local-projects .card {
+    background-color: #2a2a2a;
+    color: #e0e0e0; 
+    border: 1px solid #252525; 
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3); 
+}
+
+.dark-mode #local-projects .card .card-title {
+    color: #e0e0e0 !important; 
+}
+
+.dark-mode #local-projects .card .card-content {
+    color: #bdbdbd; 
+}s
+
+.dark-mode #local-projects .card:hover {
+    background-color: #242424;; 
+    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.5); 
+}
+
+.dark-mode #local-projects .card .btn {
+    background-color: #2f6b2f;
+    color: #ffffff;
+}
+
+.dark-mode #local-projects .card .btn:hover {
+    background-color: #388e3c; 
+}
+
+.dark-mode #global-projects .card {
+    background-color: #2a2a2a; 
+    color: #e0e0e0;
+    border: 1px solid #252525; 
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
+}
+
+.dark-mode #global-projects .card .card-title {
+    color: #e0e0e0 !important; 
+}
+
+.dark-mode #global-projects .card .card-content {
+    color: #bdbdbd; 
+}
+
+.dark-mode #global-projects .card:hover {
+    background-color: #242424; 
+    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.5); 
+}
+
+.dark-mode #global-projects .card .btn {
+    background-color: #2f6b2f; 
+    color: #ffffff;
+}
+
+.dark-mode #global-projects .card .btn:hover {
+    background-color: #388e3c; 
+}

planet/index.html

@@ -13,6 +13,7 @@
 
         <!--Import style.css-->
         <link type="text/css" rel="stylesheet" href="css/style.css"/>
+        <link type="text/css" rel="stylesheet" href="css/darkMode.css"/>
 
         <!--Let browser know website is optimized for mobile-->
         <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
@@ -68,6 +69,7 @@
                 <a id="logo-container" class="brand-logo inactiveLink"><i class="material-icons" id="planeticon">public</i></a>
                 <ul class="right"><li><a id="close-planet" class="tooltipped" data-position="bottom" data-delay="50" data-tooltip=""><i class="material-icons">close</i></a></li></ul>
                 <ul class="right"><li><a id="planet-open-file" class="tooltipped" data-position="bottom" data-delay="50" data-tooltip=""><i class="material-icons">folder_open</i></a></li></ul>
+                <ul class="right"><li><a id="toggle-dark-mode" class="tooltipped" data-position="bottom" data-delay="50" data-tooltip="Toggle Dark Mode"><i class="material-icons">brightness_6</i></a></li></ul>
                 <ul class="right"><li><a id="planet-new-project" class="tooltipped" data-position="bottom" data-delay="50" data-tooltip=""><i class="material-icons">note_add</i></a></li></ul>
                 <ul class="right tabs tabs-transparent" id="localglobal">
                     <li class="tab"><a class="active" id="local-tab" href="#local"></a></li>
@@ -336,5 +338,11 @@ <h4 id="projectviewer-title"></h4>
                 </div>
             </div>
         </div>
+        <script>
+            // Dark Mode Toggle Functionality
+            document.getElementById('toggle-dark-mode').addEventListener('click', function () {
+                document.body.classList.toggle('dark-mode');
+            });
+        </script>
     </body>
 </html>