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
Navigation
Custom Components
Third-Party Libraries
Icons / Images
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.
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.
https://github.com/user-attachments/assets/7b64a772-25fb-45af-af25-bdaef3d7296b