Dark Mode & Theming
GospeLib offers three distinct reader modes plus an independent Night Warm overlay that can be combined with any mode. The design principle: the scripture page is a physical object — in "Study" dark mode, the page stays lit while the surrounding chrome goes dark, like reading under a lamp at night.
Three Reader Modes
Light Mode (Default)
The standard daytime experience.
| Token | Value | Usage |
|---|---|---|
--color-page-surface | #F5F3EE | Paper surface with texture |
--color-page-text | #080E15 | Scripture & body text |
--color-chrome-background | #FAF9F6 | Navigation, tool panels |
--color-chrome-text | #3D5A7A | Nav labels, icons |
Study Dark Mode (Default Dark)
The app "goes dark" but the scripture page remains a lit page — preserving the reading metaphor of a page under a lamp.
| Token | Value | Usage |
|---|---|---|
--color-page-surface | #F5F3EE | Page stays light |
--color-page-text | #080E15 | Same as light mode |
--color-chrome-background | #121D2B | Dark chrome (navy-800) |
--color-chrome-text | #D4DFE9 | Light text on dark chrome |
Blackout Mode (Opt-in)
Full dark immersion for maximum eye-strain reduction in complete darkness.
| Token | Value | Usage |
|---|---|---|
--color-page-surface | #080E15 | Dark page (navy-900) |
--color-page-text | #F5F3EE | Light text on dark page |
--color-chrome-background | #080E15 | Same as page surface |
--color-chrome-text | #A9BFD3 | Slightly muted light text |
Full Token Resolution Table
| Token | Light | Study Dark | Blackout |
|---|---|---|---|
--color-page-surface | #F5F3EE | #F5F3EE | #080E15 |
--color-page-text | #080E15 | #080E15 | #F5F3EE |
--color-chrome-background | #FAF9F6 | #121D2B | #080E15 |
--color-chrome-text | #3D5A7A | #D4DFE9 | #A9BFD3 |
--color-verse-number | #5A80A8 | #5A80A8 | #3D5A7A |
--color-border-subtle | #CCCAC0 | #1F3046 | #1F3046 |
--color-shadow | rgba(20,16,10,0.10) | rgba(0,0,0,0.25) | rgba(0,0,0,0.25) |
Night Warm Mode
Night Warm is an independent overlay combinable with any of the three modes above. It tints the page surface with warm amber, simulating tungsten/candlelight to reduce blue light.
Tint Levels
Controlled by the brightness slider when Night Warm is active — dragging brightness down increases the amber tint.
| Level | Formula | Result | Token |
|---|---|---|---|
| Subtle | color-mix(in srgb, #F5F3EE 92%, #FF8C00 8%) | #F8EFE2 | nightWarm.subtle |
| Moderate | color-mix(in srgb, #F5F3EE 82%, #FF8C00 18%) | #FAE8D0 | nightWarm.moderate |
| Warm | color-mix(in srgb, #F5F3EE 72%, #FF8C00 28%) | #FBDFC0 | nightWarm.warm |
Combinations
| Base Mode | Night Warm Effect |
|---|---|
| Light + Night Warm | Page tints amber (#FFF3E0 background) |
| Study Dark + Night Warm | Page gets amber tint; chrome stays dark |
| Blackout + Night Warm | Dark page with amber-white text (#FFF3E0 text on #080E15) |
Typography Theming
Font families and sizes are expressed as CSS custom properties and Expo/React Native font config objects. A single user settings change propagates through the entire app via token resolution:
--font-scripture: 'Gentium Plus', serif;
--font-ui: 'Inter', system-ui, sans-serif;
--font-hebrew: 'SBL Hebrew', 'Ezra SIL', serif;
--font-greek: 'Gentium Plus', 'SBL Greek', serif;
Implementation Notes
- Mode selection is available in the Quick Settings Tray and via Settings → Appearance
- All color decisions use semantic tokens — never hardcoded hex values
- Shadows use warm near-black
rgba(20,16,10)in light mode and true blackrgba(0,0,0)in dark modes - The paper texture overlay adjusts opacity per mode (2% light, 1% study dark, 0% blackout)
Related Pages
- Color System — full palette and scales
- Design Tokens — complete token reference
- Accessibility — contrast ratio compliance per mode