diff options
| author |  Dirk Hohndel <dirk@hohndel.org> | 2017-06-21 15:47:29 -0700 |
|---|---|---|
| committer | Dirk Hohndel <dirk@hohndel.org> | 2017-06-21 17:20:07 -0700 |
| commit | e0f46b033d5f641e8bd78e665cbc9539977fa7cb (patch) | |
| tree | e6480cb1407997286a71196d7aaa9454dacb32aa /mobile-widgets/qml/main.qml | |
| parent | 8f2fc84ae74b12d54b7a801624c27c05fa579582 (diff) | |
| download | subsurface-e0f46b033d5f641e8bd78e665cbc9539977fa7cb.tar.gz | |
QML UI: attempt to add dark theme
This isn't great, yet, but a first step to show that this is possible
(and in doing so I found quite a few spots where the colors weren't
correctly propagating, yet).
Signed-off-by: Dirk Hohndel <dirk@hohndel.org>
Diffstat (limited to 'mobile-widgets/qml/main.qml')
| -rw-r--r-- | mobile-widgets/qml/main.qml | 26 |
1 files changed, 26 insertions, 0 deletions
diff --git a/mobile-widgets/qml/main.qml b/mobile-widgets/qml/main.qml index 22cbecb57..3f4fe17d1 100644 --- a/mobile-widgets/qml/main.qml +++ b/mobile-widgets/qml/main.qml @@ -267,6 +267,13 @@ Kirigami.ApplicationWindow { } Kirigami.Action { + text: qsTr("Switch to dark theme") + onTriggered: { + darkTheme() + } + } + + Kirigami.Action { text: qsTr("Theme information") onTriggered: { stackView.push(themetest) @@ -327,6 +334,8 @@ Kirigami.ApplicationWindow { subsurfaceTheme.primaryTextColor = "#ECECEC" subsurfaceTheme.lightPrimaryColor = "#C5CAE9" subsurfaceTheme.lightPrimaryTextColor = "#212121" + subsurfaceTheme.backgroundColor = "#eff0f1" + subsurfaceTheme.diveListTextColor = subsurfaceTheme.lightPrimaryTextColor } function pinkTheme() { @@ -336,6 +345,19 @@ Kirigami.ApplicationWindow { subsurfaceTheme.primaryTextColor = "#212121" subsurfaceTheme.lightPrimaryColor = "#FFDDF4" subsurfaceTheme.lightPrimaryTextColor = "#212121" + subsurfaceTheme.backgroundColor = "#eff0f1" + subsurfaceTheme.diveListTextColor = subsurfaceTheme.lightPrimaryTextColor + } + + function darkTheme() { + subsurfaceTheme.darkPrimaryColor = "#303F9f" + subsurfaceTheme.darkPrimaryTextColor= "#ECECEC" + subsurfaceTheme.primaryColor = "#3F51B5" + subsurfaceTheme.primaryTextColor = "#ECECEC" + subsurfaceTheme.lightPrimaryColor = "#C5CAE9" + subsurfaceTheme.lightPrimaryTextColor = "#212121" + subsurfaceTheme.backgroundColor = "#000000" + subsurfaceTheme.diveListTextColor = subsurfaceTheme.primaryTextColor } QtObject { @@ -351,12 +373,16 @@ Kirigami.ApplicationWindow { property color lightPrimaryTextColor: "#212121" property color contrastAccentColor: "#FF9800" // used for delete button + property color backgroundColor: "#eff0f1" + property color diveListTextColor: lightPrimaryTextColor property int columnWidth: Math.round(rootItem.width/(Kirigami.Units.gridUnit*28)) > 0 ? Math.round(rootItem.width / Math.round(rootItem.width/(Kirigami.Units.gridUnit*28))) : rootItem.width Component.onCompleted: { Kirigami.Theme.highlightColor = Qt.binding(function() { return darkPrimaryColor }) Kirigami.Theme.highlighedTextColor = Qt.binding(function() { return darkPrimaryTextColor }) + Kirigami.Theme.backgroundColor = Qt.binding(function() { return backgroundColor }) + Kirigami.Theme.textColor = Qt.binding(function() { return diveListTextColor }) } } property Item stackView: pageStack |