[TIMOB-28577] Android: StatusBar/NavBar icons may be wrongly dark if window "theme" is set and app uses Titanium "Solid" light theme
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | Medium |
Status | In Review |
Resolution | Unresolved |
Affected Version/s | Release 10.1.0 |
Fix Version/s | Release 10.2.0 |
Components | Android |
Labels | android, theme |
Reporter | Joshua Quick |
Assignee | Joshua Quick |
Created | 2021-11-06T03:05:40.000+0000 |
Updated | 2021-11-06T03:21:12.000+0000 |
Description
*Summary:*
When setting a
Ti.UI.Window
"theme" property to a dark theme, the status bar and navigation bar icons may wrongly be dark if app uses the Theme.Titanium.DayNight.Solid
or Theme.Titanium.Light.Solid
. This means dark icons may appear on a dark background, making them hard to see.
Titanium's "Solid" themes are used by default as of Titanium 10.1.0.
*Steps to reproduce:*
Set up an Android device to "Light" mode. (Not dark mode.)
Build and run the below code on that device.
Tap on the "Theme.Titanium.Dark" button.
Notice status bar and nav bar icons are wrongly dark on a dark black background.
Navigate back to parent window.
Tap on the "Theme.Titanium.Dark.Solid" button.
Notice status bar and nav bar icons are wrongly dark on a dark gray background.
Navigate back to parent window.
Tap on the "Theme.Titanium.Light" button.
Notice status bar and nav bar icons are wrongly dark on a dark blue background.
const parentWindow = Ti.UI.createWindow({
title: "Select Child Theme",
extendSafeArea: false,
});
const tableView = Ti.UI.createTableView({
data: [
Ti.UI.createTableViewRow({ title: "Theme.Titanium.Dark" }),
Ti.UI.createTableViewRow({ title: "Theme.Titanium.Dark.Solid" }),
Ti.UI.createTableViewRow({ title: "Theme.Titanium.Light" }),
Ti.UI.createTableViewRow({ title: "Theme.Titanium.Light.Solid" }),
],
});
tableView.addEventListener("click", (e) => {
const childWindow = Ti.UI.createWindow({
title: e.row.title,
theme: e.row.title,
});
const closeButton = Ti.UI.createButton({ title: "Close" });
closeButton.addEventListener("click", () => {
childWindow.close();
});
childWindow.add(closeButton);
childWindow.open();
});
parentWindow.add(tableView);
parentWindow.open();
*Cause:*
The Ti.UI.Window
"theme" property acts like an "overlay" and copies the theme's setting on top of the application's theme settings. The above test case's themes that have this dark icon issue do not set the android:windowLightStatusBar
and android:windowLightNavigationBar
attributes to false
and end up wrongly inheriting the app's theme which sets these attributes to true
. The solution is to set this attribute in all Titanium themes to avoid this issue.
PR (master): https://github.com/appcelerator/titanium_mobile/pull/13168