how to change the color configuration of QtCreator/QtDesigner

Question

The selected widget on left UI will have a grey background color at the right widgets list (just like the highlight of current line).

The colors are too similar that I can hard to distinguish them.

How can I change it to other color such as red, blue and green?

An example image here:

Answer 1

Qt Designer is a standard Qt application. As such, it supports some command line options, including -stylesheet:

-stylesheet= stylesheet, sets the application styleSheet. The value must be a path to a file that contains the Style Sheet.

This allows to set a custom QSS for the application, similarly to what QApplication.setStyleSheet() does, with the difference that the command line option only accepts a file, while setStyleSheet() only accepts a string (the contents of the style sheet).

Now, a simple solution would be to create a file that sets the selection-background-color (and appropriate contrasting color for the text with selection-color) for tree views, based on the QSS documentation; for instance:

QTreeView {
    selection-background-color: green;
    selection-color: white;
}

Then run Designer as follows:

> designer -stylesheet customstyle.qss

This won't be right, though. Qt Style Sheets (QSS) are always propagated to children, meaning that any tree view will use those selection colors, including widgets that are being designed. You obviously don't want that.

Luckily, Qt developers set object names for most hardcoded widgets, including Designer children.

The object inspector is a custom Designer plugin form used as a QDockWidget, with a qt_designer_objectinspector_dock object name set (see ^{[1] note}); this means that you can use a proper selector type for that:

QDockWidget#qt_designer_objectinspector_dock QTreeView {
    selection-background-color: green;
    selection-color: white;
}

The above means: apply the given properties (background and text colors for selected items) to any QTreeView that is a direct child of a QDockWidget having an object name equal to qt_designer_objectinspector_dock.

Note that for certain styles, the above properties may not be enough.
In this case, you can add a related rule by using specific sub-controls; doing this will theoretically ensure that the selected items will always have those colors, no matter the underlying style:

QDockWidget#qt_designer_objectinspector_dock QTreeView {
    selection-background-color: green;
    selection-color: white;
}

QDockWidget#qt_designer_objectinspector_dock QTreeView::item:selected {
    background: green;
    color: white;
}

Note that Qt Creator uses a slightly different object naming approach. In that case, the selector would be QDockWidget#ObjectInspectorDockWidget. So, if you want, you can use a "centralized" qss file that will eventually work for both of them, using a comma to separate selectors having common rules:

QDockWidget#qt_designer_objectinspector_dock QTreeView,
QDockWidget#ObjectInspectorDockWidget QTreeView {
    selection-background-color: green;
    selection-color: white;
}

QDockWidget#qt_designer_objectinspector_dock QTreeView::item:selected,
QDockWidget#ObjectInspectorDockWidget QTreeView::item:selected {
    background: green;
    color: white;
}

Just remember that QSS rules are context based: in the rare case you are designing a QMainWindow with a QDockWidget named as above with a QTreeView inside it, the colors will be applied. You may consider adding further restrictions to the rule, for instance:

QDockWidget#qt_designer_objectinspector_dock #qt_designer_objectinspector QTreeView,
QDockWidget#ObjectInspectorDockWidget #ObjectInspector QTreeView {
    ...
}

In reality, just using proper names will be a simpler solution.

^{[1]: Designer tool windows are actual widgets, they get reparented and set as widgets of QDockWidgets. The private addToolWindows() (in qttools/src/designer/src/designer/mainwindow.cpp) sets the dock's object name by appending _tool to the original designer tool widget object name.}