Syncing dark mode between planet page and main page (#4321)

* Update index.html

moving script for dark mode to Planet.js

* Update Planet.js

* Syncing planet darkmode

* Update planetInterface.js

Making the Dark mode works well in Planet

Author: omsuneri

js/activity.js

@@ -6677,10 +6677,18 @@ class Activity {
             // Function to toggle theme mode
             this.toggleThemeMode = () => {
                 if (this.storage.myThemeName === "darkMode") {
-                    // If currently in dark mode, remove the theme
                     delete this.storage.myThemeName;
+                    localStorage.setItem("darkMode", "disabled");
                 } else {
                     this.storage.myThemeName = "darkMode";
+                    localStorage.setItem("darkMode", "enabled");
+                }
+                const planetIframe = document.getElementById("planet-iframe");
+                if (planetIframe) {
+                    planetIframe.contentWindow.postMessage(
+                        { darkMode: localStorage.getItem("darkMode") },
+                        "*"
+                    );
                 }
                 try {
                     window.location.reload();

js/planetInterface.js

@@ -307,7 +307,6 @@ class PlanetInterface {
          */
         this.init = async () => {
             this.iframe = document.getElementById("planet-iframe");
-            this.iframe.style.backgroundColor = platformColor.background;
             try {
                 await this.iframe.contentWindow.makePlanet(
                     _THIS_IS_MUSIC_BLOCKS_,

planet/index.html

@@ -338,11 +338,5 @@ <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>

planet/js/Planet.js

@@ -150,3 +150,30 @@ class Planet {
     };
 
 }
+
+// trigger and sync the dark mode of the planet with the main page
+document.addEventListener("DOMContentLoaded", function () {
+    const toggleButton = document.getElementById("toggle-dark-mode");
+
+    if (localStorage.getItem("darkMode") === "enabled") {
+        document.body.classList.add("dark-mode");
+    }
+    if (toggleButton) {
+        toggleButton.addEventListener("click", function () {
+            document.body.classList.toggle("dark-mode");
+            const newMode = document.body.classList.contains("dark-mode") ? "enabled" : "disabled";
+
+            localStorage.setItem("darkMode", newMode);
+            localStorage.setItem("darkModeTrigger", Date.now());
+        });
+    }
+    window.addEventListener("storage", function (event) {
+        if (event.key === "darkMode" || event.key === "darkModeTrigger") {
+            if (localStorage.getItem("darkMode") === "enabled") {
+                document.body.classList.add("dark-mode");
+            } else {
+                document.body.classList.remove("dark-mode");
+            }
+        }
+    });
+});