← Back to mockups Phase B · 23 · Night mode (review) B · 23 / Review
Lives under Header gear icon Settings Theme / Night mode new Settings is a new screen accessed via a gear icon added to the app-header on every app page.
Night mode review
UI/UX review · §4A.7

Three options for night mode

The current app is mostly cream with two dark-themed pages (/app/tawaaf.html, /app/prayer.html) — visually inconsistent. The question is whether to ship a real night mode for Hajj 2026, and if so, which kind.

Scenario: it is 3:15 AM in Muzdalifah. You've prayed Fajr at Mash'ar al-Haram and want to open Tawaaf to read the morning duʿāʾ. Your eyes are dark-adapted. Which option preserves your sight and your tone?
A. Current (cream default)
Today's behavior — cream paper
Mash'ar al-Haram

Stand and supplicate.

Face the Qibla, raise your hands, and call upon Allah from Fajr until just before sunrise.

رَبَّنَا آتِنَا فِي الدُّنْيَا حَسَنَةً

Bukhari 4524 · Mālik 1.378

Sunnah Pre-dawn
B. Tahajjud mode (recommended)
Low-luminance amber — preserves dark-adapted vision
Mash'ar al-Haram

Stand and supplicate.

Face the Qibla, raise your hands, and call upon Allah from Fajr until just before sunrise.

رَبَّنَا آتِنَا فِي الدُّنْيَا حَسَنَةً

Bukhari 4524 · Mālik 1.378

Sunnah Pre-dawn
C. Full system dark
Standard dark mode — deep green ground
Mash'ar al-Haram

Stand and supplicate.

Face the Qibla, raise your hands, and call upon Allah from Fajr until just before sunrise.

رَبَّنَا آتِنَا فِي الدُّنْيَا حَسَنَةً

Bukhari 4524 · Mālik 1.378

Sunnah Pre-dawn
Option B in detail (recommended for Hajj 2026)

"Tahajjud mode"

A low-luminance amber theme designed specifically for pre-dawn use. Background #1a1410, text in a warm gold #d6b87a. Contrast meets AA at body sizes. The aesthetic borrows from the gold-on-vellum of an old Hajj passport — Tawaaf-coherent, not a generic OLED black.

Surfaced as a one-tap "moon" button in the app header:

Tahajjud mode — off Tahajjud mode — on

Why amber instead of red? Red is associated with bad-news UI patterns. Gold is already in the brand, and the eye still preserves rod-cell dark adaptation in low-luminance amber/yellow nearly as well as in red.

Option A in detail

System-aware full dark mode

Honor the device's prefers-color-scheme: dark with a manual override in the header. Cream surfaces become deep green; deep-green surfaces become a more saturated forest. Gold stays. The brand still reads as Tawaaf because the gold and typography are intact.

Better for everyday "I prefer dark UI" users, less optimized for true dark-adapted vision. Roughly the work of a designer-engineer-day if done carefully.

Recommendation

Ship B for Hajj 2026, then add A post-Hajj.

Mash'ar al-Haram supplication and Tahajjud in Mina tents are real, high-friction night moments that the current cream UI hurts directly. Option B addresses them in a way that is brand-coherent and visually distinctive — the gold-on-amber aesthetic is unique among pilgrim apps and reinforces Tawaaf's "quiet companion" voice.

Option A is the right long-term answer for everyday use and a normal expectation in a 2026 app — but it can wait until after Hajj, when we've learned how people actually used the night theme during the Hajj nights and can do A properly.