lib/scoria_web/components/layouts/root.html.heex

Select File
lib/scoria_web/components/layouts/root.html.heex

<!DOCTYPE html>
<html lang="en" class="scoria-root" data-theme="dark" data-scoria-socket={assigns[:scoria_socket_path] || "/live"}>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="csrf-token" content={Plug.CSRFProtection.get_csrf_token()} />
    <.live_title default="Scoria" suffix=" · Scoria">{assigns[:page_title]}</.live_title>
    <link rel="icon" type="image/svg+xml" href={ScoriaWeb.Assets.favicon_data_uri()} />
    <style nonce={assigns[:scoria_nonce]}><%= Phoenix.HTML.raw(ScoriaWeb.Assets.css()) %></style>
    <script nonce={assigns[:scoria_nonce]}>
      // Pre-paint theme resolution — runs before first paint so stored "light" /
      // "system" users never see the dark default flash (FOUC). Mirrors the
      // ThemeToggle hook's resolution; the hook re-applies + wires the control on load.
      (function () {
        try {
          var pref = localStorage.getItem("scoria-theme");
          var resolved =
            pref === "light" || pref === "dark"
              ? pref
              : pref === "system"
                ? (window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark")
                : "dark";
          document.documentElement.setAttribute("data-theme", resolved);
        } catch (e) {}
      })();
    </script>
  </head>
  <body>
    {@inner_content}
    <script nonce={assigns[:scoria_nonce]}><%= Phoenix.HTML.raw(ScoriaWeb.Assets.js()) %></script>
  </body>
</html>