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
Forum Updated to NodeBB v4.3 + New Features

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 424 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.
  • S Offline
    S Offline
    Saviz
    wrote on 6 Jan 2025, 16:29 last edited by Saviz 7 days ago
    #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 7 Jan 2025, 10:20 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/

      S 1 Reply Last reply 7 Jan 2025, 16:56
      0
      • C costasjames479
        7 Jan 2025, 10:20

        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/

        S Offline
        S Offline
        Saviz
        wrote on 7 Jan 2025, 16:56 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

        3/3

        7 Jan 2025, 16:56

        • Login

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