feat(page): add customizable page background selection system#3438
feat(page): add customizable page background selection system#3438aalhendi wants to merge 12 commits intoquran:mainfrom
Conversation
Replace the gradient background system with a more flexible page background selection that includes preset colors and a custom color picker. - Add preset background options (white, cream, light parchment, soft ivory) - Implement custom color picker with RGB sliders - Create PageBackgroundPickerPreference for settings UI - Update QuranPageLayout to use selected background color - Remove gradient-related code from QuranDisplayHelper - Add corresponding settings storage and retrieval methods - Update preferences UI and resources to support new system
|
jazakumAllah khairan. I have built this and sent screenshots to the team and will discuss with them and see whether this is the approach we want to take or not. in the future, in order to avoid doing unnecessary work, please open an issue and ask before implementing new features so that your effort does not go to waste - really welcome your code contributions though and jazakumAllah khairan! |
|
sorry for the late reply - we want to go with something similar but a little less open - we'd like to support the same colors that Quran.com supports - so light, dark, and sepia. Our iOS sister app just shipped with this: 
we can do something similar and then merge the "dark mode" specific settings under it. |
|
@ahmedre This looks great. Would you like me to pick this up and adjust the PR to something close to the attached image? Or do you already have plans to implement this on your side? |
|
Please feel free to update - JazakumAllah khairan |
Replaces the page background color picker with a new page theme selector. This introduces a bottom sheet with a list of predefined themes (Auto, Paper, Original, Quiet, Calm, Focus) to simplify theme selection and remove the custom color picker. The new implementation uses a `PageThemeBottomSheet` which is shown when the "Page Theme" preference is tapped. This change streamlines the user experience for customizing the reading view's appearance.
This commit redesigns the page theme selection UI, transitioning from a simple list to a more visually appealing card-based grid. Key changes include: * Introducing a new card layout (`item_page_theme_card`) to display theme previews with sample text. * Replacing the old list item layout with a `GridLayoutManager` in the `PageThemeBottomSheet`. * Adding an "App Theme" dropdown (Light, Dark, System) to the bottom sheet, allowing users to control both app-wide and reader page themes from one place. * Refactoring the `PageTheme` sealed class to include properties for text color and whether the theme is dark. * Updating `HighlightingImageView` to apply a color filter for dark page themes, even when the main app theme is not in night mode.
@ahmedre I've updated the PR to match the iOS design with a theme selection bottom sheet and updated the PR text to reflect the changes. A few questions came to mind when working on this. Specifically relating to Night Mode and Theme (UI) selection. 1. Night Mode vs Dark Themes
Should we:
2. App Theme Location
Happy to adjust based on your input. |
Move the hardcoded hex color values for page themes from `Constants.kt` into `colors.xml`.
Adds content descriptions to the theme selection items in the theme picker bottom sheet. This improves accessibility by allowing screen readers to announce the action associated with each theme option (e.g., "Select Paper theme").
|
one thing I just discovered also - iOS app has day/night awareness for these colors depending on the theme 
|
|
my initial thought is to remove the dark mode settings, but people might be really upset by it, in which case I guess we can bring them back. cc @KhaledKhaled0909 since I think you would have an opinion on this one. for the theme, keeping both is fine. |
…ackground-color-picker
Refactors theme handling to unify "Night Mode" with the page theme system. Removes legacy brightness sliders and the standalone night mode preference in favor of a cohesive theme-based approach. Specific changes include: - Removed `nightMode`, `nightModeTextBrightness`, and `nightModeBackgroundBrightness` preferences and their associated UI sliders. - Replaced the manual night mode toggle logic with an automatic system based on the selected App Theme (Light/Dark/System) and Page Theme. - Updated `HighlightingImageView` to use a dynamic `ColorMatrixColorFilter` based on page theme background and text colors, replacing the old inversion-based night mode. - Consistently applied page theme colors to translations and page overlays. - Removed the "Black" page theme in favor of the "Quiet" theme which now correctly forces dark mode. - Updated color resources for all page themes (Paper, Original, Calm, Focus, Quiet) to include both background and text color definitions for light and dark modes. - Cleaned up string resources across multiple locales by removing deprecated night mode setting descriptions.
|
@ahmedre I have updated the PR to now follow a pure theming approach. I have removed brightness slider and kept the night mode toggle. The themes have also been updated to have light and dark mode variants. Feel free to test it out and let me know if anything else is needed |
2 participants
Fixes #2737
Fixes #648
Fixes #647
Fixed #3491
Ref #2211 (comment)
Summary
Replaces the gradient background system with a theme selection bottom sheet, matching the design pattern from the iOS sister app.
Features
6 Page Themes:
App Theme Dropdown:
Dark Theme Support:
ColorMatrixColorFilter(same as existing night mode)UI
Screenshots