Theme QML Type

配色の色とスタイルのオーバーライドを定義します。詳細...

Import Statement:	`import Qt.labs.StyleKit`
Inherits:	AbstractStyle

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

詳細説明

テーマは、Style で定義されたプロパティをオーバーライドして、特定の配色のための明確な視覚的外観を提供します。スタイルは通常、暗黙的なサイズ、パディング、半径などの構造的プロパティを設定しますが、テーマは色、影、その他の視覚的属性を指定します。ただし、これは制限ではなく、テーマはスタイルが設定できるあらゆるプロパティをオーバーライドできます。

スタイルは、light とdark テーマを提供することができます。themeName が"System" （デフォルト）に設定されている場合、アクティブなテーマはoperating system's color scheme に従います。また、実行時にCustomTheme とswitch 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 Exampleを参照してください。

注意: Qt.labモジュールの型は、将来のバージョンでも互換性が保たれることを保証するものではありません。

Style とCustomThemeも参照してください。

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