Skip to content

fix: improve persistent header and bottom nav contrast over frosted-glass backgrounds - #14

Merged
MelvinLoos merged 9 commits into
mainfrom
fix/persistent-nav-contrast-issue-3
Aug 21, 2026
Merged

fix: improve persistent header and bottom nav contrast over frosted-glass backgrounds#14
MelvinLoos merged 9 commits into
mainfrom
fix/persistent-nav-contrast-issue-3

Conversation

@MelvinLoos

Copy link
Copy Markdown
Owner

Summary

Fixes #3: Persistent header and footer are hard to read due to frosted-glass translucency.

Problem

The persistent header and bottom navigation bar used frosted-glass translucency (bg-surface/95 + backdrop-blur) that let bright book covers bleed through the UI, making text-on-surface-variant nav icon/label text hard to read.

Changes

frontend/layouts/default.vue

  • Header & bottom nav backgrounds: bg-surface/95bg-surface/98 (reduces cover bleed-through while preserving glassmorphism)
  • Nav link text (Library, Discover, Downloads, Settings, Login): text-on-surface-varianttext-on-surface (higher contrast in both themes)
  • Logout button: text-on-surface-varianttext-on-surface
  • Theme toggle button: text-on-surface-varianttext-on-surface
  • Search icon: text-on-surface-variant/50text-on-surface-variant/70 (increased opacity)

frontend/layouts/default.spec.ts

  • Added 7 new tests verifying contrast classes in both dark and light themes
  • Assert bg-surface/98 and backdrop-blur on header and bottom nav
  • Assert text-on-surface on all nav links and theme toggle
  • Refactored repeated mount config into a mountLayout() helper

Design Compliance

  • ✅ Glassmorphic aesthetic preserved (backdrop-blur-xl/backdrop-blur-md retained)
  • ✅ DESIGN.md rule: "Do ensure all Glassmorphic elements have sufficient contrast"
  • ✅ Works in both [data-theme=light] and default dark mode

Test Results

All 75 tests pass across 9 test files.

Calibre's books/series tables have triggers calling title_sort() and
uuid4() which Prisma's better-sqlite3 adapter doesn't register. Subclass
PrismaBetterSqlite3 to register these functions on connect().
/api/{*path} is invalid in path-to-regexp v8.4.2. Use /api/*path instead.
…lass backgrounds

- Bump header and bottom nav background opacity from bg-surface/95 to bg-surface/98
  to reduce bright book cover bleed-through while preserving glassmorphism.
- Switch nav link text, theme toggle, and logout button from text-on-surface-variant
  to text-on-surface for improved legibility in both light and dark themes.
- Increase search icon opacity from 50% to 70% for better visibility.
- Add unit tests verifying updated contrast classes on header, bottom nav,
  nav links, and theme toggle in both dark and light themes.

Closes #3
@MelvinLoos
MelvinLoos merged commit 0594f32 into main Aug 21, 2026
1 check passed
@MelvinLoos
MelvinLoos deleted the fix/persistent-nav-contrast-issue-3 branch August 21, 2026 02:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Persistent header and footer are hard to read due to frosted-glass translucency

1 participant