Fix: Embed Theme switching when appearance is using System Theme (#8655)

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
2023-05-05 16:54:06 +05:30
parent 2f175eacf5
commit d3f77bf292
3 changed files with 35 additions and 6 deletions
@@ -12,6 +12,9 @@
      .cell-2 {
        margin: 10px;
      }
+      .dark {
+        background-color:rgb(16 16 16);
+      }
    </style>
    <script>
      const searchParams = new URL(document.URL).searchParams;
@@ -22,8 +25,5 @@
  <script type="module" src="./src/preview.ts"></script>
  <body>
    <div id="my-embed" style="width: 100%; height: 90%; overflow: scroll"></div>
-    <script type="module">
-      
-    </script>
  </body>
 </html>
@@ -90,3 +90,27 @@ previewWindow.addEventListener("message", (e) => {
    }
  }
 });
+
+function makePreviewPageUseSystemPreference() {
+  const colorSchemeQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+  function handleColorSchemeChange(e: MediaQueryListEvent) {
+    if (e.matches) {
+      // Dark color scheme
+      document.body.classList.remove("light");
+      document.body.classList.add("dark");
+    } else {
+      // Light color scheme
+      document.body.classList.add("light");
+      document.body.classList.remove("dark");
+    }
+  }
+
+  colorSchemeQuery.addEventListener("change", handleColorSchemeChange);
+
+  // Initial check
+  handleColorSchemeChange(new MediaQueryListEvent("change", { matches: colorSchemeQuery.matches }));
+}
+
+// This makes preview page behave like a website that has system preference enabled. This provides a better experience of preview when user switch their system theme to dark
+makePreviewPageUseSystemPreference();