fix: follow UDT's font size and live theme changes

UDT gives font sizes to keystone's fonts page, which writes
~/.config/keystone/fonts.json. deck-it hardcoded px sizes, so changing
the size on the fonts page did nothing on the tablet. theme.css now
carries --udt-font-size (override.deckit, else base, 8 to 40px, as
quickshell checks) on html, and deck.css sizes text in rem, scaled from
the old 14px design.

The page loaded theme.css once, so a scheme, wallpaper or size change
reached the tablet only after a reload. The shell now re-reads it every
5s and on visibility, swapping it into a <style> only when it changed,
and sets meta theme-color from --udt-base instead of Macchiato's
hardcoded base.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

1 files changed, 22 insertions, 0 deletions

diff --git a/static/app.js b/static/app.js
index b89fbaa..e2da02a 100644
--- a/static/app.js
+++ b/static/app.js
@@ -230,6 +230,28 @@ tabBody.addEventListener("pointerup", (e) => {
 });
 tabBody.addEventListener("pointercancel", () => { swipe = null; });
 
+// theme.css is rendered per request from UDT's live files, so re-reading it
+// carries a scheme, wallpaper or font-size change to an open page. The <style>
+// comes after the <link>, so it wins once filled.
+const themeStyle = document.head.appendChild(document.createElement("style"));
+const themeColor = document.querySelector('meta[name="theme-color"]');
+
+async function refreshTheme() {
+  try {
+    const r = await fetch("theme.css", { cache: "no-store" });
+    if (!r.ok) return;
+    const text = await r.text();
+    if (text !== themeStyle.textContent) themeStyle.textContent = text;
+  } catch {
+    // keep the current theme; the next tick retries
+  }
+  const base = getComputedStyle(document.documentElement).getPropertyValue("--udt-base").trim();
+  if (base) themeColor.content = base;
+}
+refreshers.push(refreshTheme);
+refreshTheme();
+setInterval(refreshTheme, 5000);
+
 document.addEventListener("visibilitychange", () => {
   if (document.visibilityState === "visible") refreshers.forEach((fn) => fn());
 });