mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-12 21:28:18 +00:00
120 lines
3.7 KiB
Plaintext
120 lines
3.7 KiB
Plaintext
---
|
|
import vegaUrl from "../docs/assets/styles/style-vega.css?url";
|
|
import novaUrl from "../docs/assets/styles/style-nova.css?url";
|
|
import maiaUrl from "../docs/assets/styles/style-maia.css?url";
|
|
import lyraUrl from "../docs/assets/styles/style-lyra.css?url";
|
|
import miraUrl from "../docs/assets/styles/style-mira.css?url";
|
|
import lumaUrl from "../docs/assets/styles/style-luma.css?url";
|
|
import seraUrl from "../docs/assets/styles/style-sera.css?url";
|
|
import rheaUrl from "../docs/assets/styles/style-rhea.css?url";
|
|
|
|
const styleUrls = {
|
|
vega: vegaUrl,
|
|
nova: novaUrl,
|
|
maia: maiaUrl,
|
|
lyra: lyraUrl,
|
|
mira: miraUrl,
|
|
luma: lumaUrl,
|
|
sera: seraUrl,
|
|
rhea: rheaUrl,
|
|
};
|
|
---
|
|
|
|
<nav class="hidden items-center gap-2 sm:flex">
|
|
<select id="style-variant-select" class="select h-8 w-28 text-sm leading-none" aria-label="Style pack">
|
|
<option value="vega">Vega</option>
|
|
<option value="nova">Nova</option>
|
|
<option value="maia">Maia</option>
|
|
<option value="lyra">Lyra</option>
|
|
<option value="mira">Mira</option>
|
|
<option value="luma">Luma</option>
|
|
<option value="sera">Sera</option>
|
|
<option value="rhea">Rhea</option>
|
|
</select>
|
|
</nav>
|
|
|
|
<script is:inline define:vars={{ styleUrls }}>
|
|
(() => {
|
|
const styleSelect = document.getElementById("style-variant-select");
|
|
const styleLinkId = "docs-style-variant";
|
|
const pendingStyleLinkId = "docs-style-variant-pending";
|
|
const styleGateId = "docs-style-gate";
|
|
|
|
const getStyleLink = () => document.getElementById(styleLinkId);
|
|
const clearStylePending = () => {
|
|
document.documentElement.removeAttribute("data-style-pending");
|
|
document.getElementById(styleGateId)?.remove();
|
|
};
|
|
const getStyleHref = (style) => {
|
|
const href = styleUrls[style];
|
|
return href?.startsWith("/src/docs/assets/styles/") ? `${href}?direct` : href;
|
|
};
|
|
|
|
const applyStyle = (style) => {
|
|
const nextStyle = Object.prototype.hasOwnProperty.call(styleUrls, style) ? style : "vega";
|
|
const href = getStyleHref(nextStyle);
|
|
const link = getStyleLink();
|
|
|
|
if (!href) {
|
|
link?.remove();
|
|
document.getElementById(pendingStyleLinkId)?.remove();
|
|
clearStylePending();
|
|
return;
|
|
}
|
|
|
|
const sameHref = link?.getAttribute("href") === href;
|
|
if (sameHref || link?.sheet) {
|
|
clearStylePending();
|
|
}
|
|
if (sameHref) return;
|
|
|
|
document.getElementById(pendingStyleLinkId)?.remove();
|
|
|
|
const pendingLink = document.createElement("link");
|
|
pendingLink.id = pendingStyleLinkId;
|
|
pendingLink.rel = "stylesheet";
|
|
pendingLink.addEventListener(
|
|
"load",
|
|
() => {
|
|
link?.remove();
|
|
pendingLink.id = styleLinkId;
|
|
document.documentElement.dataset.styleVariant = nextStyle;
|
|
clearStylePending();
|
|
document.dispatchEvent(new CustomEvent("basecoat:stylechange", { detail: { style: nextStyle } }));
|
|
},
|
|
{ once: true },
|
|
);
|
|
pendingLink.addEventListener(
|
|
"error",
|
|
() => {
|
|
pendingLink.remove();
|
|
clearStylePending();
|
|
},
|
|
{ once: true },
|
|
);
|
|
pendingLink.href = href;
|
|
document.head.appendChild(pendingLink);
|
|
};
|
|
|
|
const getStoredStyle = () => {
|
|
try {
|
|
return localStorage.getItem("styleVariant") || "vega";
|
|
} catch (_) {
|
|
return "vega";
|
|
}
|
|
};
|
|
|
|
const initialStyle = getStoredStyle();
|
|
if (styleSelect) styleSelect.value = initialStyle;
|
|
applyStyle(initialStyle);
|
|
|
|
styleSelect?.addEventListener("change", () => {
|
|
const nextStyle = styleSelect.value || "vega";
|
|
applyStyle(nextStyle);
|
|
try {
|
|
localStorage.setItem("styleVariant", nextStyle);
|
|
} catch (_) {}
|
|
});
|
|
})();
|
|
</script>
|