Theme QML Type

カラースキームの色やスタイルのオーバーライドを定義します。詳細...

Import Statement:	`import Qt.labs.StyleKit`
Inherits:	AbstractStyle
Status:	Technology preview

この型はテクノロジープレビュー段階にあり、変更される可能性があります。

継承されたメンバーを含むすべてのメンバーの一覧

詳細な説明

テーマは、Style で定義されたプロパティを上書きし、特定のカラースキームに対して独自の視覚的外観を提供します。通常、スタイルは暗黙的なサイズ、パディング、半径などの構造的なプロパティを構成するのに対し、テーマは色、影、その他の視覚的属性を指定します。ただし、これは制限ではありません。テーマは、スタイルが設定できるあらゆるプロパティを上書きすることができます。

スタイルは、light およびdark テーマを指定できます。themeName が"System" （デフォルト）に設定されている場合、アクティブなテーマはoperating system's color scheme に従います。また、実行時にCustomTheme およびswitch between them を使用して、追加のテーマを作成することもできます。

テーマで設定されていないプロパティは、Style で定義されている値にフォールバックします。

次の例では、light、dark、high-contrast の各テーマを定義しており、それぞれコントロールに異なる色が割り当てられています。

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 Quick Controls Example」を参照してください。

注: Qt.labs モジュール内の型は、将来のバージョンでも互換性が維持されるとは限りません。

関連項目: Style 、CustomTheme 、およびStyleKit プロパティの解決。

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