QmlDesigner: Adding theming support for Qt Quick Designer

With this patch the Qt Quick Designer supports:

*Flat
*Flat Dark
*Flat Light
*Classic

I did not test the dark style.

I added a template engine for the .css files. The syntax for the .css
files
is identical to the QML syntax.

Known issues:
* The icons in the property editor do not play well with the
  Flat Light style. We have to get proper Core:Icon support for the
  icons
  and most icons have to be simplified/flattened to fit the new style/
  theme.
* Some colors in the connection editor are still dark and hardcoded. But
  this looks ok together with all themes.
* The highlight colors are not taken from the theme, yet.

Change-Id: I94f2b75f92db8e131c2b15867dbabe9ae4b2f25a
Reviewed-by: Tim Jenssen <tim.jenssen@theqtcompany.com>

share/qtcreator/qmldesigner/common/DesignerScrollViewStyle.qml

@@ -28,9 +28,9 @@ import QtQuick.Controls 1.1
 import QtQuick.Controls.Styles 1.1
 
 ScrollViewStyle {
-    property color scrollbarColor: "#444444"
+    readonly property color scrollbarColor: creatorTheme.BackgroundColorDark
-    property color scrollbarBorderColor: "#333333"
+    readonly property color scrollbarBorderColor: creatorTheme.QmlDesignerBackgroundColorDarker
-    property color scrollBarHandleColor: "#656565"
+    readonly property color scrollBarHandleColor: creatorTheme.QmlDesignerBackgroundColorLighter
 
     padding {left: 0; top: 0; right: 0; bottom: 0}
 

share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemDelegate.qml

@@ -28,9 +28,9 @@ import QtQuick.Controls 1.1
 import QtQuick.Controls.Styles 1.0
 
 Rectangle {
-    color: styleConstants.lighterBackgroundColor
+    color: creatorTheme.QmlDesignerBackgroundColorLighter
 
-    border.color: styleConstants.backgroundColor
+    border.color: creatorTheme.BackgroundColorDark
     border.width: 1
 
 
@@ -63,7 +63,7 @@ Rectangle {
         verticalAlignment: Qt.AlignVCenter
         horizontalAlignment: Qt.AlignHCenter
         text: itemName  // to be set by model
-        color: "#FFFFFF"
+        color: creatorTheme.PanelTextColorLight
         renderType: Text.NativeRendering
     }
 

share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemsView.qml

@@ -64,8 +64,8 @@ ScrollView {
 
     Item {
         id: styleConstants
-        property color backgroundColor: "#4f4f4f"
+        readonly property color backgroundColor: creatorTheme.QmlDesignerBackgroundColorDarkAlternate
-        property color lighterBackgroundColor: "#5f5f5f"
+        readonly property color lighterBackgroundColor: creatorTheme.FancyToolBarSeparatorColor
 
         property int textWidth: 58
         property int textHeight: 22

share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/ButtonRowButton.qml

@@ -68,12 +68,8 @@ Item {
             roundRight: isLast()
 
             anchors.fill: parent
-            z: checked ? 1 : 0
+            visible: checked
-
+            color: creatorTheme.QmlDesignerBackgroundColorDarker
-            gradient: Gradient {
-                GradientStop {color: '#444' ; position: 0}
-                GradientStop {color: '#333' ; position: 1}
-            }
         }
 
         RoundedPanel {
@@ -81,7 +77,8 @@ Item {
             roundRight: isLast()
 
             anchors.fill: parent
-            z: !checked ? 1 : 0
+            visible: !checked
+            color: creatorTheme.BackgroundColorDark
         }
     }
 

share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/CheckBox.qml

@@ -31,8 +31,6 @@ Controls.CheckBox {
 
     id: checkBox
 
-    property color borderColor: "#222"
-    property color highlightColor: "orange"
     property color textColor: colorLogic.textColor
 
     opacity: enabled ? 1 : 0.5

share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/ColorLogic.qml

@@ -32,14 +32,14 @@ QtObject {
     id: innerObject
 
     property variant backendValue
-    property color textColor: Constants.colorsDefaultText
+    property color textColor: creatorTheme.PanelTextColorLight
     property variant valueFromBackend: backendValue.value;
     property bool baseStateFlag: isBaseState;
     property bool isInModel: backendValue.isInModel;
     property bool isInSubState: backendValue.isInSubState;
-    property bool highlight: textColor == Constants.colorsChangedBaseText
+    property bool highlight: textColor === __changedTextColor
 
-    property color __defaultTextColor: Constants.colorsDefaultText
+    property color __defaultTextColor: creatorTheme.PanelTextColorLight
     property color __changedTextColor: Constants.colorsChangedBaseText
 
     onBackendValueChanged: {
@@ -70,12 +70,12 @@ QtObject {
             if (innerObject.backendValue.isInModel)
                 innerObject.textColor = Constants.colorsChangedBaseText
             else
-                innerObject.textColor = Constants.colorsDefaultText
+                innerObject.textColor = creatorTheme.PanelTextColorLight
         } else {
             if (innerObject.backendValue.isInSubState)
                 innerObject.textColor = Constants.colorsChangedStateText
             else
-                innerObject.textColor = Constants.colorsDefaultText
+                innerObject.textColor = creatorTheme.PanelTextColorLight
         }
 
     }

share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/ComboBox.qml

@@ -112,7 +112,7 @@ Controls.ComboBox {
 
     ExtendedFunctionButton {
         x: 2
-        y: 4
+        y: 6
         backendValue: comboBox.backendValue
         visible: comboBox.enabled
     }

share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/CustomComboBoxStyle.qml

@@ -28,10 +28,7 @@ import QtQuick.Controls 1.1 as Controls
 import QtQuick.Controls.Styles 1.2
 
 ComboBoxStyle {
-    property color borderColor: "#222"
+    property color textColor: creatorTheme.PanelTextColorLight
-    property color highlightColor: "orange"
-    property color textColor: "#eee"
-
     __editor: Item {
 
     }
@@ -40,31 +37,20 @@ ComboBoxStyle {
         implicitWidth: 120
         implicitHeight: 25
 
-        RoundedPanel {
+        Rectangle {
             anchors.fill: parent
-            roundLeft: true
-            roundRight: true
             visible: !control.pressed
-        }
+            color: creatorTheme.FancyToolButtonSelectedColor
-
+            border.color: creatorTheme.QmlDesignerBackgroundColorDarker
-        RoundedPanel {
+            border.width: 1
-            gradient: Gradient {
-                GradientStop {color: '#444' ; position: 0}
-                GradientStop {color: '#333' ; position: 1}
-            }
-            anchors.fill: parent
-            roundLeft: true
-            roundRight: true
-            visible: control.pressed
         }
 
         Rectangle {
-            border.color: highlightColor
+            color: creatorTheme.FancyToolButtonHoverColor
             anchors.fill: parent
-            anchors.margins: -1
+            visible: control.pressed
-            color: "transparent"
+            border.color: creatorTheme.QmlDesignerBackgroundColorDarker
-            opacity: 0.3
+            border.width: 1
-            visible: control.activeFocus
         }
 
         Rectangle {
@@ -97,7 +83,7 @@ ComboBoxStyle {
             anchors.verticalCenter: parent.verticalCenter
             text: control.currentText
             renderType: Text.NativeRendering
-            color: textColor
+            color: creatorTheme.PanelTextColorLight
         }
     }
 

share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/CustomSpinBoxStyle.qml

@@ -28,10 +28,11 @@ import QtQuick.Controls 1.1 as Controls
 import QtQuick.Controls.Styles 1.1
 
 SpinBoxStyle {
-
+    selectionColor: creatorTheme.PanelTextColorLight
-    selectionColor: spinBox.textColor
+    selectedTextColor: creatorTheme.PanelTextColorMid
-    selectedTextColor: "black"
     textColor: spinBox.textColor
+
+
     padding.top: 3
     padding.bottom: 1
     padding.right: 18
@@ -62,19 +63,7 @@ SpinBoxStyle {
     background: Rectangle {
         implicitWidth: Math.max(64, styleData.contentWidth)
         implicitHeight: 23
-        border.color: borderColor
+        color: creatorTheme.FancyToolButtonSelectedColor
-        gradient: Gradient {
+        border.color: creatorTheme.QmlDesignerBackgroundColorDarker
-            GradientStop {color: "#2c2c2c" ; position: 0}
-            GradientStop {color: "#343434" ; position: 0.15}
-            GradientStop {color: "#373737" ; position: 1}
-        }
-        Rectangle {
-            border.color: highlightColor
-            anchors.fill: parent
-            anchors.margins: -1
-            color: "transparent"
-            opacity: 0.3
-            visible: control.activeFocus
-        }
     }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/Label.qml

@@ -36,7 +36,7 @@ Controls.Label {
     property alias toolTip: toolTipArea.tooltip
 
     width: Math.max(Math.min(240, parent.width - 220), 80)
-    color: "#eee"
+    color: creatorTheme.PanelTextColorLight
     elide: Text.ElideRight
 
     Layout.preferredWidth: width

share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/LineEdit.qml

@@ -52,7 +52,7 @@ Controls.TextField {
 
     ExtendedFunctionButton {
         x: 2
-        y: 4
+        y: 6
         backendValue: lineEdit.backendValue
         visible: lineEdit.enabled && showExtendedFunctionButton
     }
@@ -105,31 +105,21 @@ Controls.TextField {
     }
 
     style: TextFieldStyle {
-        selectionColor: lineEdit.textColor
+
-        selectedTextColor: "black"
+        selectionColor: creatorTheme.PanelTextColorLight
-        textColor: lineEdit.textColor
+        selectedTextColor: creatorTheme.PanelTextColorMid
+        textColor: creatorTheme.PanelTextColorLight
+        placeholderTextColor: creatorTheme.PanelTextColorMid
+
         padding.top: 3
-        padding.bottom: 1
+        padding.bottom: 3
         padding.left: 16
         padding.right: lineEdit.showTranslateCheckBox ? 16 : 1
-        placeholderTextColor: "gray"
         background: Rectangle {
             implicitWidth: 100
-            implicitHeight: 23
+            implicitHeight: 24
-            border.color: borderColor
+            color: creatorTheme.FancyToolButtonSelectedColor
-            gradient: Gradient {
+            border.color: creatorTheme.QmlDesignerBackgroundColorDarker
-                GradientStop {color: "#2c2c2c" ; position: 0}
-                GradientStop {color: "#343434" ; position: 0.15}
-                GradientStop {color: "#373737" ; position: 1.0}
-            }
-            Rectangle {
-                border.color: highlightColor
-                anchors.fill: parent
-                anchors.margins: -1
-                color: "transparent"
-                opacity: 0.3
-                visible: control.activeFocus
-            }
         }
     }
 

share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/OriginControl.qml

@@ -32,11 +32,13 @@ Item {
 
 
     property variant backendValue
-    property color highlightColor: "orange"
     property color borderColor: colorLogic.textColor
 
     property bool showTranslateCheckBox: true
 
+    readonly property color selectedColor: creatorTheme.QmlDesignerBackgroundColorDarkAlternate
+    readonly property color unselectedColor: creatorTheme.QmlDesignerBackgroundColorDarker
+
     ExtendedFunctionButton {
         backendValue: originControl.backendValue
         visible: originControl.enabled
@@ -98,7 +100,7 @@ Item {
             id: topLeft
             width: 15
             height: 15
-            color: selected ? "#4f4f4f" : "black"
+            color: selected ? selectedColor : unselectedColor
             border.color: originControl.borderColor
             border.width: selected ? 2 : 0
             MouseArea {
@@ -113,7 +115,7 @@ Item {
             property bool selected: false
             width: topLeft.width
             height: topLeft.height
-            color: selected ? "#4f4f4f" : "black"
+            color: selected ? selectedColor : unselectedColor
             border.width: selected ? 2 : 0
             border.color: originControl.borderColor
             MouseArea {
@@ -128,7 +130,7 @@ Item {
             property bool selected: false
             width: topLeft.width
             height: topLeft.height
-            color: selected ? "#4f4f4f" : "black"
+            color: selected ? selectedColor : unselectedColor
             border.width: selected ? 2 : 0
             border.color: originControl.borderColor
             MouseArea {
@@ -143,7 +145,7 @@ Item {
             property bool selected: false
             width: topLeft.width
             height: topLeft.height
-            color: selected ? "#4f4f4f" : "black"
+            color: selected ? selectedColor : unselectedColor
             border.width: selected ? 2 : 0
             border.color: originControl.borderColor
             MouseArea {
@@ -158,7 +160,7 @@ Item {
             property bool selected: false
             width: topLeft.width
             height: topLeft.height
-            color: selected ? "#4f4f4f" : "black"
+            color: selected ? selectedColor : unselectedColor
             border.width: selected ? 2 : 0
             border.color: originControl.borderColor
             MouseArea {
@@ -173,7 +175,7 @@ Item {
             property bool selected: false
             width: topLeft.width
             height: topLeft.height
-            color: selected ? "#4f4f4f" : "black"
+            color: selected ? selectedColor : unselectedColor
             border.width: selected ? 2 : 0
             border.color: originControl.borderColor
             MouseArea {
@@ -188,7 +190,7 @@ Item {
             property bool selected: false
             width: topLeft.width
             height: topLeft.height
-            color: selected ? "#4f4f4f" : "black"
+            color: selected ? selectedColor : unselectedColor
             border.width: selected ? 2 : 0
             border.color: originControl.borderColor
             MouseArea {
@@ -203,7 +205,7 @@ Item {
             property bool selected: false
             width: topLeft.width
             height: topLeft.height
-            color: selected ? "#4f4f4f" : "black"
+            color: selected ? selectedColor : unselectedColor
             border.width: selected ? 2 : 0
             border.color: originControl.borderColor
             MouseArea {
@@ -218,7 +220,7 @@ Item {
             property bool selected: false
             width: topLeft.width
             height: topLeft.height
-            color: selected ? "#4f4f4f" : "black"
+            color: selected ? selectedColor : unselectedColor
             border.width: selected ? 2 : 0
             border.color: originControl.borderColor
             MouseArea {

share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/RoundedPanel.qml

@@ -28,19 +28,23 @@ import QtQuick.Controls 1.0 as Controls
 import QtQuick.Layouts 1.0
 
 Rectangle {
+    id: panel
 
     property bool roundLeft: false
     property bool roundRight: false
 
 
+    /*
     radius: roundLeft || roundRight ? 1 : 0
     gradient: Gradient {
         GradientStop {color: '#555' ; position: 0}
         GradientStop {color: '#444' ; position: 1}
     }
+    */
 
     border.width: roundLeft || roundRight ? 1 : 0
-    border.color: "#2e2e2e"
+    color: creatorTheme.BackgroundColorDark
+    border.color: creatorTheme.QmlDesignerBackgroundColorDarker
 
     Rectangle {
         anchors.fill: parent
@@ -48,8 +52,9 @@ Rectangle {
         anchors.leftMargin: 10
         anchors.topMargin: 1
         anchors.bottomMargin: 1
+        color: panel.color
         Component.onCompleted: {
-            gradient = parent.gradient
+            //gradient = parent.gradient
         }
     }
 
@@ -59,13 +64,14 @@ Rectangle {
         anchors.rightMargin: 10
         anchors.topMargin: 1
         anchors.bottomMargin: 1
+        color: panel.color
         Component.onCompleted: {
-            gradient = parent.gradient
+            //gradient = parent.gradient
         }
     }
 
     Rectangle {
-        color: "#2e2e2e"
+        color: creatorTheme.QmlDesignerBackgroundColorDarker
         anchors.top: parent.top
         anchors.left: parent.left
         anchors.right: parent.right
@@ -75,7 +81,7 @@ Rectangle {
     }
 
     Rectangle {
-        color: "#2e2e2e"
+        color: creatorTheme.QmlDesignerBackgroundColorDarker
         anchors.bottom: parent.bottom
         anchors.left: parent.left
         anchors.right: parent.right

share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/Section.qml

@@ -48,10 +48,8 @@ Item {
         Controls.Label {
             id: label
             anchors.verticalCenter: parent.verticalCenter
-            color: "white"
+            color: creatorTheme.PanelTextColorLight
             x: 22
-            style: Text.Sunken
-            styleColor: "#292929"
             font.bold: true
         }
 
@@ -68,7 +66,7 @@ Item {
             }
         }
 
-        color: "#444"
+        color: creatorTheme.BackgroundColorDark
 
         Rectangle {
             visible: false
@@ -78,6 +76,7 @@ Item {
         }
 
         Rectangle {
+            visible: false
             color: "#333"
             anchors.bottom: parent.bottom
             width: parent.width

share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/SliderSpinBox.qml

@@ -30,9 +30,7 @@ SpinBox {
     id: spinBox
     width: 76
 
-    property color borderColor: "#222"
+     property color textColor: colorLogic.textColor
-    property color highlightColor: "orange"
-    property color textColor: "#eee"
 
     style: CustomSpinBoxStyle {
 

share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/SpinBox.qml

@@ -29,8 +29,7 @@ import QtQuick.Controls.Styles 1.1
 
 Controls.SpinBox {
     id: spinBox
-    property color borderColor: "#222"
+
-    property color highlightColor: "orange"
     property color textColor: colorLogic.textColor
     property variant backendValue;
 

share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/TabView.qml

@@ -30,13 +30,12 @@ import QtQuick.Controls.Styles 1.1
 Controls.TabView {
     id: root
 
-    property color textColor: "#eee"
     frameVisible: false
     style: TabViewStyle {
         frameOverlap: 0
         frame: Item { }
         tab: Rectangle {
-            color: styleData.selected ? "#eee" : "#414141"
+            color: styleData.selected ? creatorTheme.QmlDesignerTabLight : creatorTheme.QmlDesignerTabDark
             implicitWidth: root.width/root.count + 2
             implicitHeight: 28
             Text {
@@ -46,21 +45,15 @@ Controls.TabView {
                 anchors.verticalCenterOffset: -1
                 text: styleData.title
                 renderType: Text.NativeRendering
-                color: styleData.selected ? "#333" : "#fff"
+                color: styleData.selected ? creatorTheme.QmlDesignerTabDark : creatorTheme.QmlDesignerTabLight
             }
 
             Rectangle {
-                color: "#eee"
+                color:creatorTheme.QmlDesignerTabLight
                 width: parent.width
                 height: 4
                 anchors.bottom: parent.bottom
             }
-
-            Rectangle {
-                color: "#333"
-                width: parent.width
-                height: 1
-            }
         }
     }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AnchorRow.qml

@@ -58,6 +58,7 @@ RowLayout {
 
     property alias buttonRow: buttonRow
 
+    readonly property color __defaultTextColor: creatorTheme.PanelTextColorLight
 
     IconLabel {
         id: icon
@@ -71,7 +72,7 @@ RowLayout {
 
         Controls.Label {
             text: qsTr("Target")
-            color: "#eee"
+            color: __defaultTextColor
             elide: Text.ElideRight
             Layout.minimumWidth: Math.min(60, Layout.preferredWidth + 10)
         }
@@ -85,7 +86,7 @@ RowLayout {
 
         Controls.Label {
             text: "Margin"
-            color: "#eee"
+            color: __defaultTextColor
             elide: Text.ElideRight
             Layout.minimumWidth: Math.min(60, Layout.preferredWidth + 10)
         }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ItemPane.qml

@@ -31,7 +31,7 @@ Rectangle {
     id: itemPane
     width: 320
     height: 400
-    color: "#4f4f4f"
+    color: creatorTheme.QmlDesignerBackgroundColorDarkAlternate
 
     ScrollView {
         anchors.fill: parent

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/QtObjectPane.qml

@@ -31,7 +31,7 @@ Rectangle {
     id: itemPane
     width: 320
     height: 400
-    color: "#4f4f4f"
+    color: creatorTheme.QmlDesignerBackgroundColorDarkAlternate
 
     ScrollView {
         anchors.fill: parent

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/emptyPane.qml

@@ -30,7 +30,7 @@ Rectangle {
     id: itemPane
     width: 320
     height: 400
-    color: "#4f4f4f"
+    color: creatorTheme.QmlDesignerBackgroundColorDarkAlternate
 
     Section {
         y: -1

share/qtcreator/qmldesigner/statesEditorQmlSources/DesignerTextFieldStyle.qml

@@ -28,10 +28,10 @@ import QtQuick.Controls 1.1
 import QtQuick.Controls.Styles 1.1
 
 TextFieldStyle {
-    selectionColor: "#FFFFFF"
+    selectionColor: creatorTheme.PanelTextColorLight
-    selectedTextColor: "#000000"
+    selectedTextColor: creatorTheme.PanelTextColorDark
-    textColor: "#FFFFFF"
+    textColor: creatorTheme.PanelTextColorLight
-    placeholderTextColor: "#A0A0A0"
+    placeholderTextColor: creatorTheme.PanelTextColorMid
 
     padding.top: 4
     padding.bottom: 4
@@ -39,20 +39,7 @@ TextFieldStyle {
     background: Rectangle {
         implicitWidth: 100
         implicitHeight: font.pixelSize + padding.top + padding.bottom
-        border.color: "#222222"
+        color: creatorTheme.FancyToolButtonSelectedColor
-        gradient: Gradient {
+        border.color: creatorTheme.QmlDesignerBackgroundColorDarker
-            GradientStop {color: "#2c2c2c" ; position: 0}
-            GradientStop {color: "#343434" ; position: 0.15}
-            GradientStop {color: "#373737" ; position: 1.0}
-        }
-        Rectangle {
-            border.color: highlightColor
-            anchors.fill: parent
-            anchors.margins: -1
-            color: "#00000000" //Qt.transparent
-            radius: 4
-            opacity: 0.3
-            visible: control.activeFocus
-        }
     }
 }

share/qtcreator/qmldesigner/statesEditorQmlSources/StatesDelegate.qml

@@ -103,7 +103,7 @@ Rectangle {
 
         // as we change the background we need to change the text
         // color to see some text
-        textColor: "#FFFFFF"
+        textColor: creatorTheme.PanelTextColorLight
     }
 
     Item {

share/qtcreator/qmldesigner/statesEditorQmlSources/StatesList.qml

@@ -57,7 +57,7 @@ FocusScope {
     Rectangle {
         id: background
         anchors.fill: parent
-        color: "#4f4f4f"
+        color: creatorTheme.QmlDesignerBackgroundColorDarkAlternate
     }
 
     MouseArea {
@@ -109,7 +109,7 @@ FocusScope {
 
             style: ButtonStyle {
                 background: Rectangle {
-                    property color buttonBaseColor: "#6f6f6f"
+                    property color buttonBaseColor: Qt.darker(creatorTheme.QmlDesignerBackgroundColorDarkAlternate, 1.1)
                     color: control.hovered ? Qt.lighter(buttonBaseColor, 1.2)  : buttonBaseColor
                     border.width: 1
                     Image {

src/plugins/qmldesigner/components/componentcore/componentcore.pri

@@ -1,6 +1,7 @@
 VPATH += $$PWD
 
 SOURCES += modelnodecontextmenu.cpp
+SOURCES += theming.cpp
 SOURCES += findimplementation.cpp
 SOURCES += addsignalhandlerdialog.cpp
 SOURCES += layoutingridlayout.cpp
@@ -14,6 +15,7 @@ SOURCES += modelnodeoperations.cpp
 SOURCES += crumblebar.cpp
 
 HEADERS += modelnodecontextmenu.h
+HEADERS += theming.h
 HEADERS += findimplementation.h
 HEADERS += addsignalhandlerdialog.h
 HEADERS += layoutingridlayout.h

src/plugins/qmldesigner/components/componentcore/theming.cpp

@@ -0,0 +1,90 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 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 "theming.h"
+
+#include <utils/theme/theme.h>
+
+#include <QRegExp>
+
+namespace QmlDesigner {
+
+void Theming::insertTheme(QQmlPropertyMap *map)
+{
+    const QVariantHash creatorTheme = Utils::creatorTheme()->values();
+    for (auto it = creatorTheme.constBegin(); it != creatorTheme.constEnd(); ++it)
+        map->insert(it.key(), it.value());
+
+    /* Custom Colors */
+
+    QColor darkerBackground = Utils::creatorTheme()->color(Utils::Theme::BackgroundColorDark);
+
+    if (darkerBackground.value() < 40)
+        darkerBackground = darkerBackground.lighter(150);
+
+    map->insert("QmlDesignerBackgroundColorDarker", darkerBackground.darker(120));
+    map->insert("QmlDesignerBackgroundColorLighter", darkerBackground.lighter(140));
+
+    if (darkerBackground.value() < 100)
+        map->insert("QmlDesignerBackgroundColorDarkAlternate", darkerBackground.lighter(120));
+    else
+        map->insert("QmlDesignerBackgroundColorDarkAlternate", darkerBackground.lighter(110));
+
+    Utils::creatorTheme()->color(Utils::Theme::PanelTextColorLight);
+    QColor tabLight = Utils::creatorTheme()->color(Utils::Theme::PanelTextColorLight);
+    QColor tabDark = Utils::creatorTheme()->color(Utils::Theme::BackgroundColorDark);
+
+    /* hack for light themes */
+    /* The selected tab is always supposed to be lighter */
+    if (tabDark.value() > tabLight.value()) {
+        QColor swap = tabLight.lighter(180);
+        tabLight = tabDark.darker(110);
+        tabDark =  tabDark.darker(260);
+    }
+
+    map->insert("QmlDesignerTabLight", tabLight);
+    map->insert("QmlDesignerTabDark", tabDark);
+}
+
+QString Theming::replaceCssColors(const QString &input)
+{
+    QQmlPropertyMap map;
+    insertTheme(&map);
+    QRegExp rx("creatorTheme\\.(\\w+);");
+
+    int pos = 0;
+    QString output = input;
+
+    while ((pos = rx.indexIn(input, pos)) != -1) {
+          const QString color = rx.cap(1);
+          output.replace("creatorTheme." + rx.cap(1), map.value(color).toString());
+          pos += rx.matchedLength();
+      }
+
+    return output;
+
+}
+
+} // namespace QmlDesigner

src/plugins/qmldesigner/components/componentcore/theming.h

@@ -0,0 +1,39 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 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 <QQmlPropertyMap>
+
+namespace QmlDesigner {
+
+class Theming
+{
+public:
+    static void insertTheme(QQmlPropertyMap *map);
+    static QString replaceCssColors(const QString &input);
+};
+
+} // namespace QmlDesigner

src/plugins/qmldesigner/components/formeditor/formeditorwidget.cpp

@@ -28,6 +28,7 @@
 #include "designersettings.h"
 #include "qmldesignerconstants.h"
 #include "qmldesignericons.h"
+#include <theming.h>
 
 #include <QWheelEvent>
 #include <QVBoxLayout>
@@ -49,7 +50,7 @@ FormEditorWidget::FormEditorWidget(FormEditorView *view)
     : QWidget(),
     m_formEditorView(view)
 {
-    setStyleSheet(QString::fromUtf8(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/formeditorstylesheet.css"))));
+    setStyleSheet(Theming::replaceCssColors(QString::fromUtf8(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/formeditorstylesheet.css")))));
 
     QVBoxLayout *fillLayout = new QVBoxLayout(this);
     fillLayout->setMargin(0);
@@ -146,7 +147,7 @@ FormEditorWidget::FormEditorWidget(FormEditorView *view)
     m_graphicsView = new FormEditorGraphicsView(this);
 
     fillLayout->addWidget(m_graphicsView.data());
-    m_graphicsView.data()->setStyleSheet(QString::fromUtf8(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/scrollbar.css"))));
+    m_graphicsView.data()->setStyleSheet(Theming::replaceCssColors(QString::fromUtf8(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/scrollbar.css")))));
 }
 
 void FormEditorWidget::changeTransformTool(bool checked)

src/plugins/qmldesigner/components/itemlibrary/itemlibrarywidget.cpp

@@ -25,6 +25,8 @@
 
 #include "itemlibrarywidget.h"
 
+#include <theming.h>
+
 #include <utils/fileutils.h>
 #include <utils/qtcassert.h>
 #include <utils/stylehelper.h>
@@ -81,6 +83,8 @@ ItemLibraryWidget::ItemLibraryWidget(QWidget *parent) :
     rootContext->setContextProperty(QStringLiteral("itemLibraryIconWidth"), m_itemIconSize.width());
     rootContext->setContextProperty(QStringLiteral("itemLibraryIconHeight"), m_itemIconSize.height());
     rootContext->setContextProperty(QStringLiteral("rootView"), this);
+    Theming::insertTheme(&m_themeProperties);
+    rootContext->setContextProperty(QLatin1String("creatorTheme"), &m_themeProperties);
 
     m_itemViewQuickWidget->rootContext()->setContextProperty(QStringLiteral("highlightColor"), Utils::StyleHelper::notTooBrightHighlightColor());
 
@@ -141,8 +145,8 @@ ItemLibraryWidget::ItemLibraryWidget(QWidget *parent) :
     setSearchFilter(QString());
 
     /* style sheets */
-    setStyleSheet(QString::fromUtf8(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/stylesheet.css"))));
+    setStyleSheet(Theming::replaceCssColors(QString::fromUtf8(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/stylesheet.css")))));
-    m_resourcesView->setStyleSheet(QString::fromUtf8(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/scrollbar.css"))));
+    m_resourcesView->setStyleSheet(Theming::replaceCssColors(QString::fromUtf8(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/scrollbar.css")))));
 
     m_qmlSourceUpdateShortcut = new QShortcut(QKeySequence(Qt::CTRL + Qt::Key_F5), this);
     connect(m_qmlSourceUpdateShortcut, SIGNAL(activated()), this, SLOT(reloadQmlSource()));

src/plugins/qmldesigner/components/itemlibrary/itemlibrarywidget.h

@@ -34,6 +34,7 @@
 #include <QToolButton>
 #include <QFileIconProvider>
 #include <QQuickWidget>
+#include <QQmlPropertyMap>
 #include <QTimer>
 
 QT_BEGIN_NAMESPACE
@@ -129,6 +130,7 @@ private:
     QPointer<Model> m_model;
     FilterChangeFlag m_filterFlag;
     ItemLibraryEntry m_currentitemLibraryEntry;
+    QQmlPropertyMap m_themeProperties;
 };
 
 }

src/plugins/qmldesigner/components/navigator/navigatorwidget.cpp

@@ -27,6 +27,7 @@
 #include "navigatorview.h"
 #include "qmldesignerconstants.h"
 #include "qmldesignericons.h"
+#include <theming.h>
 
 #include <QBoxLayout>
 #include <QToolButton>
@@ -59,8 +60,8 @@ NavigatorWidget::NavigatorWidget(NavigatorView *view) :
 
     setWindowTitle(tr("Navigator", "Title of navigator view"));
 
-    setStyleSheet(QString::fromUtf8(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/stylesheet.css"))));
+    setStyleSheet(Theming::replaceCssColors(QString::fromUtf8(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/stylesheet.css")))));
-    m_treeView->setStyleSheet(QString::fromUtf8(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/scrollbar.css"))));
+    m_treeView->setStyleSheet(Theming::replaceCssColors(QString::fromUtf8(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/scrollbar.css")))));
 }
 
 void NavigatorWidget::setTreeModel(QAbstractItemModel* model)

src/plugins/qmldesigner/components/propertyeditor/propertyeditorqmlbackend.cpp

@@ -35,6 +35,8 @@
 #include <variantproperty.h>
 #include <bindingproperty.h>
 
+#include <theming.h>
+
 #include <coreplugin/icore.h>
 #include <qmljs/qmljssimplereader.h>
 #include <utils/algorithm.h>
@@ -100,6 +102,9 @@ PropertyEditorQmlBackend::PropertyEditorQmlBackend(PropertyEditorView *propertyE
     m_contextObject->setBackendValues(&m_backendValuesPropertyMap);
     m_contextObject->insertInQmlContext(context());
 
+    Theming::insertTheme(&m_themeProperties);
+    context()->setContextProperty(QLatin1String("creatorTheme"), &m_themeProperties);
+
     QObject::connect(&m_backendValuesPropertyMap, &DesignerPropertyMap::valueChanged, propertyEditor, &PropertyEditorView::changeValue);
 }
 

src/plugins/qmldesigner/components/propertyeditor/propertyeditorqmlbackend.h

@@ -34,6 +34,8 @@
 
 #include <nodemetainfo.h>
 
+#include <QQmlPropertyMap>
+
 class PropertyEditorValue;
 
 namespace QmlDesigner {
@@ -101,6 +103,7 @@ private:
     QScopedPointer<PropertyEditorTransaction> m_propertyEditorTransaction;
     QScopedPointer<PropertyEditorValue> m_dummyPropertyEditorValue;
     QScopedPointer<PropertyEditorContextObject> m_contextObject;
+    QQmlPropertyMap m_themeProperties;
 };
 
 } //QmlDesigner

src/plugins/qmldesigner/components/propertyeditor/propertyeditorview.cpp

@@ -40,6 +40,8 @@
 
 #include <nodeabstractproperty.h>
 
+#include <theming.h>
+
 #include <coreplugin/icore.h>
 #include <utils/fileutils.h>
 #include <coreplugin/messagebox.h>
@@ -80,8 +82,8 @@ PropertyEditorView::PropertyEditorView(QWidget *parent) :
     m_updateShortcut = new QShortcut(QKeySequence(Qt::CTRL + Qt::Key_F3), m_stackedWidget);
     connect(m_updateShortcut, SIGNAL(activated()), this, SLOT(reloadQml()));
 
-    m_stackedWidget->setStyleSheet(
+    m_stackedWidget->setStyleSheet(Theming::replaceCssColors(
-            QString::fromUtf8(Utils::FileReader::fetchQrc(QStringLiteral(":/qmldesigner/stylesheet.css"))));
+            QString::fromUtf8(Utils::FileReader::fetchQrc(QStringLiteral(":/qmldesigner/stylesheet.css")))));
     m_stackedWidget->setMinimumWidth(320);
     m_stackedWidget->move(0, 0);
     connect(m_stackedWidget, SIGNAL(resized()), this, SLOT(updateSize()));

src/plugins/qmldesigner/components/resources/formeditorstylesheet.css

@@ -1,23 +1,16 @@
 
-QLabel {
-    border: none;
-    border-image: none;
-    padding: 0;
-    background: none;
-    color: #E1E1E1;
-}
-
 QStackedWidget {
     border: 0px;
-    background-color: #4e4e4e;
+    background-color: creatorTheme.QmlDesignerBackgroundColorDarkAlternate;
 }
 
 QGraphicsView {
     padding: 2px;
     border: 0px;
-    background-color: #4e4e4e;
+    background-color: creatorTheme.QmlDesignerBackgroundColorDarkAlternate;
 }
 
 QGraphicsView:focus {
-    background-color: #5f5f5f;
+    background-color: creatorTheme.QmlDesignerBackgroundColorDarkAlternate;
 }
+

src/plugins/qmldesigner/components/resources/scrollbar.css

@@ -1,18 +1,18 @@
   QScrollBar:vertical {
-      background-color: #444444;
+      background-color: creatorTheme.BackgroundColorDark;
-      border: 1px solid #333333;
+      border: 1px solid creatorTheme.QmlDesignerBackgroundColorDarker;
       margin-top: 3;
       margin-bottom: 3;
       width: 10;
   }
 
   QScrollBar::handle:vertical {
-      background-color: #656565;
+      background-color: creatorTheme.QmlDesignerBackgroundColorLighter;
       margin-top: -5;
       margin-bottom: -5;
       min-height: 18px;
       width: 8px;
-      border: 1px solid #313131;
+      border: 1px solid creatorTheme.QmlDesignerBackgroundColorDarker;
       border-width: 1;
       margin-left: -1;
       margin-right: -1;
@@ -44,21 +44,21 @@
   }
 
   QScrollBar:horizontal {
-        background-color: #444444;
+        background-color: creatorTheme.BackgroundColorDark;
-        border: 1px solid #333333;
+        border: 1px solid creatorTheme.QmlDesignerBackgroundColorDarker;
         margin-left: 3;
         margin-right: 3;
         height: 10;
   }
 
   QScrollBar::handle:horizontal {
-     background-color: #656565;
+     background-color: creatorTheme.QmlDesignerBackgroundColorLighter;
 
      margin-left: -5;
      margin-right: -5;
      min-width: 18px;
      height: 8px;
-     border: 1px solid #313131;
+     border: 1px solid creatorTheme.QmlDesignerBackgroundColorDarker;
      border-width: 1;
      margin-top: -1;
      margin-bottom: -1;

src/plugins/qmldesigner/components/resources/stylesheet.css

@@ -1,6 +1,6 @@
 QFrame {
    border: 2px;
-   background-color: #4f4f4f;
+   background-color: creatorTheme.QmlDesignerBackgroundColorDarkAlternate;
 }
 
 QLabel {
@@ -8,33 +8,33 @@ QLabel {
     border-image: none;
     padding: 0;
     background: none;
-    color: #E1E1E1;
+    color: creatorTheme.PanelTextColorLight;
 }
 
 QScrollArea {
      border: 0px;
-     background-color: #4f4f4f;
+     background-color: creatorTheme.QmlDesignerBackgroundColorDarkAlternate;
 }
 
 QStackedWidget {
      border: 0px;
-     background-color: #4f4f4f;
+     background-color: creatorTheme.QmlDesignerBackgroundColorDarkAlternate;
 }
 
 
 QGraphicsView {
      border: 0px;
-     background-color: #4f4f4f;
+     background-color: creatorTheme.QmlDesignerBackgroundColorDarkAlternate;
 }
 
 QTabWidget {
      border: 0px;
-     background-color: #4f4f4f;
+     background-color: creatorTheme.QmlDesignerBackgroundColorDarkAlternate;
 }
 
 QTabWidget::pane { /* The tab widget frame */
      border: 0px;
-     background-color: #4f4f4f;
+     background-color: creatorTheme.QmlDesignerBackgroundColorDarkAlternate;
 }
 
 QLineEdit
@@ -47,23 +47,22 @@ QLineEdit
 
 QLineEdit#itemLibrarySearchInput
 {
-    color: white;
+    color: creatorTheme.PanelTextColorLight;
     font-size: 11px;
-    border: 2px solid #0F0F0F;
+    border: 1px solid creatorTheme.QmlDesignerBackgroundColorDarker;
     border-width: 1;
     max-height: 20px;
     min-height: 20px;
-    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
+    background-color: creatorTheme.FancyToolButtonSelectedColor;
-                                        stop: 0 #2c2c2c, stop: 1 #333333);
 }
 
  QTreeView {
-    color: white;
+    color: creatorTheme.PanelTextColorLight;
-    selection-color: white
+    selection-color: creatorTheme.PanelTextColorLight;
  }
 
  QTreeView::item:selected {
-     color: white;
+     color: creatorTheme.PanelTextColorLight;
  }
 
 QTreeView::branch:has-siblings:!adjoins-item {
@@ -94,12 +93,12 @@ QTreeView::branch:has-siblings:!adjoins-item {
  }
 
  QListView {
-    color: white;
+    color:creatorTheme.PanelTextColorLight;
-    selection-color: white
+    selection-color: creatorTheme.PanelTextColorLight;
  }
 
  QListView::item:selected {
-     color: white;
+     color: creatorTheme.PanelTextColorLight;
  }
 
   QComboBox QAbstractItemView {
@@ -124,19 +123,17 @@ QTabBar::tab {
     margin-right: 0px;
     font: bold;
 	font-size: 11px;
-    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
+    background-color: creatorTheme.QmlDesignerTabDark;
-    stop: 0 #3c3c3c, stop: 1 #444444);
 
-    color: #EEEEEE;
+    color: creatorTheme.QmlDesignerTabLight;
 }
 
 QTabBar::tab:selected {
     border: none; /* no border for a flat push button */
-    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
+    background-color: creatorTheme.QmlDesignerTabLight;
-    stop: 0 #EFEFEF, stop: 1 #EEEEEE);
+    color: creatorTheme.QmlDesignerTabDark;
-    color: #3c3c3c;
 }
 
 QWidget#itemLibrarySearchInputSpacer {
-    background-color: #eeeeee;
+    background-color: creatorTheme.QmlDesignerTabLight;
 }

src/plugins/qmldesigner/components/stateseditor/stateseditorwidget.cpp

@@ -29,6 +29,8 @@
 #include "stateseditorimageprovider.h"
 #include "stateseditoriconprovider.h"
 
+#include <theming.h>
+
 #include <invalidqmlsourceexception.h>
 
 #include <coreplugin/icore.h>
@@ -99,6 +101,9 @@ StatesEditorWidget::StatesEditorWidget(StatesEditorView *statesEditorView, State
 
     rootContext()->setContextProperty(QLatin1String("canAddNewStates"), true);
 
+    Theming::insertTheme(&m_themeProperties);
+    rootContext()->setContextProperty(QLatin1String("creatorTheme"), &m_themeProperties);
+
     engine()->addImageProvider(QLatin1String("icons"), new StatesEditorIconProvider());
 
     setWindowTitle(tr("States", "Title of Editor widget"));

src/plugins/qmldesigner/components/stateseditor/stateseditorwidget.h

@@ -27,6 +27,7 @@
 
 #include <QQuickWidget>
 #include <QPointer>
+#include <QQmlPropertyMap>
 
 QT_BEGIN_NAMESPACE
 class QShortcut;
@@ -66,6 +67,7 @@ private:
     QPointer<StatesEditorView> m_statesEditorView;
     Internal::StatesEditorImageProvider *m_imageProvider;
     QShortcut *m_qmlSourceUpdateShortcut;
+    QQmlPropertyMap m_themeProperties;
 };
 
 }

src/plugins/qmldesigner/designmodewidget.cpp

@@ -33,6 +33,7 @@
 #include <texteditor/textdocument.h>
 #include <nodeinstanceview.h>
 #include <itemlibrarywidget.h>
+#include <theming.h>
 
 #include <coreplugin/modemanager.h>
 #include <coreplugin/coreconstants.h>
@@ -300,7 +301,7 @@ void DesignModeWidget::setup()
             QByteArray sheet = Utils::FileReader::fetchQrc(":/qmldesigner/stylesheet.css");
             sheet += Utils::FileReader::fetchQrc(":/qmldesigner/scrollbar.css");
             sheet += "QLabel { background-color: #4f4f4f; }";
-            navigationView.widget->setStyleSheet(QString::fromUtf8(sheet));
+            navigationView.widget->setStyleSheet(Theming::replaceCssColors(QString::fromUtf8(sheet)));
         }
     }
 

src/plugins/qmldesigner/qmldesignerextension/connectioneditor/connectionviewwidget.cpp

@@ -31,6 +31,7 @@
 #include "bindingmodel.h"
 #include "connectionmodel.h"
 #include "dynamicpropertiesmodel.h"
+#include "theming.h"
 
 #include <coreplugin/coreconstants.h>
 #include <coreplugin/coreicons.h>
@@ -50,7 +51,7 @@ ConnectionViewWidget::ConnectionViewWidget(QWidget *parent) :
     setWindowTitle(tr("Connections", "Title of connection view"));
     ui->setupUi(this);
 
-    setStyleSheet(QLatin1String(Utils::FileReader::fetchQrc(QLatin1String(":/connectionview/stylesheet.css"))));
+    setStyleSheet(Theming::replaceCssColors(QLatin1String(Utils::FileReader::fetchQrc(QLatin1String(":/connectionview/stylesheet.css")))));
 
     //ui->tabWidget->tabBar()->setSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed);
 
@@ -59,14 +60,14 @@ ConnectionViewWidget::ConnectionViewWidget(QWidget *parent) :
     ui->tabBar->addTab(tr("Properties", "Title of dynamic properties view"));
     ui->tabBar->setSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed);
 
-    ui->connectionView->setStyleSheet(
+    ui->connectionView->setStyleSheet(Theming::replaceCssColors(
-            QLatin1String(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/scrollbar.css"))));
+            QLatin1String(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/scrollbar.css")))));
 
-    ui->bindingView->setStyleSheet(
+    ui->bindingView->setStyleSheet(Theming::replaceCssColors(
-            QLatin1String(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/scrollbar.css"))));
+            QLatin1String(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/scrollbar.css")))));
 
-    ui->dynamicPropertiesView->setStyleSheet(
+    ui->dynamicPropertiesView->setStyleSheet(Theming::replaceCssColors(
-                QLatin1String(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/scrollbar.css"))));
+                QLatin1String(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/scrollbar.css")))));
 
     connect(ui->tabBar, SIGNAL(currentChanged(int)),
             ui->stackedWidget, SLOT(setCurrentIndex(int)));

src/plugins/qmldesigner/qmldesignerextension/connectioneditor/stylesheet.css

@@ -1,6 +1,6 @@
 QFrame
 {
-    background-color: #4f4f4f;
+    background-color: creatorTheme.QmlDesignerBackgroundColorDarkAlternate;
     font-size: 11px;
     border-radius: 0px;
 }
@@ -79,7 +79,7 @@ QComboBox QAbstractItemView {
 }
 
 QTableView {
-    color: white;
+    color: creatorTheme.PanelTextColorLight;
 }
 
 QTableView::item
@@ -115,7 +115,7 @@ QTableView {
 }
 
 QWidget#widgetSpacer {
-    background-color: #eeeeee;
+    background-color: creatorTheme.QmlDesignerTabLight;
 }
 
 QStackedWidget {
@@ -128,9 +128,8 @@ QTabBar::tab:selected {
     border-image: none;
     image: none;
 
-    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
+    background-color: creatorTheme.QmlDesignerTabLight;
-    stop: 0 #EFEFEF, stop: 1 #EEEEEE);
+    color: creatorTheme.QmlDesignerTabDark;
-    color: #3c3c3c;
 }
 
 
@@ -143,8 +142,8 @@ QTabBar::tab {
     margin-right: 0px;
     font: bold;
     font-size: 11px;
-    background-color: #444444;
+    background-color: creatorTheme.QmlDesignerTabDark;
-    color: #EEEEEE;
+    color: creatorTheme.QmlDesignerTabLight;
 }
 
 QComboBox::menu-indicator, QComboBox::down-arrow {

src/plugins/qmldesigner/qmldesignerplugin.qbs

@@ -381,6 +381,8 @@ Project {
                 "componentcore/findimplementation.h",
                 "componentcore/layoutingridlayout.cpp",
                 "componentcore/layoutingridlayout.h",
+                "componentcore/theming.cpp",
+                "componentcore/theming.h",
                 "componentcore/modelnodecontextmenu.cpp",
                 "componentcore/modelnodecontextmenu.h",
                 "componentcore/modelnodecontextmenu_helper.cpp",