Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Best way to change the color of Qt Quick Controls

Best way to change the color of Qt Quick Controls

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
color changecontrols 2qt quickqml
3 Posts 2 Posters 331 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • SavizS Offline
    SavizS Offline
    Saviz
    wrote on last edited by Saviz
    #1

    I am exploring ways to customize and change the colors of Qt Quick Controls such as Button, TextField, ComboBox, etc., and I would appreciate some advice or guidance regarding the methods I have found so far.

    1- Customizing Qt Quick Controls

    While this method offers great flexibility, it requires overriding multiple controls to make it work, which can be quite time-consuming. My primary goal is simply to adjust the colors of different elements within the controls, without needing to recreate the entire structure for each one.

    For instance, if I want to change the color of a Button or a ComboBox, this approach necessitates overriding the contentItem, background, and essentially reconstructing the existing design. While this is excellent for achieving a high level of customizability, it feels overly complex for something as straightforward as color adjustments.

    2- Palette

    This method seems more promising because it simplifies the process of applying color schemes. However, the documentation lacks detailed examples or information about how the changes would apply to specific controls, as well as which properties or names should be used. The list of options is less comprehensive compared to the previous method.

    I did come across this link, which provides more insights. However, my concern with this approach is the limited granularity. It appears to apply general color schemes, leaving the system to decide how those colors are used across controls and their parts. This doesn't provide the fine-grained control needed to define the exact color for individual elements.

    Final Question
    Am I missing a more efficient or better approach to achieve precise color customization? I’d prefer to avoid having to override the structure of 100+ controls from scratch. If anyone has insights or alternative methods, I’d greatly appreciate your advice!

    NOTES
    Qt version: 6.7.3
    Operating System: Windows 10 64-bit
    Control Style: Basic

    1 Reply Last reply
    0
    • C Offline
      C Offline
      costasjames479
      wrote on last edited by
      #2

      The best way to change the color of Qt Quick Controls is to use a Qt Quick Controls 2 Style. You can set the colors globally using the Material or Fusion style in main.qml, like this:

      import QtQuick.Controls 2.15
      
      ApplicationWindow {
          visible: true
          Material.theme: Material.Dark
          Material.primary: "#6200EE"
          Material.accent: "#03DAC5"
      
          // Your controls go here
      }
      

      For custom colors, use Palette:

      Button {
          palette {
              button: "blue"
              text: "white"
          }
      }
      

      Adjust these settings to apply colors across your application or to specific components.

      https://krispykremelistens500.shop/

      SavizS 1 Reply Last reply
      0
      • C costasjames479

        The best way to change the color of Qt Quick Controls is to use a Qt Quick Controls 2 Style. You can set the colors globally using the Material or Fusion style in main.qml, like this:

        import QtQuick.Controls 2.15
        
        ApplicationWindow {
            visible: true
            Material.theme: Material.Dark
            Material.primary: "#6200EE"
            Material.accent: "#03DAC5"
        
            // Your controls go here
        }
        

        For custom colors, use Palette:

        Button {
            palette {
                button: "blue"
                text: "white"
            }
        }
        

        Adjust these settings to apply colors across your application or to specific components.

        https://krispykremelistens500.shop/

        SavizS Offline
        SavizS Offline
        Saviz
        wrote on last edited by
        #3

        @costasjames479 I am aware that other styles are available for Qt Quick Controls. However, according to the documentation, the Basic Style is the most performant and platform-compatible, which is why I prefer to use it. With this in mind, how can I figure out what to place as the attribute or property name instead of ? in the following code:

        TextField {
            palette {
                ?: "blue"
                ?: "white"
            }
        }
        
        ComboBox {
            palette {
                ?: "blue"
                ?: "white"
            }
        }
        

        In other words, is there a detailed list in the documentation that specifies the name of each attribute, which I might have overlooked?

        1 Reply Last reply
        1

        • Login

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved