Files
study-bible-project/src/components/reader/readerThemes.js
T
nmemmertandClaude Sonnet 5.5 a0971eab29
Build and Push Docker Image / build-and-push (push) Failing after 19s
Reader: visible text selection in every theme; highlights follow across translations
Selection
- Selected text uses a per-theme colour (it was nearly invisible on Dark)
- The colour picker also appears on touch screens after dragging the selection
  handles, and sits below the selection there so the system menu doesn't cover it

Highlights
- Each highlight remembers its translation and whether it covers the whole verse
- In another translation the same words are found again (ignoring case and
  punctuation); whole-verse highlights cover the whole verse; when the wording
  differs, the verse gets a small colour dot instead of marking the wrong words
- Older highlights are checked against their saved words instead of trusted
- Server keeps the new fields

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-10-06 09:55:09 -04:00

19 lines
1.1 KiB
JavaScript

// Reader colour themes, applied as CSS variables on the reader root so every
// reader component can use bg-[var(--r-bg)] etc. and stay in sync.
export const READER_THEMES = {
paper: {
label: 'Paper',
vars: { '--r-bg': '#faf7f0', '--r-text': '#2b2620', '--r-sub': '#6b6458', '--r-accent': '#a84e27', '--r-bar': '#f1ece0', '--r-line': '#e0d8c6', '--r-hl': '#f6e7a8', '--r-sel': 'rgba(168, 78, 39, 0.3)', '--r-on': '#ffffff', '--r-danger': '#b42318' },
},
sepia: {
label: 'Sepia',
vars: { '--r-bg': '#f1e4c8', '--r-text': '#3b2f1c', '--r-sub': '#635539', '--r-accent': '#93471d', '--r-bar': '#e8d8b6', '--r-line': '#d5c197', '--r-hl': '#e9cf85', '--r-sel': 'rgba(147, 71, 29, 0.32)', '--r-on': '#ffffff', '--r-danger': '#a1281d' },
},
dark: {
label: 'Dark',
vars: { '--r-bg': '#1c1b19', '--r-text': '#e6e1d6', '--r-sub': '#b8b2a4', '--r-accent': '#e0895c', '--r-bar': '#262421', '--r-line': '#3a3733', '--r-hl': '#4a4224', '--r-sel': 'rgba(224, 137, 92, 0.5)', '--r-on': '#1c1b19', '--r-danger': '#f0857a' },
},
};
export const themeVars = (id) => (READER_THEMES[id] ?? READER_THEMES.paper).vars;