diff --git a/ui/app/AppLayouts/Profile/Sections/AdvancedContainer.qml b/ui/app/AppLayouts/Profile/Sections/AdvancedContainer.qml index 8726ea51ee..d987d10085 100644 --- a/ui/app/AppLayouts/Profile/Sections/AdvancedContainer.qml +++ b/ui/app/AppLayouts/Profile/Sections/AdvancedContainer.qml @@ -12,7 +12,7 @@ Item { Layout.fillWidth: true StyledText { - id: element7 + id: title text: qsTr("Advanced settings") anchors.left: parent.left anchors.leftMargin: 24 @@ -22,9 +22,33 @@ Item { font.pixelSize: 20 } + RowLayout { + // TODO move this to a new panel once we have the appearance panel + property bool isDarkTheme: false + id: themeSetting + anchors.top: title.bottom + anchors.topMargin: 20 + anchors.left: parent.left + anchors.leftMargin: 24 + StyledText { + text: qsTr("Theme (Light - Dark)") + } + Switch { + checked: themeSetting.isDarkTheme + onCheckedChanged: function(value) { + themeSetting.isDarkTheme = !themeSetting.isDarkTheme + if (themeSetting.isDarkTheme) { + Style.changeTheme('dark') + } else { + Style.changeTheme('light') + } + } + } + } + RowLayout { id: walletTabSettings - anchors.top: element7.bottom + anchors.top: themeSetting.bottom anchors.topMargin: 20 anchors.left: parent.left anchors.leftMargin: 24 diff --git a/ui/imports/Style.qml b/ui/imports/Style.qml index b7df093a29..4645e99131 100644 --- a/ui/imports/Style.qml +++ b/ui/imports/Style.qml @@ -5,5 +5,15 @@ import "./Themes" QtObject { property Theme current: lightTheme - property Theme lightTheme: LightTheme { } + property Theme lightTheme: LightTheme {} + property Theme darkTheme: DarkTheme {} + + property var changeTheme: function (theme) { + switch (theme) { + case "light": current = lightTheme; break; + case "dark": current = darkTheme; break; + default: current = lightTheme; console.log('Unknown theme. Valid themes are "light" and "dark"') + } + + } } diff --git a/ui/imports/Themes/DarkTheme.qml b/ui/imports/Themes/DarkTheme.qml new file mode 100644 index 0000000000..5ae5ab1e3f --- /dev/null +++ b/ui/imports/Themes/DarkTheme.qml @@ -0,0 +1,17 @@ +import QtQuick 2.13 +import "." + +Theme { + property color white: "#000000" + property color white2: "#FCFCFC" + property color black: "#000000" + property color grey: "#EEF2F5" + property color lightBlue: "#ECEFFC" + property color blue: "#4360DF" + property color transparent: "#00000000" + property color darkGrey: "#939BA1" + property color lightBlueText: "#8f9fec" + property color darkBlue: "#3c55c9" + property color darkBlueBtn: "#5a70dd" + property color red: "#FF2D55" +} diff --git a/ui/imports/Themes/qmldir b/ui/imports/Themes/qmldir index 915731a57d..8b10eb19c6 100644 --- a/ui/imports/Themes/qmldir +++ b/ui/imports/Themes/qmldir @@ -1,2 +1,4 @@ Theme 1.0 ./Theme.qml LightTheme 1.0 ./LightTheme.qml +DarkTheme 1.0 ./DarkTheme.qml + diff --git a/ui/main.qml b/ui/main.qml index ae7eee09b9..2942b968fa 100644 --- a/ui/main.qml +++ b/ui/main.qml @@ -16,6 +16,7 @@ ApplicationWindow { id: applicationWindow width: 1232 height: 770 + color: Style.current.white title: { // Set application settings Qt.application.name = qsTr("Nim Status Client") @@ -214,3 +215,9 @@ ApplicationWindow { } } } + +/*##^## +Designer { + D{i:0;formeditorZoom:0.5} +} +##^##*/ diff --git a/ui/nim-status-client.pro b/ui/nim-status-client.pro index edd85cf805..9979c39c1a 100644 --- a/ui/nim-status-client.pro +++ b/ui/nim-status-client.pro @@ -169,6 +169,7 @@ DISTFILES += \ app/img/walletActive.svg \ app/qmldir \ imports/Emoji.qml \ + imports/Themes/DarkTheme.qml \ imports/Themes/LightTheme.qml \ imports/Themes/Theme.qml \ imports/Themes/qmldir \