39 lines
1.4 KiB
HTML
39 lines
1.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Ely Gallery</title>
|
|
<style>
|
|
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #fcfaf7; }
|
|
html.dark, html.dark body { background: #131110; }
|
|
</style>
|
|
<script>
|
|
// Ely's own background under the canvas until the first frame, in the mode asked for.
|
|
if (new URLSearchParams(location.search).get("theme") === "dark") {
|
|
document.documentElement.classList.add("dark");
|
|
}
|
|
</script>
|
|
<script type="module">
|
|
import init, { set_theme } from "./gallery.js";
|
|
// The host sets the mode with gallery.setTheme(mode) or a message { ely: "theme", theme }, early or late.
|
|
let early = null;
|
|
let apply = (theme) => { early = theme; };
|
|
const setTheme = (theme) => {
|
|
apply(theme);
|
|
document.documentElement.classList.toggle("dark", theme === "dark");
|
|
};
|
|
window.gallery = { setTheme };
|
|
addEventListener("message", ({ data }) => {
|
|
if (data && data.ely === "theme") setTheme(data.theme);
|
|
});
|
|
await init();
|
|
apply = set_theme;
|
|
if (early) set_theme(early);
|
|
// A host that waits for this knows the mode it sends lands.
|
|
window.parent.postMessage({ ely: "ready" }, "*");
|
|
</script>
|
|
</head>
|
|
<body></body>
|
|
</html>
|