-
Notifications
You must be signed in to change notification settings - Fork 1.8k
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
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
"Dim" and "Dark" are good names! |
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
pfrazee
approved these changes
Feb 6, 2024
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
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.
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):
dimTheme
theme which uses all of the base tokens fromdarkTheme
but setsbackgroundColor
a dim color instead of blackThemeProvider
take in the name of a theme now rather than a particular color mode. Options arelight
,dark
, ordim
.dim
is the default dark theme on a new install.useColorMode
anduseSetColorMode
is changed touseThemePrefs
anduseSetThemePrefs
. Respectively, both contexts havecolorMode, darkTheme
andsetColorMode, setDarkTheme
as their valuesuseColorModeTheme
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.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 existingupdateDocument()
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'suseEffect
however, we can handle that when theuseColorModeTheme
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