Dark mode cannot be activated on Android devices

[vincent10400094]

Description

The current dark mode implementation uses media queries to detect whether the system theme is light or dark . For example:

@media (prefers-color-scheme: dark) {
  /* css for dark theme */
}

@media (prefers-color-scheme: light) {
  /* css for light theme */
}

However, current Android WebView doesn't support prefers-color-scheme query (see Browser compatibility), which leads to the following problems:

1. Dark mode cannot be activated successfully
2. Some css selectors only deals with dark and light theme, but not deals with no-preference. which may cause unintended appearance (as the screenshots shown in Logs)

Steps to Reproduce

1. Build the app
2. Enable dark mode in Android device
3. Open the Capture app in Android device

Expected Behavior

• Expected: Dark mode can be activated and all elements should look as intended
• Actual: Dark mode cannot be activated and some elements do not look as intended

Logs

Environment

• Version: Feature dark mode #786
• OS: Android 10
• Device: Pixel 3a

Possible Solutions

1. For some elements not rendered properly, handle the case besides light and dark may solve it

@media (prefers-color-scheme: dark) {
  /* css for dark theme */
}

@media (prefers-color-scheme: light) {
  /* css for light theme */
}

@media (prefers-color-scheme: no-preference) {
  /* css for android */
}

1. For detecting system's theme preference and forcing dark theme. This workaround works for SDK >= 29

┆Issue is synchronized with this Asana task by Unito