From d68879a6c628e360f64e5d6502227f5bc079ba9a Mon Sep 17 00:00:00 2001 From: John O'Keefe Date: Sun, 19 Apr 2026 20:51:02 -0400 Subject: [PATCH] fix(reader): add test font, expand ranges, fix colors, add restore defaults MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- templates/reader.templ | 33 +++++++++++++++++++----------- templates/reader_templ.go | 12 +++++------ web/src/reader/reader.ts | 18 +++++++++++++--- web/src/reader/settings-manager.ts | 2 +- 4 files changed, 43 insertions(+), 22 deletions(-) diff --git a/templates/reader.templ b/templates/reader.templ index 9f84b79..fee80be 100644 --- a/templates/reader.templ +++ b/templates/reader.templ @@ -60,16 +60,24 @@ templ ReaderChrome(user User, metadata ReaderMetadata, progress ReadingProgress) ← Back

{ metadata.Title }

- +
+ + +
- - +
@@ -251,16 +259,17 @@ templ ReaderSettingsPanel() { +
diff --git a/templates/reader_templ.go b/templates/reader_templ.go index 24d0296..3fdaac4 100644 --- a/templates/reader_templ.go +++ b/templates/reader_templ.go @@ -147,14 +147,14 @@ func ReaderChrome(user User, metadata ReaderMetadata, progress ReadingProgress) if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } var templ_7745c5c3_Var6 string templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d/%d", progress.CurrentPage, progress.TotalPages)) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 139, Col: 70} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 147, Col: 70} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6)) if templ_7745c5c3_Err != nil { @@ -189,7 +189,7 @@ func ReaderSettingsPanel() templ.Component { templ_7745c5c3_Var7 = templ.NopComponent } ctx = templ.ClearChildren(ctx) - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "

⚙️ Settings

Display

Reading Theme

Typography

Navigation

") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "

⚙️ Settings

Display

Reading Theme

Typography

Navigation

") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -293,7 +293,7 @@ func ReaderBookmarksPanel(bookmarks []Bookmark) templ.Component { var templ_7745c5c3_Var11 string templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(bookmark.CfiPosition) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 351, Col: 38} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 360, Col: 38} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11)) if templ_7745c5c3_Err != nil { @@ -306,7 +306,7 @@ func ReaderBookmarksPanel(bookmarks []Bookmark) templ.Component { var templ_7745c5c3_Var12 string templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(bookmark.Title) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 354, Col: 49} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 363, Col: 49} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12)) if templ_7745c5c3_Err != nil { @@ -319,7 +319,7 @@ func ReaderBookmarksPanel(bookmarks []Bookmark) templ.Component { var templ_7745c5c3_Var13 string templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(bookmark.Position) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 356, Col: 27} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 365, Col: 27} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13)) if templ_7745c5c3_Err != nil { diff --git a/web/src/reader/reader.ts b/web/src/reader/reader.ts index 40761fd..51d26bd 100644 --- a/web/src/reader/reader.ts +++ b/web/src/reader/reader.ts @@ -12,6 +12,7 @@ const FONT_MAP: Record = { "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; diff --git a/web/src/reader/settings-manager.ts b/web/src/reader/settings-manager.ts index 95ee98b..b434633 100644 --- a/web/src/reader/settings-manager.ts +++ b/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,