Add theming and dark mode support #64
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This adds a thin theming layer using the react navigation theming capabilities. Some basic dark mode styling has also been added to the generated content.
codeofdiego
approved these changes
Sep 27, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Overview
This pull request introduces a proof of concept for theming using the built-in theming capabilities of react-navigation. The goal is to create a thin theming layer that simplifies the implementation of dark mode styling across the app.
Key Elements for Dark Mode
To properly implement dark mode, the following elements are considered
Why This Approach?
This approach leverages a theming layer on top of a library we are already using, react-navigation, without introducing new dependencies. It maintains a clear separation between style and component logic, making it easier to manage and extend theming across the app.
React navigation also exposes some basic theming defaults for light and dark mode which we can leverage for basic styling of text, background, etc.
Most of the styling libraries that supports theming introduces a bunch of new syntax and introduces tight coupling between styles and component which makes it hard to refactor in the future. Since this is a very thin theming layer it is also easy to just plug this into the styling libraries as well.
Simulator.Screen.Recording.-.iPhone.15.-.2024-09-27.at.04.50.00.mp4