fix(reader): add test font, expand ranges, fix colors, add restore defaults

- Add Comic Sans MS as a test font option to verify font switching works
- Add !important to background-color and color in getCSS() to prevent
  book CSS from overriding user's reading theme colors
- Expand font size range from 12-24px to 10-40px, bump default to 18px
- Expand line height range from 1.0-2.5 to 0.8-3.0
- Add restoreDefaults() method that resets reading theme, font, size,
  line height, and justify/hyphenate to sensible defaults
- Add ↩️ restore defaults button in top bar underneath the settings gear

web/src/reader/reader.ts

@@ -12,6 +12,7 @@ const FONT_MAP: Record<string, string> = {
   "noto-serif": '"Noto Serif"',
   "charis-sil": '"Charis SIL"',
   "ibm-plex": '"IBM Plex Serif"',
+  "comic-sans": '"Comic Sans MS", "Comic Sans", cursive',
 };
 
 const getCSS = ({
@@ -39,8 +40,8 @@ const getCSS = ({
     @namespace epub "http://www.idpf.org/2007/ops";
     html {
         color-scheme: light dark;
-        background-color: ${bg};
-        color: ${text};
+        background-color: ${bg} !important;
+        color: ${text} !important;
         font-family: ${font}, serif;
         font-size: ${fontSize}px;
         line-height: ${lineHeight};
@@ -138,7 +139,7 @@ document.addEventListener("alpine:init", () => {
       if (this.settings) {
         this.readingTheme = this.settings.reading_theme || "light";
         this.readingFont = this.settings.reading_font || "literata";
-        this.fontSize = this.settings.font_size || 16;
+        this.fontSize = this.settings.font_size || 18;
         this.lineHeight = this.settings.line_height || 1.6;
         if (this.settings.reading_mode) {
           this.readingMode = this.settings.reading_mode;
@@ -347,6 +348,17 @@ document.addEventListener("alpine:init", () => {
         hyphenate: this.hyphenate,
       });
     },
+    restoreDefaults() {
+      this.readingTheme = "light";
+      this.readingMode = this.detectChromeDarkMode() ? "dark" : "light";
+      this.readingFont = "literata";
+      this.fontSize = 18;
+      this.lineHeight = 1.6;
+      this.justify = true;
+      this.hyphenate = true;
+      this.applyTheme();
+      this.applyFont();
+    },
     async addBookmark() {
       const token = getToken();
       if (!token || !this.view) return;

web/src/reader/settings-manager.ts

@@ -75,7 +75,7 @@ export function getDefaultSettings(): ReaderSettings {
     reading_font: "literata",
     tap_zone_size: 30,
     auto_scroll: false,
-    font_size: 16,
+    font_size: 18,
     line_height: 1.6,
     margin_width: 20,
     double_page_spread: false,