*Summary:*
Child views added to
Ti.UI.Toolbar via its "items" property will not update themselves when changing the dark/light theme on Android.
*Steps to reproduce:*
Build and run the below code on Android 10 or higher.
Tap on the "Home" button after app launches. _(Do NOT back out.)_
Go to the Android system Settings -> Display screen.
Toggle the dark/light theme switch.
Resume the app.
Notice app UI changed colors *except* for the button text color in toolbar.
Back out of the app and then relaunch it.
Notice the button text color in the toolbar uses the correct color.
function createButton(name) {
const button = Ti.UI.createButton({
title: name,
style: Ti.UI.BUTTON_STYLE_OPTION_NEUTRAL,
});
button.addEventListener("click", function() {
alert(name + " was clicked on.");
});
return button;
}
const window = Ti.UI.createWindow();
const toolbar = Ti.UI.createToolbar({
items: [
createButton("Button 1"),
createButton("Button 2"),
createButton("Button 3")
],
elevation: 2,
top: 0,
width: Ti.UI.FILL,
});
window.add(toolbar);
window.open();
*Result:*
Notice the toolbar button text colors did not change when switching themes.
!Toolbar-Light.png|thumbnail! !Toolbar-Dark-Bad.png|thumbnail!
*Expected Result:*
The button text color should be light blue when using the dark theme.
!Toolbar-Dark-Good.png|thumbnail!
*Notes:*
This is only an issue when changing theme dynamically. Backing out of the app/window and then relaunching it will show the correct colors.
This doesn't appear to be an issue in Alloy when adding child views to toolbar via XML. I've tested for this in our kitchensink-v2 app and it works fine.
*Work-Around:*
Add child views to
Ti.UI.Toolbar via its
add() method instead of the "items" property. However, adding views like this on iOS will have layout issues making this an Android-only solution.
const toolbar = Ti.UI.createToolbar({
elevation: 2,
top: 0,
width: Ti.UI.FILL,
});
toolbar.add(createButton("Button 1"));
toolbar.add(createButton("Button 2"));
toolbar.add(createButton("Button 3"));
PR (master): https://github.com/appcelerator/titanium_mobile/pull/12765
merged to master and 10_0_X branch for 10.0.1 target