Dark Mode + Centralized Theme

[charliewilco]

First pass at a universal theme provider. This removes all references components make to a colors object in favor of a useCurrentTheme() to responds with a light or dark theme depending on the users preferences. Because we're using Expo this also adds react-native-appearance to handle resolving the user's device setting.

Outstanding Items

• Unit testing
• HTML file that renders the editor instance
• Manual user override setting for theming
• Verifying on via Android Emulator

Contacts	Notes

[nikgraf]

afaik this is important for the loading screen, but can be made dynamic based on the mode

[charliewilco]

i think this is inherited from the underlying view but if you can show me a screenshot of what you mean i can take a closer look

[nikgraf]

A lot of great changes!

On iOS the light might is quite broken though, dark mode looks good

[charliewilco]

@nikgraf lots of good feedback 😇 let me walk through the light mode again make sure things shake out well.

how are we feeling about the outstanding items?

[nikgraf]

I'm really happy with the progress!

Regarding the HTML the changes basically have to go to

• https://github.com/SerenityNotes/serenity-notes-clients/blob/main/editor/template.html
• https://github.com/SerenityNotes/serenity-notes-clients/tree/main/editor/components

I wonder if the web view on iOS and Android both support https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
If so colors simply could be defined as CSS variables and re-used like in this post https://useyourloaf.com/blog/supporting-dark-mode-in-wkwebview/

I wouldn't worry about overwriting the default preference. I mean really cool things to have, but better to keep PRs small, ship and iterate often :)