Added Dark Mode for Planet Page

planet/css/darkMode.css

@@ -0,0 +1,172 @@
+.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; 
+}
+
+.dark-mode .modal-footer .btn-flat {
+    color: #ffffff !important; 
+    background-color: transparent !important; 
+    transition: background-color 0.3s ease, color 0.3s ease;
+    font-weight: bold;
+}
+
+.dark-mode .modal-footer .btn-flat:hover {
+    background-color: #a8d5a8 !important; 
+    color: #303030 !important; 
+}
+.dark-mode .close-button {
+    color: #e0e0e0; 
+    font-size: 1.5rem; 
+    transition: color 0.3s ease;
+}
+
+.dark-mode .close-button:hover {
+    color: #a8d5a8;
+}
+
+.dark-mode .select-wrapper {
+    position: relative;
+    height: 3rem; 
+    line-height: 3rem; 
+    margin-top: 0.5rem; 
+}
+
+.dark-mode .select-wrapper input.select-dropdown {
+    color: #ffffff !important; 
+    font-size: 1rem; 
+    line-height: normal; 
+    padding-left: 10px; 
+    height: 3rem; 
+    box-sizing: border-box; 
+    background-color: #424242 !important; 
+    border: 1px solid #444444 !important; 
+}
+
+.dark-mode .select-wrapper:after {
+    content: '\25BC'; 
+    position: absolute;
+    top: 50%; 
+    right: 10px; 
+    transform: translateY(-50%);
+    color: #ffffff !important; 
+    font-size: 0.8rem; 
+    pointer-events: none; 
+}
+
+.dark-mode .dropdown-content {
+    background-color: #424242 !important; 
+    border: 1px solid #444444; 
+    color: #ffffff !important; 
+}
+
+.dark-mode .dropdown-content li > a {
+    color: #ffffff !important; 
+    padding: 0.5rem 1rem; 
+}
+
+.dark-mode .dropdown-content li > a:hover {
+    background-color: #383838 !important; 
+    color: #a8d5a8 !important;
+}

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>