QmlProjectManager: Add theming support to QDS landing page

Task-number: QDS-6897
Change-Id: I2e1cea556d906d59664cb72612ea1d67ef495f4f
Reviewed-by: Alessandro Portale <[email protected]>
Reviewed-by: <[email protected]>

13 files changed, 475 insertions, 47 deletions

diff --git a/share/qtcreator/qmldesigner/landingpage/content/InstallQdsStatusBlock.ui.qml b/share/qtcreator/qmldesigner/landingpage/content/InstallQdsStatusBlock.ui.qml
index 4132d62b200..35c363583c6 100644
--- a/share/qtcreator/qmldesigner/landingpage/content/InstallQdsStatusBlock.ui.qml
+++ b/share/qtcreator/qmldesigner/landingpage/content/InstallQdsStatusBlock.ui.qml
@@ -36,10 +36,11 @@ Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on
 import QtQuick 2.15
 import QtQuick.Controls 2.15
 import LandingPage
+import QdsLandingPageTheme as Theme
 
 Rectangle {
     id: installQdsBlock
-    color: "#c3c3c3"
+    color: Theme.Values.themeBackgroundColorNormal
     border.width: 0
     property alias installQdsBlockVisible: installQdsBlock.visible
     property alias installButton: installButton
@@ -48,8 +49,8 @@ Rectangle {
     Text {
         id: statusText
         text: qsTr("No Qt Design Studio installation found")
-        font.family: "TitilliumWeb"
-        font.pixelSize: 18
+        font.family: Theme.Values.baseFont
+        font.pixelSize: Constants.fontSizeSubtitle
         anchors.top: parent.top
         anchors.topMargin: 10
         anchors.horizontalCenter: parent.horizontalCenter
@@ -58,8 +59,8 @@ Rectangle {
     Text {
         id: suggestionText
         text: qsTr("Would you like to install it now?")
-        font.family: "TitilliumWeb"
-        font.pixelSize: 18
+        font.family: Theme.Values.baseFont
+        font.pixelSize: Constants.fontSizeSubtitle
         anchors.top: statusText.bottom
         anchors.topMargin: 10
         anchors.horizontalCenterOffset: 0
diff --git a/share/qtcreator/qmldesigner/landingpage/content/LandingSeparator.qml b/share/qtcreator/qmldesigner/landingpage/content/LandingSeparator.qml
index 41dda25cd3d..344bbbcd3c9 100644
--- a/share/qtcreator/qmldesigner/landingpage/content/LandingSeparator.qml
+++ b/share/qtcreator/qmldesigner/landingpage/content/LandingSeparator.qml
@@ -29,9 +29,10 @@
 
 import QtQuick 2.15
 import QtQuick.Controls 2.15
+import QdsLandingPageTheme as Theme
 
 Rectangle {
-    color: "#313131"
+    color: Theme.Values.themeControlBackground
     width: parent.width
     height: 2
     z: 10
diff --git a/share/qtcreator/qmldesigner/landingpage/content/ProjectInfoStatusBlock.ui.qml b/share/qtcreator/qmldesigner/landingpage/content/ProjectInfoStatusBlock.ui.qml
index 2ee64e0f397..40e9f5e3fc6 100644
--- a/share/qtcreator/qmldesigner/landingpage/content/ProjectInfoStatusBlock.ui.qml
+++ b/share/qtcreator/qmldesigner/landingpage/content/ProjectInfoStatusBlock.ui.qml
@@ -36,12 +36,13 @@ Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on
 import QtQuick 2.15
 import QtQuick.Controls 2.15
 import LandingPage
+import QdsLandingPageTheme as Theme
 
 Rectangle {
     id: projectInfo
     height: 300
-    color: "#c3c3c3"
-    border.color: "#ffffff"
+    color: Theme.Values.themeBackgroundColorNormal
+    border.color: Theme.Values.themeBackgroundColorNormal
     border.width: 0
     property bool qdsInstalled: qdsVersionText.text.length > 0
     property bool projectFileExists: false
@@ -62,8 +63,8 @@ Rectangle {
         Text {
             id: projectFileInfoTitle
             text: qsTr("QML PROJECT FILE INFO")
-            font.family: "TitilliumWeb"
-            font.pixelSize: 18
+            font.family: Theme.Values.baseFont
+            font.pixelSize: Constants.fontSizeSubtitle
             anchors.top: parent.top
             horizontalAlignment: Text.AlignHCenter
             anchors.horizontalCenter: parent.horizontalCenter
@@ -82,8 +83,8 @@ Rectangle {
             Text {
                 id: qtVersionText
                 text: qsTr("Qt Version - ") + qtVersion
-                font.family: "TitilliumWeb"
-                font.pixelSize: 18
+                font.family: Theme.Values.baseFont
+                font.pixelSize: Constants.fontSizeSubtitle
                 anchors.top: parent.top
                 horizontalAlignment: Text.AlignHCenter
                 anchors.horizontalCenter: parent.horizontalCenter
@@ -93,8 +94,8 @@ Rectangle {
             Text {
                 id: qdsVersionText
                 text: qsTr("Qt Design Studio Version - ") + qdsVersion
-                font.family: "TitilliumWeb"
-                font.pixelSize: 18
+                font.family: Theme.Values.baseFont
+                font.pixelSize: Constants.fontSizeSubtitle
                 anchors.top: qtVersionText.bottom
                 horizontalAlignment: Text.AlignHCenter
                 anchors.topMargin: 10
@@ -114,8 +115,8 @@ Rectangle {
             Text {
                 id: projectFileInfoMissingText
                 text: qsTr("No QML project file found - Would you like to create one?")
-                font.family: "TitilliumWeb"
-                font.pixelSize: 18
+                font.family: Theme.Values.baseFont
+                font.pixelSize: Constants.fontSizeSubtitle
                 anchors.top: parent.top
                 horizontalAlignment: Text.AlignHCenter
                 anchors.horizontalCenter: parent.horizontalCenter
@@ -143,8 +144,8 @@ Rectangle {
         Text {
             id: cmakeInfoTitle
             text: qsTr("CMAKE RESOURCE FILES")
-            font.family: "TitilliumWeb"
-            font.pixelSize: 18
+            font.family: Theme.Values.baseFont
+            font.pixelSize: Constants.fontSizeSubtitle
             anchors.top: parent.top
             horizontalAlignment: Text.AlignHCenter
             anchors.horizontalCenter: parent.horizontalCenter
@@ -164,7 +165,7 @@ Rectangle {
                 id: cmakeList
                 text: qsTr("")
                 font.family: "TitilliumWeb"
-                font.pixelSize: 18
+                font.pixelSize: Constants.fontSizeSubtitle
                 anchors.top: parent.top
                 horizontalAlignment: Text.AlignHCenter
                 anchors.topMargin: 0
@@ -184,8 +185,8 @@ Rectangle {
             Text {
                 id: cmakeMissingText
                 text: qsTr("No resource files found - Would you like to generate them?")
-                font.family: "TitilliumWeb"
-                font.pixelSize: 18
+                font.family: Theme.Values.baseFont
+                font.pixelSize: Constants.fontSizeSubtitle
                 anchors.top: parent.top
                 horizontalAlignment: Text.AlignHCenter
                 anchors.topMargin: 10
diff --git a/share/qtcreator/qmldesigner/landingpage/content/PushButton.ui.qml b/share/qtcreator/qmldesigner/landingpage/content/PushButton.ui.qml
index 63bb38565f6..be872c21d7d 100644
--- a/share/qtcreator/qmldesigner/landingpage/content/PushButton.ui.qml
+++ b/share/qtcreator/qmldesigner/landingpage/content/PushButton.ui.qml
@@ -26,6 +26,7 @@
 ****************************************************************************/
 import QtQuick 2.15
 import QtQuick.Templates 2.15
+import QdsLandingPageTheme as Theme
 
 Button {
     id: control
@@ -42,17 +43,18 @@ Button {
     text: "My Button"
     property alias fontpixelSize: textItem.font.pixelSize
     property bool forceHover: false
+    hoverEnabled: true
     state: "normal"
 
     background: buttonBackground
     Rectangle {
         id: buttonBackground
-        color: "#00000000"
+        color: Theme.Values.themeControlBackground
         implicitWidth: 100
         implicitHeight: 40
         opacity: enabled ? 1 : 0.3
         radius: 2
-        border.color: "#047eff"
+        border.color: Theme.Values.themeControlOutline
         anchors.fill: parent
     }
 
@@ -64,7 +66,7 @@ Button {
         font.pixelSize: 18
 
         opacity: enabled ? 1.0 : 0.3
-        color: "#ffffff"
+        color: Theme.Values.themeTextColor
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
         rightPadding: 5
@@ -78,13 +80,13 @@ Button {
 
             PropertyChanges {
                 target: buttonBackground
-                color: "#323232"
-                border.color: "#868686"
+                color: Theme.Values.themeControlBackground
+                border.color: Theme.Values.themeControlOutline
             }
 
             PropertyChanges {
                 target: textItem
-                color: "#ffffff"
+                color: Theme.Values.themeTextColor
             }
         },
         State {
@@ -92,13 +94,13 @@ Button {
             when: (control.hovered || control.forceHover) && !control.down
             PropertyChanges {
                 target: textItem
-                color: "#ffffff"
+                color: Theme.Values.themeTextColor
             }
 
             PropertyChanges {
                 target: buttonBackground
-                color: "#474747"
-                border.color: "#adadad"
+                color: Theme.Values.themeControlBackgroundHover
+                border.color: Theme.Values.themeControlBackgroundHover
             }
         },
         State {
@@ -106,13 +108,13 @@ Button {
             when: control.down
             PropertyChanges {
                 target: textItem
-                color: "#111111"
+                color: Theme.Values.themeTextColor
             }
 
             PropertyChanges {
                 target: buttonBackground
-                color: "#2e769e"
-                border.color: "#2e769e"
+                color: Theme.Values.themeControlBackgroundInteraction
+                border.color: Theme.Values.themeControlOutlineInteraction
             }
         }
     ]
diff --git a/share/qtcreator/qmldesigner/landingpage/content/Screen01.ui.qml b/share/qtcreator/qmldesigner/landingpage/content/Screen01.ui.qml
index e54a5d058b9..c3521001e64 100644
--- a/share/qtcreator/qmldesigner/landingpage/content/Screen01.ui.qml
+++ b/share/qtcreator/qmldesigner/landingpage/content/Screen01.ui.qml
@@ -36,12 +36,14 @@ Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on
 import QtQuick 2.15
 import QtQuick.Controls 6.2
 import LandingPage
+import LandingPageApi
+import QdsLandingPageTheme as Theme
 
 Rectangle {
     id: rectangle2
     width: 1024
     height: 768
-    color: "#c3c3c3"
+    color: Theme.Values.themeBackgroundColorNormal
     property bool qdsInstalled: true
     property alias openQtcButton: openQtc
     property alias openQdsButton: openQds
@@ -59,7 +61,7 @@ Rectangle {
         id: logoArea
         width: parent.width
         height: 180
-        color: "#c3c3c3"
+        color: Theme.Values.themeBackgroundColorNormal
         anchors.top: parent.top
         anchors.horizontalCenter: parent.horizontalCenter
 
@@ -74,8 +76,8 @@ Rectangle {
         Text {
             id: qdsText
             text: qsTr("Qt Design Studio")
-            font.pixelSize: 55
-            font.family: "TitilliumWeb"
+            font.pixelSize: Constants.fontSizeTitle
+            font.family: Theme.Values.baseFont
             anchors.horizontalCenter: parent.horizontalCenter
             anchors.bottom: parent.bottom
             anchors.bottomMargin: 20
@@ -100,9 +102,8 @@ Rectangle {
         InstallQdsStatusBlock {
             id: installQdsStatusBlock
             width: parent.width
-            anchors.top: parent.top
-            anchors.topMargin: 0
             anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
             visible: !qdsInstalled
         }
 
@@ -110,9 +111,8 @@ Rectangle {
             id: projectInfoStatusBlock
             width: parent.width
             visible: !installQdsStatusBlock.visible
-            anchors.top: parent.top
-            anchors.topMargin: 0
             anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
         }
 
         LandingSeparator {
@@ -128,7 +128,7 @@ Rectangle {
         height: 220
         anchors.bottom: parent.bottom
         anchors.horizontalCenter: parent.horizontalCenter
-        color: "#c3c3c3"
+        color: Theme.Values.themeBackgroundColorNormal
 
         Item {
             id: openQdsBox
@@ -142,8 +142,8 @@ Rectangle {
             Text {
                 id: openQdsText
                 text: qsTr("Open with Qt Design Studio")
-                font.pixelSize: 22
-                font.family: "TitilliumWeb"
+                font.pixelSize: Constants.fontSizeSubtitle
+                font.family: Theme.Values.baseFont
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.top: parent.top
                 anchors.topMargin: 50
@@ -171,8 +171,8 @@ Rectangle {
             Text {
                 id: openQtcText
                 text: qsTr("Open with Qt Creator - Text Mode")
-                font.pixelSize: 22
-                font.family: "TitilliumWeb"
+                font.pixelSize: Constants.fontSizeSubtitle
+                font.family: Theme.Values.baseFont
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.top: parent.top
                 anchors.topMargin: 50
@@ -190,7 +190,7 @@ Rectangle {
         CheckBox {
             id: rememberCheckbox
             text: qsTr("Remember my choice")
-            font.family: "TitilliumWeb"
+            font.family: Theme.Values.baseFont
             anchors.bottom: parent.bottom
             anchors.bottomMargin: 30
             anchors.horizontalCenter: parent.horizontalCenter
diff --git a/share/qtcreator/qmldesigner/landingpage/imports/LandingPage/Constants.qml b/share/qtcreator/qmldesigner/landingpage/imports/LandingPage/Constants.qml
index e3f9067f8b3..9dc4144c4d9 100644
--- a/share/qtcreator/qmldesigner/landingpage/imports/LandingPage/Constants.qml
+++ b/share/qtcreator/qmldesigner/landingpage/imports/LandingPage/Constants.qml
@@ -29,4 +29,7 @@ import QtQuick 2.10
 QtObject {
     readonly property int buttonDefaultMargin: 30
     readonly property int buttonSmallMargin: 20
+
+    readonly property int fontSizeTitle: 55
+    readonly property int fontSizeSubtitle: 22
 }
diff --git a/share/qtcreator/qmldesigner/landingpage/imports/QdsLandingPageTheme/Values.qml b/share/qtcreator/qmldesigner/landingpage/imports/QdsLandingPageTheme/Values.qml
new file mode 100644
index 00000000000..1ff4b5f0d0d
--- /dev/null
+++ b/share/qtcreator/qmldesigner/landingpage/imports/QdsLandingPageTheme/Values.qml
@@ -0,0 +1,312 @@
+/****************************************************************************
+**
+** Copyright (C) 2022 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+pragma Singleton
+import QtQuick 2.15
+import LandingPageTheme
+
+QtObject {
+    id: values
+
+    property string baseFont: "TitilliumWeb"
+
+    property real baseHeight: 29
+    property real baseFontSize: 12
+    property real baseIconFont: 12
+
+    property real scaleFactor: 1.0
+
+    property real height: Math.round(values.baseHeight * values.scaleFactor)
+    property real myFontSize: Math.round(values.baseFont * values.scaleFactor)
+    property real myIconFontSize: Math.round(values.baseIconFont * values.scaleFactor)
+
+    property real squareComponentWidth: values.height
+    property real smallRectWidth: values.height / 2 * 1.5
+
+    property real inputWidth: values.height * 4
+
+    property real sliderHeight: values.height / 2 * 1.5 // TODO:Have a look at -> sliderAreaHeight: Data.Values.height/2*1.5
+
+    property real sliderControlSize: 12
+    property real sliderControlSizeMulti: values.sliderControlSize * values.scaleFactor
+
+    property int dragThreshold: 10 // px
+    property real spinControlIconSize: 8
+    property real spinControlIconSizeMulti: values.spinControlIconSize * values.scaleFactor
+
+    property real sliderTrackHeight: values.height / 3
+    property real sliderHandleHeight: values.sliderTrackHeight * 1.8
+    property real sliderHandleWidth: values.sliderTrackHeight * 0.5
+    property real sliderFontSize: Math.round(8 * values.scaleFactor)
+    property real sliderPadding: Math.round(6 * values.scaleFactor)
+    property real sliderMargin: Math.round(3 * values.scaleFactor)
+
+    property real sliderPointerWidth: Math.round(7 * values.scaleFactor)
+    property real sliderPointerHeight: Math.round(2 * values.scaleFactor)
+
+    property real checkBoxSpacing: Math.round(6 * values.scaleFactor)
+
+    property real radioButtonSpacing: values.checkBoxSpacing
+    property real radioButtonWidth: values.height
+    property real radioButtonHeight: values.height
+    property real radioButtonIndicatorWidth: 14
+    property real radioButtonIndicatorHeight: 14
+
+    property real switchSpacing: values.checkBoxSpacing
+
+    property real columnWidth: 225 + (175 * (values.scaleFactor * 2))
+
+    property real marginTopBottom: 4
+    property real border: 1
+
+    property real maxComboBoxPopupHeight: Math.round(300 * values.scaleFactor)
+    property real maxTextAreaPopupHeight: Math.round(150 * values.scaleFactor)
+
+    property real contextMenuLabelSpacing: Math.round(30 * values.scaleFactor)
+    property real contextMenuHorizontalPadding: Math.round(6 * values.scaleFactor)
+
+    property real inputHorizontalPadding: Math.round(6 * values.scaleFactor)
+    property real typeLabelVerticalShift: Math.round(6 * values.scaleFactor)
+
+    property real scrollBarThickness: 10
+    property real scrollBarActivePadding: 1
+    property real scrollBarInactivePadding: 2
+
+    property real toolTipHeight: 25
+    property int toolTipDelay: 1000
+
+    // Controls hover animation params
+    property int hoverDuration: 500
+    property int hoverEasing: Easing.OutExpo
+
+    // Layout sizes
+    property real sectionColumnSpacing: 20 // distance between label and sliderControlSize
+    property real sectionRowSpacing: 5
+    property real sectionHeadGap: 15
+    property real sectionHeadHeight: 21 // tab and section
+    property real sectionHeadSpacerHeight: 10
+
+    property real controlLabelWidth: 15
+    property real controlLabelGap: 5
+
+    property real controlGap: 5 // TODO different name
+    property real twoControlColumnGap: values.controlLabelGap
+                                       + values.controlLabelWidth
+                                       + values.controlGap
+
+    property real columnGap: 10
+
+    property real iconAreaWidth: Math.round(21 * values.scaleFactor)
+
+    property real linkControlWidth: values.iconAreaWidth
+    property real linkControlHeight: values.height
+
+    property real infinityControlWidth: values.iconAreaWidth
+    property real infinityControlHeight: values.height
+
+    property real transform3DSectionSpacing: 15
+
+    // Control sizes
+
+    property real defaultControlWidth: values.squareComponentWidth * 5
+    property real defaultControlHeight: values.height
+
+    property real actionIndicatorWidth: values.iconAreaWidth //StudioTheme.Values.squareComponentWidth
+    property real actionIndicatorHeight: values.height
+
+    property real spinBoxIndicatorWidth: values.smallRectWidth - 2 * values.border
+    property real spinBoxIndicatorHeight: values.height / 2 - values.border
+
+    property real sliderIndicatorWidth: values.squareComponentWidth
+    property real sliderIndicatorHeight: values.height
+
+    property real translationIndicatorWidth: values.squareComponentWidth
+    property real translationIndicatorHeight: values.height
+
+    property real checkIndicatorWidth: values.squareComponentWidth
+    property real checkIndicatorHeight: values.height
+
+    property real singleControlColumnWidth: 2 * values.twoControlColumnWidth
+                                            + values.twoControlColumnGap
+                                            + values.actionIndicatorWidth
+
+    property real twoControlColumnWidthMin: 3 * values.height - 2 * values.border
+    property real twoControlColumnWidthMax: 3 * values.twoControlColumnWidthMin
+    property real twoControlColumnWidth: values.twoControlColumnWidthMin
+
+    property real controlColumnWithoutControlsWidth: 2 * (values.actionIndicatorWidth
+                                                          + values.twoControlColumnGap)
+                                                    + values.linkControlWidth
+
+    property real controlColumnWidth: values.controlColumnWithoutControlsWidth
+                                      + 2 * values.twoControlColumnWidth
+
+    property real controlColumnWidthMin: values.controlColumnWithoutControlsWidth
+                                         + 2 * values.twoControlColumnWidthMin
+
+    property real propertyLabelWidthMin: 80
+    property real propertyLabelWidthMax: 120
+    property real propertyLabelWidth: values.propertyLabelWidthMin
+
+    property real sectionLeftPadding: 8
+    property real sectionLayoutRightPadding: values.scrollBarThickness + 6
+
+    property real columnFactor: values.propertyLabelWidthMin
+                                / (values.propertyLabelWidthMin + values.controlColumnWidthMin)
+
+    function responsiveResize(width) {
+        var tmpWidth = width - values.sectionColumnSpacing
+                       - values.sectionLeftPadding - values.sectionLayoutRightPadding
+        var labelColumnWidth = Math.round(tmpWidth * values.columnFactor)
+        labelColumnWidth = Math.max(Math.min(values.propertyLabelWidthMax, labelColumnWidth),
+                                    values.propertyLabelWidthMin)
+
+        var controlColumnWidth = tmpWidth - labelColumnWidth
+        var controlWidth = Math.round((controlColumnWidth - values.controlColumnWithoutControlsWidth) * 0.5)
+        controlWidth = Math.max(Math.min(values.twoControlColumnWidthMax, controlWidth),
+                                values.twoControlColumnWidthMin)
+
+        values.propertyLabelWidth = labelColumnWidth
+        values.twoControlColumnWidth = controlWidth
+    }
+
+    // Color Editor Popup
+    property real colorEditorPopupWidth: 4 * values.colorEditorPopupSpinBoxWidth
+                                         + 3 * values.controlGap
+                                         + 2 * values.colorEditorPopupPadding
+    property real colorEditorPopupHeight: 800
+    property real colorEditorPopupPadding: 10
+    property real colorEditorPopupMargin: 20
+
+    property real colorEditorPopupSpacing: 10
+    property real colorEditorPopupLineHeight: 60
+
+    property real hueSliderHeight: 20
+    property real hueSliderHandleWidth: 10
+
+    property real colorEditorPopupCmoboBoxWidth: 110
+    property real colorEditorPopupSpinBoxWidth: 54
+
+    // Theme Colors
+
+    property bool isLightTheme: themeControlBackground.hsvValue > themeTextColor.hsvValue
+
+    property string themePanelBackground: Theme.color(Theme.DSpanelBackground)
+
+    property string themeGreenLight: Theme.color(Theme.DSgreenLight)
+    property string themeAmberLight: Theme.color(Theme.DSamberLight)
+    property string themeRedLight: Theme.color(Theme.DSredLight)
+
+    property string themeInteraction: Theme.color(Theme.DSinteraction)
+    property string themeError: Theme.color(Theme.DSerrorColor)
+    property string themeWarning: Theme.color(Theme.DSwarningColor)
+    property string themeDisabled: Theme.color(Theme.DSdisabledColor)
+
+    property string themeInteractionHover: Theme.color(Theme.DSinteractionHover)
+
+    property string themeAliasIconChecked: Theme.color(Theme.DSnavigatorAliasIconChecked)
+
+    // Control colors
+    property color themeControlBackground: Theme.color(Theme.DScontrolBackground)
+    property string themeControlBackgroundInteraction: Theme.color(Theme.DScontrolBackgroundInteraction)
+    property string themeControlBackgroundDisabled: Theme.color(Theme.DScontrolBackgroundDisabled)
+    property string themeControlBackgroundGlobalHover: Theme.color(Theme.DScontrolBackgroundGlobalHover)
+    property string themeControlBackgroundHover: Theme.color(Theme.DScontrolBackgroundHover)
+
+    property string themeControlOutline: Theme.color(Theme.DScontrolOutline)
+    property string themeControlOutlineInteraction: Theme.color(Theme.DScontrolOutlineInteraction)
+    property string themeControlOutlineDisabled: Theme.color(Theme.DScontrolOutlineDisabled)
+
+    // Panels & Panes
+    property string themeBackgroundColorNormal: Theme.color(Theme.DSBackgroundColorNormal)
+    property string themeBackgroundColorAlternate: Theme.color(Theme.DSBackgroundColorAlternate)
+
+    // Text colors
+    property color themeTextColor: Theme.color(Theme.DStextColor)
+    property string themeTextColorDisabled: Theme.color(Theme.DStextColorDisabled)
+    property string themeTextSelectionColor: Theme.color(Theme.DStextSelectionColor)
+    property string themeTextSelectedTextColor: Theme.color(Theme.DStextSelectedTextColor)
+    property string themeTextColorDisabledMCU: Theme.color(Theme.DStextColorDisabled)
+
+    property string themePlaceholderTextColor: Theme.color(Theme.DSplaceholderTextColor)
+    property string themePlaceholderTextColorInteraction: Theme.color(Theme.DSplaceholderTextColorInteraction)
+
+    // Icon colors
+    property string themeIconColor: Theme.color(Theme.DSiconColor)
+    property string themeIconColorHover: Theme.color(Theme.DSiconColorHover)
+    property string themeIconColorInteraction: Theme.color(Theme.DSiconColorInteraction)
+    property string themeIconColorDisabled: Theme.color(Theme.DSiconColorDisabled)
+    property string themeIconColorSelected: Theme.color(Theme.DSiconColorSelected)
+
+    property string themeLinkIndicatorColor: Theme.color(Theme.DSlinkIndicatorColor)
+    property string themeLinkIndicatorColorHover: Theme.color(Theme.DSlinkIndicatorColorHover)
+    property string themeLinkIndicatorColorInteraction: Theme.color(Theme.DSlinkIndicatorColorInteraction)
+    property string themeLinkIndicatorColorDisabled: Theme.color(Theme.DSlinkIndicatorColorDisabled)
+
+    property string themeInfiniteLoopIndicatorColor: Theme.color(Theme.DSlinkIndicatorColor)
+    property string themeInfiniteLoopIndicatorColorHover: Theme.color(Theme.DSlinkIndicatorColorHover)
+    property string themeInfiniteLoopIndicatorColorInteraction: Theme.color(Theme.DSlinkIndicatorColorInteraction)
+
+    // Popup background color (ComboBox, SpinBox, TextArea)
+    property string themePopupBackground: Theme.color(Theme.DSpopupBackground)
+    // GradientPopupDialog modal overly color
+    property string themePopupOverlayColor: Theme.color(Theme.DSpopupOverlayColor)
+
+    // ToolTip (UrlChooser)
+    property string themeToolTipBackground: Theme.color(Theme.DStoolTipBackground)
+    property string themeToolTipOutline: Theme.color(Theme.DStoolTipOutline)
+    property string themeToolTipText: Theme.color(Theme.DStoolTipText)
+
+    // Slider colors
+    property string themeSliderActiveTrack: Theme.color(Theme.DSsliderActiveTrack)
+    property string themeSliderActiveTrackHover: Theme.color(Theme.DSactiveTrackHover)
+    property string themeSliderActiveTrackFocus: Theme.color(Theme.DSsliderActiveTrackFocus)
+    property string themeSliderInactiveTrack: Theme.color(Theme.DSsliderInactiveTrack)
+    property string themeSliderInactiveTrackHover: Theme.color(Theme.DSsliderInactiveTrackHover)
+    property string themeSliderInactiveTrackFocus: Theme.color(Theme.DSsliderInactiveTrackFocus)
+    property string themeSliderHandle: Theme.color(Theme.DSsliderHandle)
+    property string themeSliderHandleHover: Theme.color(Theme.DSsliderHandleHover)
+    property string themeSliderHandleFocus: Theme.color(Theme.DSsliderHandleFocus)
+    property string themeSliderHandleInteraction: Theme.color(Theme.DSsliderHandleInteraction)
+
+    property string themeScrollBarTrack: Theme.color(Theme.DSscrollBarTrack)
+    property string themeScrollBarHandle: Theme.color(Theme.DSscrollBarHandle)
+
+    property string themeSectionHeadBackground: Theme.color(Theme.DSsectionHeadBackground)
+
+    property string themeTabActiveBackground: Theme.color(Theme.DStabActiveBackground)
+    property string themeTabActiveText: Theme.color(Theme.DStabActiveText)
+    property string themeTabInactiveBackground: Theme.color(Theme.DStabInactiveBackground)
+    property string themeTabInactiveText: Theme.color(Theme.DStabInactiveText)
+
+    property string themeStateSeparator: Theme.color(Theme.DSstateSeparatorColor)
+    property string themeStateBackground: Theme.color(Theme.DSstateBackgroundColor)
+    property string themeStatePreviewOutline: Theme.color(Theme.DSstatePreviewOutline)
+
+    property string themeUnimportedModuleColor: Theme.color(Theme.DSUnimportedModuleColor)
+
+    // Taken out of Constants.js
+    property string themeChangedStateText: Theme.color(Theme.DSchangedStateText)
+}
diff --git a/share/qtcreator/qmldesigner/landingpage/imports/QdsLandingPageTheme/qmldir b/share/qtcreator/qmldesigner/landingpage/imports/QdsLandingPageTheme/qmldir
new file mode 100644
index 00000000000..bc251e981f7
--- /dev/null
+++ b/share/qtcreator/qmldesigner/landingpage/imports/QdsLandingPageTheme/qmldir
@@ -0,0 +1 @@
+singleton Values 1.0 Values.qml
diff --git a/src/plugins/qmlprojectmanager/CMakeLists.txt b/src/plugins/qmlprojectmanager/CMakeLists.txt
index 7011ab67d97..827ddf9f16e 100644
--- a/src/plugins/qmlprojectmanager/CMakeLists.txt
+++ b/src/plugins/qmlprojectmanager/CMakeLists.txt
@@ -17,6 +17,7 @@ add_qtc_plugin(QmlProjectManager
     cmakegen/boilerplate.qrc
     projectfilecontenttools.cpp projectfilecontenttools.h
     qdslandingpage.cpp qdslandingpage.h
+    qdslandingpagetheme.cpp qdslandingpagetheme.h
     qmlmainfileaspect.cpp qmlmainfileaspect.h
     qmlmultilanguageaspect.cpp qmlmultilanguageaspect.h
     qmlproject.cpp qmlproject.h
diff --git a/src/plugins/qmlprojectmanager/qdslandingpage.cpp b/src/plugins/qmlprojectmanager/qdslandingpage.cpp
index f56d60e627d..b44584ea093 100644
--- a/src/plugins/qmlprojectmanager/qdslandingpage.cpp
+++ b/src/plugins/qmlprojectmanager/qdslandingpage.cpp
@@ -24,6 +24,7 @@
 ****************************************************************************/
 
 #include "qdslandingpage.h"
+#include "qdslandingpagetheme.h"
 #include "utils/algorithm.h"
 
 #include <coreplugin/icore.h>
@@ -46,6 +47,8 @@ QdsLandingPage::QdsLandingPage(QWidget *parent)
     const QString landingPath = Core::ICore::resourcePath(LANDINGPAGEPATH).toString();
 
     qmlRegisterSingletonInstance<QdsLandingPage>("LandingPageApi", 1, 0, "LandingPageApi", this);
+    QdsLandingPageTheme::setupTheme(m_dialog->engine());
+
     m_dialog->setResizeMode(QQuickWidget::SizeRootObjectToView);
     m_dialog->engine()->addImportPath(landingPath + "/imports");
     m_dialog->engine()->addImportPath(resourcePath);
diff --git a/src/plugins/qmlprojectmanager/qdslandingpagetheme.cpp b/src/plugins/qmlprojectmanager/qdslandingpagetheme.cpp
new file mode 100644
index 00000000000..8d7d5dd2558
--- /dev/null
+++ b/src/plugins/qmlprojectmanager/qdslandingpagetheme.cpp
@@ -0,0 +1,56 @@
+/****************************************************************************
+**
+** Copyright (C) 2022 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+#include "qdslandingpagetheme.h"
+
+#include <qmlprojectplugin.h>
+
+#include <coreplugin/icore.h>
+
+#include <QQmlEngine>
+#include <QQmlComponent>
+
+namespace QmlProjectManager {
+
+QdsLandingPageTheme::QdsLandingPageTheme(Utils::Theme *originTheme, QObject *parent)
+    : Utils::Theme(originTheme, parent)
+{
+
+}
+
+void QdsLandingPageTheme::setupTheme(QQmlEngine *engine)
+{
+    Q_UNUSED(engine)
+
+    static const int typeIndex = qmlRegisterSingletonType<QdsLandingPageTheme>(
+        "LandingPageTheme", 1, 0, "Theme", [](QQmlEngine *, QJSEngine *) {
+            return new QdsLandingPageTheme(Utils::creatorTheme(), nullptr);
+        });
+    QScopedPointer<QdsLandingPageTheme> theme(new QdsLandingPageTheme(Utils::creatorTheme(), nullptr));
+
+    Q_UNUSED(typeIndex)
+}
+
+} //QmlProjectManager
diff --git a/src/plugins/qmlprojectmanager/qdslandingpagetheme.h b/src/plugins/qmlprojectmanager/qdslandingpagetheme.h
new file mode 100644
index 00000000000..0befcdf89e7
--- /dev/null
+++ b/src/plugins/qmlprojectmanager/qdslandingpagetheme.h
@@ -0,0 +1,46 @@
+/****************************************************************************
+**
+** Copyright (C) 2022 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+#pragma once
+
+#include <qqmlengine.h>
+
+#include <utils/theme/theme.h>
+
+namespace QmlProjectManager {
+
+class QdsLandingPageTheme : public Utils::Theme
+{
+    Q_OBJECT
+    QML_SINGLETON
+
+public:
+    static void setupTheme(QQmlEngine *engine);
+
+private:
+    QdsLandingPageTheme(Utils::Theme *originTheme, QObject *parent);
+};
+
+} //QmlProjectManager
diff --git a/src/plugins/qmlprojectmanager/qmlprojectmanager.qbs b/src/plugins/qmlprojectmanager/qmlprojectmanager.qbs
index 14ef1bd6e62..292017e9fe7 100644
--- a/src/plugins/qmlprojectmanager/qmlprojectmanager.qbs
+++ b/src/plugins/qmlprojectmanager/qmlprojectmanager.qbs
@@ -16,6 +16,7 @@ QtcPlugin {
         name: "General"
         files: [
             "projectfilecontenttools.cpp", "projectfilecontenttools.h",
+            "qdslandingpagetheme.cpp", "qdslandingpagetheme.h",
             "qdslandingpage.cpp", "qdslandingpage.h",
             "qmlmainfileaspect.cpp", "qmlmainfileaspect.h",
             "qmlmultilanguageaspect.cpp", "qmlmultilanguageaspect.h",