在本页

Theme QML Type

为配色方案定义颜色和样式重载。更多

Import Statement: import Qt.labs.StyleKit
Inherits:

AbstractStyle

详细说明

主题覆盖Style 中定义的属性,为特定配色方案提供独特的视觉外观。样式通常配置结构属性,如隐式大小、填充和半径,而主题则指定颜色、阴影和其他视觉属性。不过,这并不是一种限制--主题可以覆盖样式可以设置的任何属性。

样式可以提供lightdark 主题。当themeName 设置为"System" (默认值)时,活动主题遵循operating system's color scheme 。您还可以在运行时使用CustomThemeswitch between them 创建其他主题。

主题中未设置的属性将返回到Style 中定义的属性。

下面的示例定义了浅色、深色和高对比度主题,每个主题为控件提供了不同的颜色:

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"
        }
    }
}

有关显示主题运行的完整示例,请参阅StyleKit 示例

注意: Qt.labs 模块中的类型不保证在未来版本中保持兼容。

另请参阅 StyleCustomTheme

© 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.