ColorDialog QML Type

Dialog component for choosing a color. More...

Import Statement: import QtQuick.Dialogs 1.3
Since: Qt 5.1



Detailed Description

ColorDialog allows the user to select a color. The dialog is initially invisible. You need to set the properties as desired first, then set visible to true or call open().

Here is a minimal example to open a color dialog and exit after the user chooses a color:

import QtQuick 2.2
import QtQuick.Dialogs 1.0

ColorDialog {
    id: colorDialog
    title: "Please choose a color"
    onAccepted: {
        console.log("You chose: " + colorDialog.color)
    onRejected: {
    Component.onCompleted: visible = true

A ColorDialog window is automatically transient for its parent window. So whether you declare the dialog inside an Item or inside a Window, the dialog will appear centered over the window containing the item, or over the Window that you declared.

The implementation of ColorDialog will be a platform color dialog if possible. If that isn't possible, then it will try to instantiate a QColorDialog. If that also isn't possible, then it will fall back to a QML implementation, DefaultColorDialog.qml. In that case you can customize the appearance by editing this file. DefaultColorDialog.qml contains a Rectangle to hold the dialog's contents, because certain embedded systems do not support multiple top-level windows. When the dialog becomes visible, it will automatically be wrapped in a Window if possible, or simply reparented on top of the main window if there can only be one window.

Property Documentation

color : color

The color which the user selected.

Note: This color is not always the same as the color held by the currentColor property since the user can choose different colors before finally selecting the one to use.

See also currentColor.

currentColor : color

The color which the user has currently selected.

For the color that is set when the dialog is accepted, use the color property.

See also color.

modality : Qt::WindowModality

Whether the dialog should be shown modal with respect to the window containing the dialog's parent Item, modal with respect to the whole application, or non-modal.

By default it is Qt.NonModal.

Modality does not mean that there are any blocking calls to wait for the dialog to be accepted or rejected; it's only that the user will be prevented from interacting with the parent window and/or the application windows at the same time.

You probably need to write an onAccepted handler if you wish to change a color after the user has pressed the OK button, or an onCurrentColorChanged handler if you wish to react to every change the user makes while the dialog is open.

On MacOS the color dialog is only allowed to be non-modal.

showAlphaChannel : bool

Whether the dialog will provide a means of changing the opacity.

By default, this property is true. This property must be set to the desired value before opening the dialog. Usually the alpha channel is represented by an additional slider control.

title : string

The title of the dialog window.

visible : bool

This property holds whether the dialog is visible. By default this is false.

See also modality.

Method Documentation

void close()

Closes the dialog.

void open()

Shows the dialog to the user. It is equivalent to setting visible to true.

© 2024 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.