fix(reader): inject reader-fonts.css into iframe, remove foliate-themes.css

Fonts weren't loading because the paginator renders inside a sandboxed
iframe. @font-face declarations in the parent page's CSS are invisible
to the iframe's document. Even injecting @font-face rules via
setStyles() may not trigger font loading in sandboxed iframes.

Fix: inject a <link> to reader-fonts.css directly into the iframe's
document on each section load, so @font-face declarations are parsed
in the iframe's own document context where font-family rules can
reference them.

Also:
- Remove foliate-themes.css entirely (no longer needed)
- Set viewport background color directly via JS using THEME_COLORS map
- Remove reading theme CSS classes from viewport element

web/src/reader/reader.ts

@@ -358,10 +358,9 @@ document.addEventListener("alpine:init", () => {
         }
       }
       const viewport = document.getElementById("reader-viewport")!;
-      viewport.classList.add(`theme-${this.readingTheme}`);
-      if (this.readingMode === "dark") {
-        viewport.classList.add("dark");
-      }
+      const themeSet = THEME_COLORS[this.readingTheme] ?? THEME_COLORS.light;
+      const themeColors = this.readingMode === "dark" ? themeSet.dark : themeSet.light;
+      viewport.style.backgroundColor = themeColors.bg;
       this.view = document.getElementById("reader-view") as any;
       const resp = await fetch(config.fileUrl, {
         headers: { Authorization: `Bearer ${getToken()}` },
@@ -383,6 +382,10 @@ document.addEventListener("alpine:init", () => {
       }
       this.view.addEventListener("load", (e: any) => {
         const { doc } = e.detail;
+        const link = doc.createElement("link");
+        link.rel = "stylesheet";
+        link.href = "/static/reader-fonts.css";
+        doc.head.append(link);
         doc.addEventListener("keydown", (ev: KeyboardEvent) =>
           this.handleKeydown(ev),
         );
@@ -514,11 +517,9 @@ document.addEventListener("alpine:init", () => {
     },
     applyTheme() {
       const viewport = document.getElementById("reader-viewport")!;
-      viewport.className = "absolute inset-x-0 top-[52px] bottom-[52px]";
-      viewport.classList.add(`theme-${this.readingTheme}`);
-      if (this.readingMode === "dark") {
-        viewport.classList.add("dark");
-      }
+      const themeSet = THEME_COLORS[this.readingTheme] ?? THEME_COLORS.light;
+      const themeColors = this.readingMode === "dark" ? themeSet.dark : themeSet.light;
+      viewport.style.backgroundColor = themeColors.bg;
       this.applyStyles();
       saveSettings({
         reading_theme: this.readingTheme,