Projects › BibleWeb › Themes & Parables › Jesus speech coloring in theme verses
Planned

Jesus speech coloring in theme verses

Area: Themes & Parables Milestone: v3

Context

Problem: In the main reader, Jesus' direct speech is highlighted in gold. But when viewing theme verses on the themes detail page, all text appears in the same color — losing the visual distinction of Jesus' words.

Solution: Apply the same gold highlighting to Jesus' speech in theme verse displays, reusing the existing jesus_speech data and color logic from the reader.

Not included: New Jesus speech data or different coloring. This is purely extending the existing highlighting to another view.

Functional

When viewing verses on a theme detail page, any verse that contains Jesus' direct speech should have that text displayed in gold (#fbbf24), matching the reader's behavior.

Expected user flow:

  1. User opens a Jesus theme (e.g., "Prayer")
  2. Sees verses listed under each book
  3. Verses containing Jesus' speech appear in gold text
  4. Same visual experience as the main reader

UX & Design

Color: var(--color-jesus-words) = rgb(255, 200, 80) — same gold as the reader.

No new UI elements — just applying existing color logic to theme verse rendering.

Technical

Implementation:

  • The theme detail query (getThemeVerses) should join with jesus_speech table
  • Pass isJesusSpeech flag to each verse in the theme view
  • Apply color: var(--color-jesus-words) when flag is true
  • Logic already exists in VerseText.svelte — reuse it

Files:

  • apps/web/src/routes/(app)/themes/[id]/+page.svelte (modify)
  • apps/web/src/lib/server/queries/themes.ts (modify — join jesus_speech)

Status

Current: PLANNED Milestone: v3 Priority: Low — visual consistency improvement

History:

  • Reader has gold highlighting since v1
  • Theme view was built later without integrating the jesus_speech join

Dependencies:

  • Requires: theme browser (DONE), jesus_speech data (DONE)
← Back to Themes & Parables features