Uploaded image for project: 'Qt'
  1. Qt
  2. QTBUG-124357

Quick Controls are not rendered correctly when changing OS theme

    XMLWordPrintable

Details

    • Bug
    • Resolution: Unresolved
    • P1: Critical
    • None
    • 6.5.5-1
    • Quick: Controls 2
    • None
    • macOS Sonoma 14.4.1 (23E224)
    • macOS

    Description

      The issue: Quick Controls are not rendered correctly when changing OS theme from light to Dark  or if the desktop theme is set to Auto and macOS changes to Dark because of night or evening.

      See also the attached screenshots.

      Reproduce:

      1. Before running from QtCreator the attached project:

      • make sure System Settings-> Appearance -> Light

      2. run the project. The controls are rendered correcly

      3. close the app

      4. Change Desktop to Dark (or Auto if evening or night for you)

      5. Run the app in Qt Creator.

      6 the controls are not rendered correctly.

      Expectation: 

      • QML controls are rendered using a dark theme appropriate
      • QML controls keep the light theme and elements are rendered correctly. 
      import QtQuick
      import QtQuick.Controls
      import QtQuick.Layouts
      import QtQuick.Window
      
      Window {
      
          width: 400
          height: 500
          visible: true
          title: qsTr("Hello World")
      
          flags: Qt.Window | Qt.WindowTitleHint | Qt.WindowSystemMenuHint | (Qt.platform.os === "ios" ? Qt.MaximizeUsingFullscreenGeometryHint : 0)
      
          ColumnLayout {
              anchors.fill: parent
              anchors.margins: 6
      
              TextField {
                  id: tfUsername
      
                  Layout.fillWidth: true
                  placeholderText: "Nume utilizator"
              }
      
              TextField {
                  id: tfPassword
      
                  Layout.fillWidth: true
      
                  echoMode: TextInput.Password
                  placeholderText: "Parola"
              }
      
              Button {
                  id: btRetryConnect
      
                  Layout.fillWidth: true
                  text: "Retry Connect"
              }
      
              Button {
                  id: btLogin
      
                  Layout.fillWidth: true
                  text: "Login"
              }
      
              Item {
                  Layout.fillWidth: true
                  Layout.fillHeight: true
              }
      
              Label {
                  id: lbLoginResult
      
                  Layout.fillWidth: true
      
                  text: "Waiting.."
              }
          }
      }
      

      Attachments

        Issue Links

          No reviews matched the request. Check your Options in the drop-down menu of this sections header.

          Activity

            People

              qt.team.quick.subscriptions Qt Quick and Widgets Team
              mesq Mihai Niculescu
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

              Dates

                Created:
                Updated:

                Gerrit Reviews

                  There are no open Gerrit changes