Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business

Forums

OverviewFelgo 2 Support (Qt 5) › iOS statusBar in DarkMode

Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #24317

    Marek

    Hi

    I need to change status bar font color black/white when I’m changing my app background color.

    All is fine when user uses “Light Mode” in iPhone, I’m drawing Rectangle with proper color and changing statusbar font color with

    nativeUtils.setStatusBarStyle(setWhite===1 ? NativeUtils.StatusBarStyleWhite : NativeUtils.StatusBarStyleBlack)

    but if user uses Dark Mode in his iPhone this does not work, I mean I’m settings white Rectangle where Statusbar is (in my app) and iPhone always display text in white fonts.

    I have followed this explanation https://felgo.com/developers/forums/t/android-statusbar-style and also as suggested this GitHub example https://github.com/jpnurmi/statusbar qtstatusbar works on Android, does not work on iOS when I add Felgo to the Qt (works as it is with just the Qt) – I can see just black statusbar, so I disabled this on iOS and used nativeUtils.setStatusBarStyle and it works fine until user sets Dark Mode in iPhone.

    I have read these posts about disabling or opt out of DarkMode https://stackoverflow.com/questions/56537855/is-it-possible-to-opt-out-of-dark-mode-on-ios-13 I’m setting values in plist.info but nothing seems to work – I have always white font in statusbar.

    Some advice would be appreciated.

    Best

    Marek

     

    #24318

    Marek

    I have also tested this code

    void MyStaticClass::setDarkMode() {
       // UIWindow.appearance.overrideUserInterfaceStyle =UIUserInterfaceStyleDark;
        
        UIWindow *keyWindow = [[UIApplication sharedApplication] keyWindow];
    
        QIOSViewController *viewController = static_cast<QIOSViewController *>([keyWindow rootViewController]);
        if (@available(iOS 13.0, *)) {
            viewController.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;
            NSLog(@"darkmode:%ld",viewController.overrideUserInterfaceStyle);
        }
    
       // [viewController setNeedsStatusBarAppearanceUpdate];
    }

    NSLog says it is changing 1-light 2-dark but statusbar text stays the same – white fonts

    Best Regards

    Marek

    #24328

    Marek

    Hi

    I have created minimal example for iOS

    https://github.com/frankipl/felgo_statusbar.git

    I have added into ios/Project-Info.plist

    <key>UIStatusBarStyle</key>
    <string>UIStatusBarStyleDarkContent</string>

    and for a second when app is starting I can see black status bar text, but it changes to white again.

    Best Regards

    Marek

    #24330

    Alex
    Felgo Team

    Hi Marek,

    thanks for the detailed report. I can confirm that the status bar seems to ignore the black style if the device is using dark mode. I’ll forward this to the dev team to see if this can be changed.

    As workaround for now, you could check if the device is using dark mode on iOS (example in this post), and in such a case, always use a darker color behind the status bar?

    Best,
    Alex

    #24331

    Marek

    Hi Alex

    Thanks for looking into this. UI project of the app is quite demanding, not going into details I can’t just set dark background, but the app I’m working on will be ready in about two months, so there is some time to make it right, maybe next Felgo release ?

    Actually I was testing this example you pointed to and yes I can detect dark mode

    Best ,

    Marek

    #24356

    Marek

    Hi Alex

    DarkMode is working on iOS with last Felgo release, thanks for that

    New thing in Android: now bottom of the app is beneath Android keys (row at the bottom, 3 keys), Is there some property like Theme.statusBarHeight to make some margin for QML elements on the page ?

    Best Regards

    Marek

    #24357

    Alex
    Felgo Team

    Hi,

    please refer to https://blog.felgo.com/release-3.9.0-webassembly-browser-communication-overlays-tooltips-intros#page-android-display-cutout (or the update changelog).

    It has some info and examples on how to tackle this, e.g. using the safeArea property of a Page or the nativeUtils.safeAreaInsets

    I’ll also copy over the example here:

    import QtQuick 2.5
    import Felgo 3.0
    
    App {
      Navigation {
        navigationMode: navigationModeDrawer
        
        NavigationItem {
          title: "Page"
          icon: IconType.square
          
          NavigationStack {
            Page {
              title: "Page"
              
              Rectangle {
                // Use safeArea item of Page for anchoring custom layouts
                anchors.fill: parent.safeArea
                color: "#f04e26"
              }
              AppButton {
                text: "Bottom Button"
                anchors.horizontalCenter: parent.horizontalCenter
                // Anchor an item to the bottom safe area
                anchors.bottom: parent.safeArea.bottom
              }
            }
          }
        }
        NavigationItem {
          title: "Custom Bottom Bar"
          icon: IconType.minus
          
          NavigationStack {
            Page {
              title: "Page"
              
              // This would be your custom bottom bar
              Rectangle {
                color: Theme.colors.tintColor
                width: parent.width
                // Use your content height and add the bottom safe area
                height: dp(50) + nativeUtils.safeAreaInsets.bottom
                // Anchor the whole bar to the very bottom
                anchors.bottom: parent.bottom
              }
            }
          }
        }
        NavigationItem {
          title: "List / Flickable"
          icon: IconType.list
          
          NavigationStack {
            Page {
              title: "List / Flickable"
              
              AppListView {
                width: parent.width
                // This is now applied by default already
                bottomMargin: nativeUtils.safeAreaInsets.bottom
                
                model: 30
                delegate: AppListItem {
                  text: "Item " + index
                }
              }
            }
          }
        }
      }
    }
    

    Best,
    Alex

Viewing 7 posts - 1 through 7 (of 7 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded