Feat: Add dark mode toggle and related styles to improve user experience

css/dark-theme.css

@@ -0,0 +1,34 @@
+/* Target body with maximum specificity */
+html[data-theme="dark"] body#body,
+body#body[data-theme="dark"],
+body#body[style*="background"][data-theme="dark"],
+#body[data-theme="dark"],
+[data-theme="dark"]#body {
+    background: #121212 !important;
+    background-color: #121212 !important;
+}
+
+/* Target the main container */
+body[data-theme="dark"] #main,
+body[data-theme="dark"] #canvas,
+body[data-theme="dark"] .canvasHolder {
+    background: #121212 !important;
+    background-color: #121212 !important;
+}
+
+/* Keep toolbar dark */
+body[data-theme="dark"] #toolbars,
+body[data-theme="dark"] .nav-wrapper {
+    background-color: #1e1e1e !important;
+}
+
+/* Override any dynamic background changes */
+@keyframes darkMode {
+    from { background: #121212 !important; }
+    to { background: #121212 !important; }
+}
+
+body[data-theme="dark"] {
+    animation: darkMode 1ms forwards !important;
+    transition: none !important;
+} 

index.html

@@ -113,6 +113,11 @@
                 doSearch();
             });
         </script>
+
+        <link rel="stylesheet" href="css/activity.css">
+        <link rel="stylesheet" href="css/dark-theme.css">
+        <script src="js/theme.js"></script>
+        <link rel="stylesheet" href="lib/materialize-iso.css">
     </head>
 
     <!-- #96D3F3-->
@@ -542,6 +547,9 @@
                                 <a id="record" class="left tooltipped" data-tooltip="Record">
                                 </a>   
                             </li>
+                            <li>
+                                <a id="theme-toggle" class="nav-item tooltipped" data-position="bottom" style="color: white; padding: 0 15px;">Dark Mode</a>
+                            </li>
                         </ul>
 
                         <ul class="main right">

js/theme.js

@@ -0,0 +1,23 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const themeToggle = document.getElementById('theme-toggle');
+
+    if (localStorage.getItem('theme') === 'dark') {
+        document.documentElement.setAttribute('data-theme', 'dark');
+        document.body.setAttribute('data-theme', 'dark');
+        themeToggle.textContent = 'Light Mode';
+    }
+
+    themeToggle.addEventListener('click', () => {
+        if (document.body.getAttribute('data-theme') === 'dark') {
+            document.documentElement.removeAttribute('data-theme');
+            document.body.removeAttribute('data-theme');
+            localStorage.setItem('theme', 'light');
+            themeToggle.textContent = 'Dark Mode';
+        } else {
+            document.documentElement.setAttribute('data-theme', 'dark');
+            document.body.setAttribute('data-theme', 'dark');
+            localStorage.setItem('theme', 'dark');
+            themeToggle.textContent = 'Light Mode';
+        }
+    });
+}); 

planet/css/dark-theme.css

@@ -0,0 +1,13 @@
+/* Only apply dark theme to main content, not loading screen */
+body[data-theme="dark"] {
+    background-color: #121212 !important;
+    color: #ffffff !important;
+}
+
+body[data-theme="dark"] .nav-extended {
+    background-color: #1e1e1e !important;
+}
+
+body[data-theme="dark"] .card {
+    background-color: #242424 !important;
+} 

planet/css/style.css

@@ -508,4 +508,94 @@ a {
 	cursor: pointer;
 	font-size: 16px;
 	outline: none;
+}
+
+.switch label {
+    display: flex;
+    align-items: center;
+}
+
+.switch label i {
+    margin: 0 5px;
+    font-size: 20px;
+}
+
+/* Customize switch colors for dark mode */
+[data-theme="dark"] .switch label input[type=checkbox]:checked + .lever {
+    background-color: #4a4a4a;
+}
+
+[data-theme="dark"] .switch label input[type=checkbox]:checked + .lever:after {
+    background-color: #26a69a;
+}
+
+/* Theme switch styling */
+.theme-switch {
+    padding: 0 15px;
+    display: flex;
+    align-items: center;
+}
+
+.theme-switch .switch {
+    margin: 0;
+}
+
+.theme-switch .switch label {
+    display: flex;
+    align-items: center;
+}
+
+.theme-switch .switch label i {
+    margin: 0 5px;
+    font-size: 20px;
+    color: #fff;
+}
+
+.theme-switch .switch .lever {
+    margin: 0 8px;
+}
+
+/* Ensure the switch is visible in both light and dark modes */
+.theme-switch .switch .lever:after {
+    background-color: #f1f1f1;
+}
+
+[data-theme="dark"] .theme-switch .switch .lever:after {
+    background-color: #26a69a;
+}
+
+/* Theme toggle styling */
+.nav-wrapper .switch {
+    margin: 0 15px;
+}
+
+.nav-wrapper .switch label {
+    display: flex;
+    align-items: center;
+    height: 64px;
+}
+
+.nav-wrapper .switch label i {
+    color: #fff;
+    margin: 0 8px;
+    font-size: 20px;
+}
+
+.nav-wrapper .switch .lever {
+    margin: 0 4px;
+}
+
+/* Theme toggle in nav */
+.nav-wrapper .switch {
+    padding: 0 10px;
+    margin-top: 15px;
+}
+
+.nav-wrapper .switch label i {
+    color: #fff;
+    vertical-align: middle;
+}
+
+.nav-wrapper .switch .lever {
+    margin: 0 8px;
 }

planet/index.html

@@ -4,7 +4,7 @@
             <title>Music Blocks </title>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <!--Import Google Icon Font-->
-        <link type="text/css" href="fonts/material-icons.css" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
         <!--Import materialize.css-->
         <link type="text/css" rel="stylesheet" href="libs/materialize.min.css" media="screen,projection"/>
 
@@ -17,6 +17,30 @@
         <!--Let browser know website is optimized for mobile-->
         <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 
+        <script>
+            window.addEventListener('load', function() {
+                const themeToggle = document.getElementById('theme-toggle');
+                if (!themeToggle) {
+                    console.error('Theme toggle not found');
+                    return;
+                }
+
+                if (localStorage.getItem('theme') === 'dark') {
+                    document.body.setAttribute('data-theme', 'dark');
+                }
+
+                themeToggle.onclick = function() {
+                    if (document.body.getAttribute('data-theme') === 'dark') {
+                        document.body.removeAttribute('data-theme');
+                        localStorage.setItem('theme', 'light');
+                    } else {
+                        document.body.setAttribute('data-theme', 'dark');
+                        localStorage.setItem('theme', 'dark');
+                    }
+                };
+            });
+        </script>
+
         <!--Import jQuery before materialize.js-->
         <script type="text/javascript" src="libs/jquery-3.2.1.min.js"></script>
         <script type="text/javascript" src="libs/materialize.min.js"></script>
@@ -40,6 +64,9 @@
 
         <script type="text/javascript" src="js/Planet.js"></script>
         <script type="text/javascript" src="js/main.js"></script>
+
+        <link rel="stylesheet" href="css/dark-theme.css">
+        <script src="js/theme.js" defer></script>
     </head>
     <script>
         document.addEventListener("scroll", function () {
@@ -66,28 +93,28 @@
         <nav class="nav-extended light-green lighten-1" role="navigation">
             <div class="nav-wrapper container">
                 <a id="logo-container" class="brand-logo inactiveLink"><i class="material-icons" id="planeticon">public</i></a>
+                <ul class="right"><li><a id="theme-toggle" class="waves-effect waves-light">Dark Mode</a></li></ul>
                 <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="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>
                     <li class="tab"><a id="global-tab" href="#global"></a></li>
-                    <li>
-                        <li id="s_one">
-                            <div class="nav-content" id="searchcontainer-one">
-                                <div class="container">
-                                    <div class="input-field search">
-                                        <i class="material-icons prefix "
-                                            id="searchicon">search</i><input
-                                            placeholder="Search here" id="global-search"
-                                            type="text"><span><i
-                                                class="material-icons"
-                                                id="search-close">clear</i></span>
-                                    </div>
+                    <li id="s_one">
+                        <div class="nav-content" id="searchcontainer-one">
+                            <div class="container">
+                                <div class="input-field search">
+                                    <i class="material-icons prefix "
+                                        id="searchicon">search</i><input
+                                        placeholder="Search here" id="global-search"
+                                        type="text"><span><i
+                                            class="material-icons"
+                                            id="search-close">clear</i></span>
                                 </div>
                             </div>
-                        </li>
+                        </div>
                     </li>
+                </li>
                 </ul>
             </div>
             </div>

planet/js/theme.js

@@ -0,0 +1,20 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const themeToggle = document.getElementById('theme-toggle');
+
+    if (localStorage.getItem('theme') === 'dark') {
+        document.body.setAttribute('data-theme', 'dark');
+        themeToggle.textContent = 'Light Mode';
+    }
+
+    themeToggle.addEventListener('click', () => {
+        if (document.body.getAttribute('data-theme') === 'dark') {
+            document.body.removeAttribute('data-theme');
+            localStorage.setItem('theme', 'light');
+            themeToggle.textContent = 'Dark Mode';
+        } else {
+            document.body.setAttribute('data-theme', 'dark');
+            localStorage.setItem('theme', 'dark');
+            themeToggle.textContent = 'Light Mode';
+        }
+    });
+});