fix:demo page fix

samarJ19 · samarJ19 · commit 85bccdf8e395 · 2025-10-26T09:54:39.000+05:30
diff --git a/docs/demo/demo.css b/docs/demo/demo.css
@@ -23,6 +23,8 @@ header {
 	box-sizing: border-box;
 	border-bottom: 1px solid #E5E7EB;
 	gap: 16px;
+	/* Reserve space for GitHub corner so it doesn't overlap the toggle */
+	padding-right: 96px;
 }
 
 header .logo-link {
@@ -74,6 +76,8 @@ header h1 {
 	font-size: 14px;
 	font-weight: 500;
 	transition: background-color 0.2s ease, color 0.2s ease;
+	position: relative;
+	z-index: 1;
 }
 
 .theme-toggle:hover {
@@ -279,3 +283,10 @@ body.dark .loadingError {
 body.dark #loading {
 	color: #9CA3AF;
 }
+
+/* Responsive: when GitHub corner is hidden, remove extra right padding */
+@media (max-width: 768px) {
+	header {
+		padding-right: 24px;
+	}
+}
diff --git a/docs/demo/demo.js b/docs/demo/demo.js
@@ -51,13 +51,16 @@ $optionsElem.addEventListener('keydown', handleInput, false);
 $clearElem.addEventListener('click', handleClearClick, false);
 
 // --- Theme Toggle Setup ---
-const $themeToggle = document.getElementById('theme-toggle');
+const $themeToggle = document.getElementById('demo-theme-toggle');
 
 function applyTheme(theme) {
   if (theme === 'dark') {
     document.body.classList.add('dark');
+    // Also set on <html> to keep in sync with prepaint class
+    document.documentElement.classList.add('dark');
   } else {
     document.body.classList.remove('dark');
+    document.documentElement.classList.remove('dark');
   }
 }
 
@@ -80,6 +83,13 @@ function getPreferredTheme() {
 const initialTheme = getPreferredTheme();
 applyTheme(initialTheme);
 
+// Keep in sync if another script/tab changes the theme key
+window.addEventListener('storage', function(e) {
+  if (e.key === 'theme') {
+    applyTheme(e.newValue || getPreferredTheme());
+  }
+});
+
 if ($themeToggle) {
   $themeToggle.addEventListener('click', function() {
     const currentTheme = document.body.classList.contains('dark')
diff --git a/docs/demo/index.html b/docs/demo/index.html
@@ -5,6 +5,24 @@
     <title>Marked Demo</title>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- Prevent white flash: apply dark mode before first paint -->
+    <script>
+      (function () {
+        try {
+          var theme = localStorage.getItem('theme');
+          var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+          if (theme === 'dark' || (!theme && prefersDark)) {
+            // Use html.dark so we can style prepaint while body isn't parsed yet
+            document.documentElement.classList.add('dark');
+          }
+        } catch (e) {}
+      })();
+    </script>
+    <style>
+      /* Minimal prepaint fallback to avoid flash before demo.css loads */
+      html.dark, html.dark body { background-color: #111827; color: #F9FAFB; }
+      @media (prefers-color-scheme: dark) { html { background-color: #111827; } }
+    </style>
     <link rel="stylesheet" href="./demo.css" type="text/css" />
     <link rel="stylesheet" href="../css/shared.css" type="text/css" />
     <link rel="stylesheet" href="../css/style.css" type="text/css" />
@@ -39,7 +57,7 @@ <h1>Marked Demo</h1>
         <span class="separator">·</span>
         <a href="https://daringfireball.net/projects/markdown/dingus">Daring Fireball Demo</a>
       </div>
-      <button id="theme-toggle" class="theme-toggle" aria-label="Toggle dark mode">
+      <button id="demo-theme-toggle" class="theme-toggle" aria-label="Toggle dark mode">
         <span class="material-icons light-icon">dark_mode</span>
         <span class="text light-text">Dark Mode</span>
         <span class="material-icons dark-icon">light_mode</span>
diff --git a/docs/demo/preview.html b/docs/demo/preview.html
@@ -4,6 +4,22 @@
 <head>
   <meta charset="utf-8">
   <title>marked.js preview</title>
+  <!-- Prevent white flash in iframe: set dark before paint using same key -->
+  <script>
+    (function () {
+      try {
+        var theme = localStorage.getItem('theme');
+        var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+        if (theme === 'dark' || (!theme && prefersDark)) {
+          document.documentElement.classList.add('dark');
+          // Ensure body reflects dark once available
+          document.addEventListener('DOMContentLoaded', function () {
+            document.body && document.body.classList.add('dark');
+          });
+        }
+      } catch (e) {}
+    })();
+  </script>
   <link rel="stylesheet" href="./demo.css" />
   <link rel="stylesheet" href="../css/style.css" />
   <link rel="stylesheet" href="../css/hljs-github.css" />
