docs/demo/preview.html - master - githubmirror/marked

docs/demo/preview.html
99 строк3 KB
Samar Joshi
chore(docs): prevent theme flash by respecting system preference on initial load (#3840)
22 дек 2025, 18:30
22 дек 2025, 18:30d84e021

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>marked.js preview</title>
   <script>
      (function () {
        try {
          var STORAGE_KEY = "theme-preference";
          var LEGACY_KEY = "theme";
          var stored = localStorage.getItem(STORAGE_KEY) || localStorage.getItem(LEGACY_KEY);
          var preference = stored === "dark" || stored === "light" || stored === "system" ? stored : "system";
          var prefersDark =
            window.matchMedia &&
            window.matchMedia("(prefers-color-scheme: dark)").matches;
          var shouldUseDark = prefersDark;

          if (preference === "dark") {
            shouldUseDark = true;
          } else if (preference === "light") {
            shouldUseDark = false;
          }

          if (shouldUseDark) {
            document.documentElement.classList.add("dark");
          } else {
            document.documentElement.classList.remove("dark");
          }

          document.documentElement.setAttribute("data-theme-preference", preference);
          document.documentElement.setAttribute(
            "data-theme",
            shouldUseDark ? "dark" : "light",
          );

          localStorage.setItem(STORAGE_KEY, preference);
          if (preference === "system") {
            localStorage.removeItem(LEGACY_KEY);
          } else {
            localStorage.setItem(LEGACY_KEY, preference);
          }
        } catch (e) {}
      })();
    </script>
  <link rel="stylesheet" href="./demo.css" />
  <link rel="stylesheet" href="../css/style.css" />
  <link rel="stylesheet" href="../css/hljs-github.css" />
  <link rel="stylesheet" href="../css/hljs-github-dark.css" />
  <base target="_parent">
  <style>
    html, body {
      margin: 0;
      padding: 0;
      background: #FFFFFF;
      color: #1F2937;
      font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
      line-height: 1.6;
      transition: background-color 0.3s ease, color 0.3s ease;
    }

    html.dark, html.dark body {
      background: #1F2937;
      color: #F9FAFB;
    }

    /* Ensure links are visible in dark mode */
    html.dark a {
      color: #60A5FA;
    }

    html.dark a:hover {
      color: #93C5FD;
    }

    /* Code blocks in dark mode */
    html.dark pre {
      background-color: #111827 !important;
      color: #F9FAFB;
    }

    html.dark code {
      background-color: #111827;
      color: #F9FAFB;
    }

    /* Tables in dark mode */
    html.dark table {
      border-color: #374151;
    }

    html.dark th,
    html.dark td {
      border-color: #374151;
    }
  </style>
</head>
<body>
</body>
</html>