From a017138e5846b1cf58f913377967c8a6f3ae180f Mon Sep 17 00:00:00 2001 From: Thomas Hartmann Date: Tue, 12 Jul 2016 12:37:41 +0200 Subject: [PATCH] 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 --- .../common/DesignerScrollViewStyle.qml | 6 +- .../itemLibraryQmlSources/ItemDelegate.qml | 6 +- .../itemLibraryQmlSources/ItemsView.qml | 4 +- .../HelperWidgets/ButtonRowButton.qml | 11 +-- .../HelperWidgets/CheckBox.qml | 2 - .../HelperWidgets/ColorLogic.qml | 10 +-- .../HelperWidgets/ComboBox.qml | 2 +- .../HelperWidgets/CustomComboBoxStyle.qml | 34 +++---- .../HelperWidgets/CustomSpinBoxStyle.qml | 23 ++--- .../HelperWidgets/Label.qml | 2 +- .../HelperWidgets/LineEdit.qml | 32 +++---- .../HelperWidgets/OriginControl.qml | 22 ++--- .../HelperWidgets/RoundedPanel.qml | 16 ++-- .../HelperWidgets/Section.qml | 7 +- .../HelperWidgets/SliderSpinBox.qml | 4 +- .../HelperWidgets/SpinBox.qml | 3 +- .../HelperWidgets/TabView.qml | 13 +-- .../QtQuick/AnchorRow.qml | 5 +- .../QtQuick/ItemPane.qml | 2 +- .../QtQuick/QtObjectPane.qml | 2 +- .../QtQuick/emptyPane.qml | 2 +- .../DesignerTextFieldStyle.qml | 25 ++---- .../statesEditorQmlSources/StatesDelegate.qml | 2 +- .../statesEditorQmlSources/StatesList.qml | 4 +- .../componentcore/componentcore.pri | 2 + .../components/componentcore/theming.cpp | 90 +++++++++++++++++++ .../components/componentcore/theming.h | 39 ++++++++ .../formeditor/formeditorwidget.cpp | 5 +- .../itemlibrary/itemlibrarywidget.cpp | 8 +- .../itemlibrary/itemlibrarywidget.h | 2 + .../components/navigator/navigatorwidget.cpp | 5 +- .../propertyeditorqmlbackend.cpp | 5 ++ .../propertyeditor/propertyeditorqmlbackend.h | 3 + .../propertyeditor/propertyeditorview.cpp | 6 +- .../resources/formeditorstylesheet.css | 15 +--- .../components/resources/scrollbar.css | 16 ++-- .../components/resources/stylesheet.css | 45 +++++----- .../stateseditor/stateseditorwidget.cpp | 5 ++ .../stateseditor/stateseditorwidget.h | 2 + src/plugins/qmldesigner/designmodewidget.cpp | 3 +- .../connectioneditor/connectionviewwidget.cpp | 15 ++-- .../connectioneditor/stylesheet.css | 15 ++-- src/plugins/qmldesigner/qmldesignerplugin.qbs | 2 + 43 files changed, 308 insertions(+), 214 deletions(-) create mode 100644 src/plugins/qmldesigner/components/componentcore/theming.cpp create mode 100644 src/plugins/qmldesigner/components/componentcore/theming.h diff --git a/share/qtcreator/qmldesigner/common/DesignerScrollViewStyle.qml b/share/qtcreator/qmldesigner/common/DesignerScrollViewStyle.qml index 7dca52fa81f..ba826a424ad 100644 --- a/share/qtcreator/qmldesigner/common/DesignerScrollViewStyle.qml +++ b/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" - property color scrollbarBorderColor: "#333333" - property color scrollBarHandleColor: "#656565" + readonly property color scrollbarColor: creatorTheme.BackgroundColorDark + readonly property color scrollbarBorderColor: creatorTheme.QmlDesignerBackgroundColorDarker + readonly property color scrollBarHandleColor: creatorTheme.QmlDesignerBackgroundColorLighter padding {left: 0; top: 0; right: 0; bottom: 0} diff --git a/share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemDelegate.qml b/share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemDelegate.qml index d5b0e37b6f6..e32c19de79b 100644 --- a/share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemDelegate.qml +++ b/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 } diff --git a/share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemsView.qml b/share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemsView.qml index 3edab94482b..a16016d8ba1 100644 --- a/share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemsView.qml +++ b/share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemsView.qml @@ -64,8 +64,8 @@ ScrollView { Item { id: styleConstants - property color backgroundColor: "#4f4f4f" - property color lighterBackgroundColor: "#5f5f5f" + readonly property color backgroundColor: creatorTheme.QmlDesignerBackgroundColorDarkAlternate + readonly property color lighterBackgroundColor: creatorTheme.FancyToolBarSeparatorColor property int textWidth: 58 property int textHeight: 22 diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/ButtonRowButton.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/ButtonRowButton.qml index 7cbaa5b65d8..794cdd00539 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/ButtonRowButton.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/ButtonRowButton.qml @@ -68,12 +68,8 @@ Item { roundRight: isLast() anchors.fill: parent - z: checked ? 1 : 0 - - gradient: Gradient { - GradientStop {color: '#444' ; position: 0} - GradientStop {color: '#333' ; position: 1} - } + visible: checked + color: creatorTheme.QmlDesignerBackgroundColorDarker } RoundedPanel { @@ -81,7 +77,8 @@ Item { roundRight: isLast() anchors.fill: parent - z: !checked ? 1 : 0 + visible: !checked + color: creatorTheme.BackgroundColorDark } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/CheckBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/CheckBox.qml index 6e90b3fb703..263e154bf01 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/CheckBox.qml +++ b/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 diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/ColorLogic.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/ColorLogic.qml index df4103a7ae1..551899f93d1 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/ColorLogic.qml +++ b/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 } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/ComboBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/ComboBox.qml index 849a7eb78aa..8f982032713 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/ComboBox.qml +++ b/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 } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/CustomComboBoxStyle.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/CustomComboBoxStyle.qml index 9cda5976cc2..6be6b7d4652 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/CustomComboBoxStyle.qml +++ b/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 highlightColor: "orange" - property color textColor: "#eee" - + property color textColor: creatorTheme.PanelTextColorLight __editor: Item { } @@ -40,31 +37,20 @@ ComboBoxStyle { implicitWidth: 120 implicitHeight: 25 - RoundedPanel { + Rectangle { anchors.fill: parent - roundLeft: true - roundRight: true visible: !control.pressed - } - - RoundedPanel { - gradient: Gradient { - GradientStop {color: '#444' ; position: 0} - GradientStop {color: '#333' ; position: 1} - } - anchors.fill: parent - roundLeft: true - roundRight: true - visible: control.pressed + color: creatorTheme.FancyToolButtonSelectedColor + border.color: creatorTheme.QmlDesignerBackgroundColorDarker + border.width: 1 } Rectangle { - border.color: highlightColor + color: creatorTheme.FancyToolButtonHoverColor anchors.fill: parent - anchors.margins: -1 - color: "transparent" - opacity: 0.3 - visible: control.activeFocus + visible: control.pressed + border.color: creatorTheme.QmlDesignerBackgroundColorDarker + border.width: 1 } Rectangle { @@ -97,7 +83,7 @@ ComboBoxStyle { anchors.verticalCenter: parent.verticalCenter text: control.currentText renderType: Text.NativeRendering - color: textColor + color: creatorTheme.PanelTextColorLight } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/CustomSpinBoxStyle.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/CustomSpinBoxStyle.qml index 21ea119b363..0130b4ca5aa 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/CustomSpinBoxStyle.qml +++ b/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: spinBox.textColor - selectedTextColor: "black" + selectionColor: creatorTheme.PanelTextColorLight + selectedTextColor: creatorTheme.PanelTextColorMid 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 - gradient: Gradient { - 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 - } + color: creatorTheme.FancyToolButtonSelectedColor + border.color: creatorTheme.QmlDesignerBackgroundColorDarker } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/Label.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/Label.qml index 09dd75d7b79..f58d2189aa1 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/Label.qml +++ b/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 diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/LineEdit.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/LineEdit.qml index a0dc2f79fa3..66c6ae46913 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/LineEdit.qml +++ b/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" - textColor: lineEdit.textColor + + selectionColor: creatorTheme.PanelTextColorLight + 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 - border.color: borderColor - gradient: Gradient { - 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 - } + implicitHeight: 24 + color: creatorTheme.FancyToolButtonSelectedColor + border.color: creatorTheme.QmlDesignerBackgroundColorDarker } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/OriginControl.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/OriginControl.qml index 73c4124785f..72cd9eaecfe 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/OriginControl.qml +++ b/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 { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/RoundedPanel.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/RoundedPanel.qml index cf0e20e3ede..ca9f423307b 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/RoundedPanel.qml +++ b/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 diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/Section.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/Section.qml index f9f10577f1c..4d38c857f2a 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/Section.qml +++ b/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 diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/SliderSpinBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/SliderSpinBox.qml index 9f03c5e5858..9bd286769e4 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/SliderSpinBox.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/SliderSpinBox.qml @@ -30,9 +30,7 @@ SpinBox { id: spinBox width: 76 - property color borderColor: "#222" - property color highlightColor: "orange" - property color textColor: "#eee" + property color textColor: colorLogic.textColor style: CustomSpinBoxStyle { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/SpinBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/SpinBox.qml index 6562f7de817..08ac2a01573 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/SpinBox.qml +++ b/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; diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/TabView.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/TabView.qml index e45b252f7b8..7838ffc79a1 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/TabView.qml +++ b/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 - } } } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AnchorRow.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AnchorRow.qml index f1f5c5bc668..75e815098c5 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AnchorRow.qml +++ b/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) } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ItemPane.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ItemPane.qml index a7daa3cc9f6..f6091e6426b 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ItemPane.qml +++ b/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 diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/QtObjectPane.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/QtObjectPane.qml index 33ddd30a6a6..2581ab77f8e 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/QtObjectPane.qml +++ b/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 diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/emptyPane.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/emptyPane.qml index 1d8e6fe5a51..0e74817de6f 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/emptyPane.qml +++ b/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 diff --git a/share/qtcreator/qmldesigner/statesEditorQmlSources/DesignerTextFieldStyle.qml b/share/qtcreator/qmldesigner/statesEditorQmlSources/DesignerTextFieldStyle.qml index 57235504370..008c6e6392c 100644 --- a/share/qtcreator/qmldesigner/statesEditorQmlSources/DesignerTextFieldStyle.qml +++ b/share/qtcreator/qmldesigner/statesEditorQmlSources/DesignerTextFieldStyle.qml @@ -28,10 +28,10 @@ import QtQuick.Controls 1.1 import QtQuick.Controls.Styles 1.1 TextFieldStyle { - selectionColor: "#FFFFFF" - selectedTextColor: "#000000" - textColor: "#FFFFFF" - placeholderTextColor: "#A0A0A0" + selectionColor: creatorTheme.PanelTextColorLight + selectedTextColor: creatorTheme.PanelTextColorDark + textColor: creatorTheme.PanelTextColorLight + 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" - gradient: Gradient { - 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 - } + color: creatorTheme.FancyToolButtonSelectedColor + border.color: creatorTheme.QmlDesignerBackgroundColorDarker } } diff --git a/share/qtcreator/qmldesigner/statesEditorQmlSources/StatesDelegate.qml b/share/qtcreator/qmldesigner/statesEditorQmlSources/StatesDelegate.qml index 43c7b3a7c96..6e13ae4934c 100644 --- a/share/qtcreator/qmldesigner/statesEditorQmlSources/StatesDelegate.qml +++ b/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 { diff --git a/share/qtcreator/qmldesigner/statesEditorQmlSources/StatesList.qml b/share/qtcreator/qmldesigner/statesEditorQmlSources/StatesList.qml index 78ee0aab01e..1f3fca6e108 100644 --- a/share/qtcreator/qmldesigner/statesEditorQmlSources/StatesList.qml +++ b/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 { diff --git a/src/plugins/qmldesigner/components/componentcore/componentcore.pri b/src/plugins/qmldesigner/components/componentcore/componentcore.pri index 725cb6be8a7..edd738746d7 100644 --- a/src/plugins/qmldesigner/components/componentcore/componentcore.pri +++ b/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 diff --git a/src/plugins/qmldesigner/components/componentcore/theming.cpp b/src/plugins/qmldesigner/components/componentcore/theming.cpp new file mode 100644 index 00000000000..43d320fdcc5 --- /dev/null +++ b/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 + +#include + +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 diff --git a/src/plugins/qmldesigner/components/componentcore/theming.h b/src/plugins/qmldesigner/components/componentcore/theming.h new file mode 100644 index 00000000000..fc672f50d52 --- /dev/null +++ b/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 + +namespace QmlDesigner { + +class Theming +{ +public: + static void insertTheme(QQmlPropertyMap *map); + static QString replaceCssColors(const QString &input); +}; + +} // namespace QmlDesigner diff --git a/src/plugins/qmldesigner/components/formeditor/formeditorwidget.cpp b/src/plugins/qmldesigner/components/formeditor/formeditorwidget.cpp index 2c72b6a1684..a734b7aa5ed 100644 --- a/src/plugins/qmldesigner/components/formeditor/formeditorwidget.cpp +++ b/src/plugins/qmldesigner/components/formeditor/formeditorwidget.cpp @@ -28,6 +28,7 @@ #include "designersettings.h" #include "qmldesignerconstants.h" #include "qmldesignericons.h" +#include #include #include @@ -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) diff --git a/src/plugins/qmldesigner/components/itemlibrary/itemlibrarywidget.cpp b/src/plugins/qmldesigner/components/itemlibrary/itemlibrarywidget.cpp index 2a292bf4c2b..97241de3d0b 100644 --- a/src/plugins/qmldesigner/components/itemlibrary/itemlibrarywidget.cpp +++ b/src/plugins/qmldesigner/components/itemlibrary/itemlibrarywidget.cpp @@ -25,6 +25,8 @@ #include "itemlibrarywidget.h" +#include + #include #include #include @@ -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")))); - m_resourcesView->setStyleSheet(QString::fromUtf8(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/scrollbar.css")))); + setStyleSheet(Theming::replaceCssColors(QString::fromUtf8(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/stylesheet.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())); diff --git a/src/plugins/qmldesigner/components/itemlibrary/itemlibrarywidget.h b/src/plugins/qmldesigner/components/itemlibrary/itemlibrarywidget.h index df0a1e9b909..6a39035b53e 100644 --- a/src/plugins/qmldesigner/components/itemlibrary/itemlibrarywidget.h +++ b/src/plugins/qmldesigner/components/itemlibrary/itemlibrarywidget.h @@ -34,6 +34,7 @@ #include #include #include +#include #include QT_BEGIN_NAMESPACE @@ -129,6 +130,7 @@ private: QPointer m_model; FilterChangeFlag m_filterFlag; ItemLibraryEntry m_currentitemLibraryEntry; + QQmlPropertyMap m_themeProperties; }; } diff --git a/src/plugins/qmldesigner/components/navigator/navigatorwidget.cpp b/src/plugins/qmldesigner/components/navigator/navigatorwidget.cpp index c06763b1dfa..426b53cf380 100644 --- a/src/plugins/qmldesigner/components/navigator/navigatorwidget.cpp +++ b/src/plugins/qmldesigner/components/navigator/navigatorwidget.cpp @@ -27,6 +27,7 @@ #include "navigatorview.h" #include "qmldesignerconstants.h" #include "qmldesignericons.h" +#include #include #include @@ -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")))); - m_treeView->setStyleSheet(QString::fromUtf8(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/scrollbar.css")))); + setStyleSheet(Theming::replaceCssColors(QString::fromUtf8(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/stylesheet.css"))))); + m_treeView->setStyleSheet(Theming::replaceCssColors(QString::fromUtf8(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/scrollbar.css"))))); } void NavigatorWidget::setTreeModel(QAbstractItemModel* model) diff --git a/src/plugins/qmldesigner/components/propertyeditor/propertyeditorqmlbackend.cpp b/src/plugins/qmldesigner/components/propertyeditor/propertyeditorqmlbackend.cpp index 4f245c23f83..b5e9a57616f 100644 --- a/src/plugins/qmldesigner/components/propertyeditor/propertyeditorqmlbackend.cpp +++ b/src/plugins/qmldesigner/components/propertyeditor/propertyeditorqmlbackend.cpp @@ -35,6 +35,8 @@ #include #include +#include + #include #include #include @@ -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); } diff --git a/src/plugins/qmldesigner/components/propertyeditor/propertyeditorqmlbackend.h b/src/plugins/qmldesigner/components/propertyeditor/propertyeditorqmlbackend.h index af4ceefff40..0e073b20beb 100644 --- a/src/plugins/qmldesigner/components/propertyeditor/propertyeditorqmlbackend.h +++ b/src/plugins/qmldesigner/components/propertyeditor/propertyeditorqmlbackend.h @@ -34,6 +34,8 @@ #include +#include + class PropertyEditorValue; namespace QmlDesigner { @@ -101,6 +103,7 @@ private: QScopedPointer m_propertyEditorTransaction; QScopedPointer m_dummyPropertyEditorValue; QScopedPointer m_contextObject; + QQmlPropertyMap m_themeProperties; }; } //QmlDesigner diff --git a/src/plugins/qmldesigner/components/propertyeditor/propertyeditorview.cpp b/src/plugins/qmldesigner/components/propertyeditor/propertyeditorview.cpp index e50cda86b17..ef50171effb 100644 --- a/src/plugins/qmldesigner/components/propertyeditor/propertyeditorview.cpp +++ b/src/plugins/qmldesigner/components/propertyeditor/propertyeditorview.cpp @@ -40,6 +40,8 @@ #include +#include + #include #include #include @@ -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( - QString::fromUtf8(Utils::FileReader::fetchQrc(QStringLiteral(":/qmldesigner/stylesheet.css")))); + m_stackedWidget->setStyleSheet(Theming::replaceCssColors( + 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())); diff --git a/src/plugins/qmldesigner/components/resources/formeditorstylesheet.css b/src/plugins/qmldesigner/components/resources/formeditorstylesheet.css index 60ce4288474..f11a2a42d4c 100644 --- a/src/plugins/qmldesigner/components/resources/formeditorstylesheet.css +++ b/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; } + diff --git a/src/plugins/qmldesigner/components/resources/scrollbar.css b/src/plugins/qmldesigner/components/resources/scrollbar.css index 661c987cb93..e55255fcb82 100644 --- a/src/plugins/qmldesigner/components/resources/scrollbar.css +++ b/src/plugins/qmldesigner/components/resources/scrollbar.css @@ -1,18 +1,18 @@ QScrollBar:vertical { - background-color: #444444; - border: 1px solid #333333; + background-color: creatorTheme.BackgroundColorDark; + 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; - border: 1px solid #333333; + background-color: creatorTheme.BackgroundColorDark; + 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; diff --git a/src/plugins/qmldesigner/components/resources/stylesheet.css b/src/plugins/qmldesigner/components/resources/stylesheet.css index 9e2d84eed1f..366c059005c 100644 --- a/src/plugins/qmldesigner/components/resources/stylesheet.css +++ b/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, - stop: 0 #2c2c2c, stop: 1 #333333); + background-color: creatorTheme.FancyToolButtonSelectedColor; } QTreeView { - color: white; - selection-color: white + color: creatorTheme.PanelTextColorLight; + 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; - selection-color: white + color:creatorTheme.PanelTextColorLight; + 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, - stop: 0 #3c3c3c, stop: 1 #444444); + background-color: creatorTheme.QmlDesignerTabDark; - 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, - stop: 0 #EFEFEF, stop: 1 #EEEEEE); - color: #3c3c3c; + background-color: creatorTheme.QmlDesignerTabLight; + color: creatorTheme.QmlDesignerTabDark; } QWidget#itemLibrarySearchInputSpacer { - background-color: #eeeeee; + background-color: creatorTheme.QmlDesignerTabLight; } diff --git a/src/plugins/qmldesigner/components/stateseditor/stateseditorwidget.cpp b/src/plugins/qmldesigner/components/stateseditor/stateseditorwidget.cpp index 35567e22a16..c478dcd6773 100644 --- a/src/plugins/qmldesigner/components/stateseditor/stateseditorwidget.cpp +++ b/src/plugins/qmldesigner/components/stateseditor/stateseditorwidget.cpp @@ -29,6 +29,8 @@ #include "stateseditorimageprovider.h" #include "stateseditoriconprovider.h" +#include + #include #include @@ -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")); diff --git a/src/plugins/qmldesigner/components/stateseditor/stateseditorwidget.h b/src/plugins/qmldesigner/components/stateseditor/stateseditorwidget.h index e82e48fa1f5..eb0c26ce041 100644 --- a/src/plugins/qmldesigner/components/stateseditor/stateseditorwidget.h +++ b/src/plugins/qmldesigner/components/stateseditor/stateseditorwidget.h @@ -27,6 +27,7 @@ #include #include +#include QT_BEGIN_NAMESPACE class QShortcut; @@ -66,6 +67,7 @@ private: QPointer m_statesEditorView; Internal::StatesEditorImageProvider *m_imageProvider; QShortcut *m_qmlSourceUpdateShortcut; + QQmlPropertyMap m_themeProperties; }; } diff --git a/src/plugins/qmldesigner/designmodewidget.cpp b/src/plugins/qmldesigner/designmodewidget.cpp index d1309342c4e..9562cc5756e 100644 --- a/src/plugins/qmldesigner/designmodewidget.cpp +++ b/src/plugins/qmldesigner/designmodewidget.cpp @@ -33,6 +33,7 @@ #include #include #include +#include #include #include @@ -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))); } } diff --git a/src/plugins/qmldesigner/qmldesignerextension/connectioneditor/connectionviewwidget.cpp b/src/plugins/qmldesigner/qmldesignerextension/connectioneditor/connectionviewwidget.cpp index f20f4139125..1b3f2efcde6 100644 --- a/src/plugins/qmldesigner/qmldesignerextension/connectioneditor/connectionviewwidget.cpp +++ b/src/plugins/qmldesigner/qmldesignerextension/connectioneditor/connectionviewwidget.cpp @@ -31,6 +31,7 @@ #include "bindingmodel.h" #include "connectionmodel.h" #include "dynamicpropertiesmodel.h" +#include "theming.h" #include #include @@ -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( - QLatin1String(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/scrollbar.css")))); + ui->connectionView->setStyleSheet(Theming::replaceCssColors( + QLatin1String(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/scrollbar.css"))))); - ui->bindingView->setStyleSheet( - QLatin1String(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/scrollbar.css")))); + ui->bindingView->setStyleSheet(Theming::replaceCssColors( + QLatin1String(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/scrollbar.css"))))); - ui->dynamicPropertiesView->setStyleSheet( - QLatin1String(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/scrollbar.css")))); + ui->dynamicPropertiesView->setStyleSheet(Theming::replaceCssColors( + QLatin1String(Utils::FileReader::fetchQrc(QLatin1String(":/qmldesigner/scrollbar.css"))))); connect(ui->tabBar, SIGNAL(currentChanged(int)), ui->stackedWidget, SLOT(setCurrentIndex(int))); diff --git a/src/plugins/qmldesigner/qmldesignerextension/connectioneditor/stylesheet.css b/src/plugins/qmldesigner/qmldesignerextension/connectioneditor/stylesheet.css index 8fa027ea8ea..a8fbd85ff8f 100644 --- a/src/plugins/qmldesigner/qmldesignerextension/connectioneditor/stylesheet.css +++ b/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, - stop: 0 #EFEFEF, stop: 1 #EEEEEE); - color: #3c3c3c; + background-color: creatorTheme.QmlDesignerTabLight; + color: creatorTheme.QmlDesignerTabDark; } @@ -143,8 +142,8 @@ QTabBar::tab { margin-right: 0px; font: bold; font-size: 11px; - background-color: #444444; - color: #EEEEEE; + background-color: creatorTheme.QmlDesignerTabDark; + color: creatorTheme.QmlDesignerTabLight; } QComboBox::menu-indicator, QComboBox::down-arrow { diff --git a/src/plugins/qmldesigner/qmldesignerplugin.qbs b/src/plugins/qmldesigner/qmldesignerplugin.qbs index 6fcd6b52a6c..7667960e877 100644 --- a/src/plugins/qmldesigner/qmldesignerplugin.qbs +++ b/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",