Liquid Glass ActionItem seem to get wrong light/dark mode configuration (via CSS?) #11096
Description
Issue Description
Hello I am observing a weird behaviour of the ActionItems on the ActionBar when using ios liquidGlass. No custom configuration, just disabling UIDesignRequiresCompatibility in plist.
The images show the problem. It looks like light/dark mode is inferred in the wrong way. I would expect the menubar buttons to always appear dark as they sit ontop of a dark background. I observed that when I minimize the app and maximize it again the appearance seems to be recomputed and is than correct till the app redraws the next time. As soon as I tap a button or the ui is redrawn by any other means the glass effect seems to jump back to light mode. My current workaround is, that I force the menubar to dark mode explicitely. Than it works.
In loaded event I use:
if (IOS) {
const actionBar = args.object as ActionBar;
const navBar = actionBar.nativeViewProtected as any;
if (navBar) {
// UIUserInterfaceStyleDark = 2
navBar.overrideUserInterfaceStyle = 2;
}
}
Reproduction
No response
Relevant log output (if applicable)
Environment
OS: macOS 26.3
CPU: (10) arm64 Apple M1 Pro
Shell: /bin/zsh
node: 24.12.0
npm: 11.6.2
nativescript: 9.0.3
# android
java: 17.0.14
ndk: Not Found
apis: Not Found
build_tools: Not Found
system_images: Not Found
# ios
xcode: 26.2/17C52
cocoapods: 1.16.2
python: 3.13.2
python3: 3.13.2
ruby: 3.4.2
platforms:
- DriverKit 25.2
- iOS 26.2
- macOS 26.2
- tvOS 26.2
- visionOS 26.2
- watchOS 26.2Dependencies
"dependencies": {
"@angular/animations": "21.1.4",
"@angular/common": "21.1.4",
"@angular/compiler": "21.1.4",
"@angular/core": "21.1.4",
"@angular/forms": "21.1.4",
"@angular/platform-browser": "21.1.4",
"@angular/platform-browser-dynamic": "21.1.4",
"@angular/router": "21.1.4",
"@apollo/client": "4.1.4",
"@nativescript/angular": "21.0.0",
"@nativescript/core": "9.0.13",
"@nativescript/iqkeyboardmanager": "2.1.2",
"@nativescript/localize": "5.2.0",
"@nativescript/secure-storage": "4.0.1",
"@nativescript/theme": "3.1.0",
"apollo-angular": "13.0.0",
"apollo3-cache-persist": "0.15.0",
"d3-ease": "3.0.1",
"graphql": "16.12.0",
"graphql-tag": "2.12.6",
"intl": "1.2.5",
"moment": "2.30.1",
"nativescript-ui-calendar": "15.2.3",
"nativescript-ui-gauge": "15.2.3",
"rxjs": "7.8.2",
"util": "0.12.5",
"url": "0.11.4",
"uuidjs": "5.1.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "21.1.4",
"@angular/compiler-cli": "21.1.4",
"@graphql-codegen/cli": "6.1.1",
"@graphql-codegen/fragment-matcher": "6.0.0",
"@graphql-codegen/introspection": "5.0.0",
"@graphql-codegen/typescript": "5.0.7",
"@graphql-codegen/typescript-apollo-angular": "4.0.1",
"@graphql-codegen/typescript-operations": "5.0.7",
"@nativescript/android": "9.0.2",
"@nativescript/ios": "9.0.3",
"@nativescript/types": "9.0.0",
"@nativescript/webpack": "5.0.31",
"@ngtools/webpack": "21.1.4",
"@types/d3-ease": "3.0.2",
"@types/intl": "1.2.2",
"@types/lodash": "4.17.23",
"@types/node": "25.2.3",
"keycloak-request-token": "0.1.0",
"patch-package": "^8.0.1",
"rimraf": "6.1.3",
"sass": "1.97.2",
"ts-node": "10.9.2",
"typescript": "5.9.3"
}Please accept these terms
- I have searched the existing issues as well as StackOverflow and this has not been posted before
- This is a bug report
- I agree to follow this project's Code of Conduct