phoenix/installer/templates/phx_web/components/layouts/root.html.heex at ebbce3035b0af284bdcd4beef0bf0f220f2c001d · phoenixframework/phoenix · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="csrf-token" content={get_csrf_token()} />
    <.live_title default="<%= @app_module %>" suffix=" · Phoenix Framework">
      {assigns[:page_title]}
    </.live_title>
    <link phx-track-static rel="stylesheet" href={~p"/assets/css/app.css"} /><%= if not @css do %>
    <link phx-track-static rel="stylesheet" href={~p"/assets/default.css"} /><% end %>
    <script defer phx-track-static type="text/javascript" src={~p"/assets/js/app.js"}>
    </script><%= if @css do %>
    <script>
      (() => {
        // Configure the desired themes. Must be loaded in "assets/css/app.css".
        const lightTheme = "phoenix-light";
        const darkTheme = "elixir-dark";

        const prefersDarkMatch = window.matchMedia("(prefers-color-scheme: dark)");
        const setSystemTheme = () => {
          if (prefersDarkMatch.matches) {
            document.documentElement.setAttribute("data-phx-theme", "system-dark");
            document.documentElement.setAttribute("data-theme", darkTheme);
          } else {
            document.documentElement.setAttribute("data-phx-theme", "system-light");
            document.documentElement.setAttribute("data-theme", lightTheme);
          }
        }
        const setTheme = (theme) => {
          if (theme === "system") {
            localStorage.removeItem("phx:theme");
            prefersDarkMatch.addEventListener("change", setSystemTheme);
            setSystemTheme();
          } else {
            localStorage.setItem("phx:theme", theme);
            prefersDarkMatch.removeEventListener("change", setSystemTheme);
            document.documentElement.setAttribute("data-phx-theme", theme);
            document.documentElement.setAttribute("data-theme", theme === "light" ? lightTheme : darkTheme);
          }
        };
        if (!document.documentElement.hasAttribute("data-phx-theme")) {
          setTheme(localStorage.getItem("phx:theme") || "system");
        }
        window.addEventListener("storage", (e) => e.key === "phx:theme" && setTheme(e.newValue || "system"));
        <%= if not @live do %>
        document.addEventListener("DOMContentLoaded", () => {
          document
            .querySelectorAll("button[data-phx-theme]")
            .forEach((el) => {
              el.addEventListener("click", () => {
                setTheme(el.dataset.phxTheme)
              })
            })
        })<% else %>
        window.addEventListener("phx:set-theme", (e) => setTheme(e.target.dataset.phxTheme));<% end %>
      })();
    </script><% end %>
  </head>
  <body>
    {@inner_content}
  </body>
</html>