podverse / podverse-rn

Podverse mobile app written in React Native for iOS, Android, and F-Droid
https://podverse.fm/about
GNU Affero General Public License v3.0
217 stars 36 forks source link

Add light mode suport #1550

Open mitchdowney opened 1 year ago

mitchdowney commented 1 year ago

We actually have the foundations for light mode already in place, but as a small open source team with day jobs, we decided to drop light mode support because we didn't have the resources to support and maintain two color schemes.

There are so many major initiatives on my plate at this time, I don't realistically see myself having the time to add light mode support any time soon, but I think this could be a great feature for someone who would like to make an open source contribution, without having to learn much about how the code in the Podverse mobile app works.

The bulk of the work involves thoroughly combing through each screen, and toggling light and dark mode on, and setting different colors for each element on screen as needed. If you run into a tricky part and can't figure it out, I can jump in to assist, or you could just note which element on which screen has the issue and @kreonjr or I can fix it on our own.

If anyone is potentially interested in working on light mode in Podverse, please let me know and I would be happy to help get you started.

You can see that the majority of dark and light mode is already handled in this file, but in order to activate light mode someone will need to comb through and test the colors in the app and make adjustments as needed.

anibalism commented 1 year ago

Hi there, I just noticed a bug in the Podverse Android app. Steps to reproduce: When Android is set to dark mode, the color of summary text of the podcast that's being listened to changes from white (in light mode) to gray.

This makes viewing the summary while you're listening or while the podcast is paused difficult. I was about to report a bug but I'm glad I found this issue first!

Since I basically was doing what you've requested already, I'm willing to fix the issue and also fix the problem with dark mode.

I'm a bit tech savvy but not a programmer by any means. If you have any other info that could guide me with fixing it I would love to do it. I can start doing it on tuesday. Thanks a lot for this great app!

mitchdowney commented 1 year ago

Hi @anibalism, I just tried reproducing the issue on a Pixel 4a, Android 13 device with Dark mode turned on, Podverse v4.10.6, and I'm not seeing the issue. Can you provide a screenshot/s of the issue you're seeing?

image

image

image

image

anibalism commented 1 year ago

Yes of course. Maybe it's related to this phone being a Xiaomi device (Mi 9 Lite, running Android 11).

Screenshot_2023-01-17-20-30-31-879_fr neamar kiss Screenshot_2023-01-17-20-31-30-519_com podverse fdroid Screenshot_2023-01-17-20-31-41-952_com podverse fdroid Screenshot_2023-01-17-20-32-00-554_com podverse fdroid Screenshot_2023-01-17-20-32-06-741_com podverse fdroid

mitchdowney commented 1 year ago

Thanks for the screenshots. Hmm this is really unexpected...I just checked the code to see if we are doing anything that could cause text style to load differently, but it looks like we just have it hardcoded to be white all the time.

Something else I see in your screenshots is that the player progress slider has a dark gray position indicator, when that should be white too. It looks like it might be the same dark gray as the text. It seems like your device may be selectively trying to convert text colors on some UI elements, but not others? Is it possible you have any "inverse colors" settings on or something?

It looks like you have Reading Mode turned on, although I don't think that should affect colors in apps.

Unfortunately I'm pretty stumped at the moment. It's strange that some white elements on your screen are getting converted, but not all of them. Until I have a way to reproduce this issue this might be tricky for me to fix.

ghost commented 1 year ago

I am not a fan of dark mode, so having a light mode would be really nice. =)

AmanNegi commented 2 months ago

This sounds interesting, I will try to help you with this. I am familiar with Flutter & React and a little but of React Native. For now, I will test the app and explore the codebase. If you have any tips/suggestions for me to get started please let me know.