Theme QML Type
Définit les modifications de couleur et de style pour un jeu de couleurs. En savoir plus…
| Import Statement: | import Qt.labs.StyleKit |
| Inherits: | |
| Status: | Technology preview |
Ce type est en préversion technologique et est susceptible d'être modifié.
Description détaillée
Un thème remplace les propriétés définies dans une Style afin de conférer une apparence visuelle distincte à une palette de couleurs particulière. Un style configure généralement des propriétés structurelles telles que la taille implicite, le remplissage et les rayons, tandis qu’un thème spécifie les couleurs, les ombres et d’autres attributs visuels. Il ne s’agit toutefois pas d’une restriction : un thème peut remplacer n’importe quelle propriété qu’un style peut définir.
Un style peut fournir une « light » et un thème « dark ». Lorsque l’option « themeName » est définie sur « "System" » (valeur par défaut), le thème actif suit le thème défini dans « operating system's color scheme ». Vous pouvez également créer des thèmes supplémentaires à l’aide de « CustomTheme » et « switch between them » lors de l’exécution.
Les propriétés qui ne sont pas définies dans le thème reprennent par défaut celles définies dans le fichier Style.
L'exemple suivant définit des thèmes clair, foncé et à contraste élevé, chacun proposant des couleurs différentes pour les contrôles :
Style {
light: Theme {
control {
text.color: "#202020"
background.color: "#f0f0f0"
background.border.color: "#d0d0d0"
background.shadow.color: "#c0c0c0"
hovered.background.color: "#e0e0e0"
}
applicationWindow.background.color: "gainsboro"
button.hovered.background.color: "#4a90d9"
radioButton.indicator.foreground.color: "#d0d0d0"
switchControl.indicator.foreground.color: "lightslategray"
switchControl.handle.color: "white"
}
dark: Theme {
control {
text.color: "#e0e0e0"
background.color: "#404040"
background.border.color: "#606060"
background.shadow.color: "#222222"
hovered.background.color: "#505050"
}
applicationWindow.background.color: "#2b2b2b"
button.hovered.background.color: "#6ab0f9"
radioButton.indicator.foreground.color: "#606060"
switchControl.indicator.foreground.color: "#505050"
switchControl.handle.color: "#808080"
}
CustomTheme {
name: "HighContrast"
theme: Theme {
control {
text.color: "black"
text.bold: true
background.color: "white"
background.border.color: "black"
background.border.width: 3
background.shadow.visible: false
hovered.background.border.width: 5
}
applicationWindow.background.color: "white"
itemDelegate.hovered.text.color: "white"
itemDelegate.hovered.background.color: "black"
itemDelegate.background.border.width: 0
button.hovered.background.color: "black"
button.hovered.text.color: "white"
radioButton.indicator.foreground.color: "white"
radioButton.checked.indicator.foreground.color: "black"
switchControl.indicator.foreground.color: "white"
switchControl.handle.color: "white"
switchControl.handle.border.color: "black"
switchControl.handle.border.width: 2
switchControl.checked.handle.color: "black"
}
}
}Pour un exemple complet illustrant les thèmes en action, consultez l’exemple StyleKit Quick Controls.
Remarque : la compatibilité des types dans les modules Qt.labs n’est pas garantie dans les versions futures.
Voir également « Style », « CustomTheme » et « StyleKit Property Resolution ».
© 2026 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.
