Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Options for selecting dark theme, fix some white flashes when in dark mode #2722

Merged
merged 22 commits into from
Feb 6, 2024

Conversation

haileyok
Copy link
Contributor

@haileyok haileyok commented Feb 1, 2024

fixes #2595

Adds preference in settings to choose between the default dark theme or the OLED dark theme. To support this, we needed to make some changes (which incidentally will make adding additional themes down the road much easier):

  • Create a dimTheme theme which uses all of the base tokens from darkTheme but sets backgroundColor a dim color instead of black
  • Both the ALF and the legacy ThemeProvider take in the name of a theme now rather than a particular color mode. Options are light, dark, or dim. dim is the default dark theme on a new install.
  • useColorMode and useSetColorMode is changed to useThemePrefs and useSetThemePrefs. Respectively, both contexts have colorMode, darkTheme and setColorMode, setDarkTheme as their values
  • useColorModeTheme is changed to return the memoized theme name, and we handle the logic here to determine which theme name to use regardless of the color mode being system/light/dark.
  • Small modification to default to a black background when loading the web app and your system color mode is set to dark

Additionally on web since there are some styles inside of the root HTML document, it seems better to change this logic a bit. Instead of relying on @media here, we can use use the existing updateDocument() from the color mode context to set the particular theme that is being used (light, dark, or dim). Instead of adding/changing the class name inside of the context's useEffect however, we can handle that when the useColorModeTheme memo updates.

Makes sense to also make sure we are updating the system UI background color in this PR. You'll notice that on some screens when a modal is open that the keyboard in dark mode appears quite bright as if there's something white behind it. However, on Android this is very noticeable because the system animations reveal this white background every now and then.

By using expo-system-ui to update the background color, we fix this issue and we no longer get white flashes when opening modals, displaying the keyboard, etc.

Before:

Screen_Recording_20240204_022506_Bluesky.mp4

After:

Screen_Recording_20240204_022627_Bluesky.mp4
Screen.Recording.2024-01-31.at.4.58.29.PM.mov

@haileyok haileyok marked this pull request as ready for review February 1, 2024 01:35
@Hima-Zinn
Copy link
Contributor

Hima-Zinn commented Feb 1, 2024

"Dim" and "Dark" are good names!

@haileyok haileyok changed the title Options for selecting preferred dark theme Options for selecting dark theme, fix some white flashes when in dark mode Feb 4, 2024
Copy link
Collaborator

@pfrazee pfrazee left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@pfrazee pfrazee merged commit ec86282 into main Feb 6, 2024
4 checks passed
@pfrazee pfrazee deleted the feat/dark-options branch February 6, 2024 19:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Offer full-black dark mode setting
3 participants