Skip to main content
Open Mushaf Native offers various customization options to personalize your Quran reading experience.

​
Accessing Settings

Settings are available at the Settings screen (app/(tabs)/(more)/settings.tsx).

​
Theme System

The app supports automatic light and dark mode based on your device’s system preferences.

​
Color Schemes

  • Background: #FAF8F6 (warm off-white)
  • Text: #1B1B1B (near black)
  • Primary: #1E5243 (deep green)
  • Card: #FFFFFF (white)
  • Icon: #6D6D6D (medium gray)
  • Secondary: #C2B280 (gold/beige)
The theme automatically switches based on your device’s color scheme setting. The app uses the useColorScheme() hook from React Native to detect system preferences.

​
How Themes Work

Themes are implemented through:
  1. Colors Configuration: constants/Colors.ts defines all color values
  2. useColors Hook: hooks/useColors.ts provides theme-aware colors
  3. Themed Components: ThemedView, ThemedText, and ThemedButton automatically adapt

​
Dark Mode Contrast Adjustment

Customize the brightness of Mushaf pages in dark mode to reduce eye strain.
1

Open Settings

Navigate to the Settings screen.
2

Adjust Brightness

Find the “سطوع الوضوع الليلي” (Dark Mode Brightness) section with a slider.
3

Set Contrast Level

Drag the slider to adjust brightness from 0% to 100%.The current value is displayed as a percentage next to the label.
The contrast setting is stored in the mushafContrast atom and persists across app sessions. Default value is 50% (0.5).

​
Flip Sound

Enable or disable page flip sound effects when navigating between pages.
1

Open Settings

Navigate to the Settings screen.
2

Toggle Flip Sound

Find the “صوت قلب الصفحة” (Page Flip Sound) setting.
3

Enable/Disable

Tap the toggle switch to turn the sound on or off.
Flip sound is disabled by default. The setting is stored in the flipSound atom and persists across sessions.

​
Riwaya Selection

Choose between different Quran recitation styles (Riwayat).
1

Open Settings

Navigate to the Settings screen.
2

Select Riwaya

Find the “إختيار الرواية” (Choose Riwaya) section.
3

Choose Option

Tap one of the segmented control options:
  • حفص (Hafs ‘an ‘Asim)
  • ورش (Warsh ‘an Nafi’)
Changing the Riwaya will reload the app to apply the new Mushaf images. Your reading position will be preserved.

​
Available Riwayat

The app supports:
  • Hafs ‘an ‘Asim (حفص): Most widely used Riwaya
  • Warsh ‘an Nafi’ (ورش): Primarily used in North Africa
The Riwaya setting is stored in the mushafRiwaya atom and affects:
  • Mushaf page images loaded from imagesMapHafs or imagesMapWarsh
  • Total number of pages (varies by Riwaya)

​
Notification Settings

Configure notifications for daily reading tracker completion.

​
Daily Tracker Notification

1

Toggle Notification

Find “تنبيه الورد اليومي” (Daily Tracker Notification) in Settings.
2

Enable/Disable

Tap the toggle switch to turn notifications on or off.

​
Notification Frequency

1

Select Frequency

Find “تفعيل التنبيهات” (Enable Notifications) in Settings.
2

Choose Option

Select from the segmented control:
  • تعطيل (Disable): No notifications
  • حزب (Hizb): Notify every Hizb (1/60 of Quran)
  • جزء (Juz): Notify every Juz (1/30 of Quran)
Notification settings are stored in:
  • showTrackerNotification: Boolean for on/off
  • hizbNotification: Number (0=disabled, 1=Hizb, 2=Juz)

​
Reset Settings

Reset all app settings and data to defaults.
1

Open Settings

Navigate to the Settings screen.
2

Tap Reset Button

Find and tap the red “إعادة ضبط التطبيق” (Reset App) button.
3

Confirm

A confirmation modal will appear asking “هل أنت متأكد من رغبتك في إعادة ضبط التطبيق؟” (Are you sure you want to reset the app?)
4

Complete Reset

Tap “تأكيد” (Confirm) to clear all storage and reload the app.
Resetting the app will:
  • Clear all saved settings
  • Reset your reading position
  • Clear daily tracker progress
  • Remove all bookmarks
  • Reload the app
This action cannot be undone.

​
Persistence

All customization settings are automatically saved using:
  • Storage Engine: MMKV (fast, synchronous storage)
  • State Management: Jotai atoms with atomWithStorage
  • Storage Location: utils/storage/createStorage.ts
Settings persist across:
  • App restarts
  • Device reboots
  • App updates

​
Accessibility

All settings include proper accessibility labels and hints:
  • Toggle switches have accessibilityState indicating checked/unchecked
  • Buttons have descriptive accessibilityLabel and accessibilityHint
  • Segmented controls use accessibilityRole="radiogroup"
This ensures the app is usable with screen readers and assistive technologies.

Build docs developers (and LLMs) love

Get started for freeTalk to us