mifr/subsurface
1
0
Fork 0
mirror of https://github.com/subsurface/subsurface.git synced 2025-01-31 22:03:23 +00:00
Code Issues Projects Releases Packages Wiki Activity

QML UI: attempt to add dark theme

Browse source 
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>
This commit is contained in:
Dirk Hohndel 2017-06-21 15:47:29 -07:00
parent 8f2fc84ae7
commit e0f46b033d
5 changed files with 32 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
mobile-widgets/qml/DiveList.qml
View file

@ -12,7 +12,7 @@ Kirigami.ScrollablePage {
objectName: "DiveList"
title: qsTr("Dive list")
background: Rectangle {
color: Kirigami.Theme.viewBackgroundColor
color: subsurfaceTheme.backgroundColor
}
width: subsurfaceTheme.columnWidth
property int credentialStatus: manager.credentialStatus
@ -31,7 +31,7 @@ Kirigami.ScrollablePage {
checked: diveListView.currentIndex === model.index
width: parent.width
height: diveListEntry.height + Kirigami.Units.smallSpacing
backgroundColor: checked ? subsurfaceTheme.primaryColor : Kirigami.Theme.viewBackgroundColor
backgroundColor: checked ? subsurfaceTheme.primaryColor : subsurfaceTheme.backgroundColor
textColor: checked ? subsurfaceTheme.primaryTextColor : subsurfaceTheme.diveListTextColor
property real detailsOpacity : 0

2
mobile-widgets/qml/DownloadFromDiveComputer.qml
View file

@ -137,7 +137,7 @@ Kirigami.Page {
depth: model.depth
selected: model.selected
backgroundColor: selectAll ? Kirigami.Theme.highlightColor : Kirigami.Theme.viewBackgroundColor
backgroundColor: selectAll ? subsurfaceTheme.darkPrimaryColor : subsurfaceTheme.backgroundColor
onClicked : {
console.log("Selecting index" + index);

4
mobile-widgets/qml/HintsTextEdit.qml
View file

@ -66,7 +66,7 @@ TextField {
}
}
background: Rectangle {
color: Kirigami.Theme.viewBackgroundColor
color: subsurfaceTheme.backgroundColor
radius: 2
layer.enabled: true
layer.effect: DropShadow {
@ -79,7 +79,7 @@ TextField {
color: Qt.rgba(0, 0, 0, 0.5)
}
Rectangle {
color: Kirigami.Theme.viewBackgroundColor
color: subsurfaceTheme.backgroundColor
width: Kirigami.Units.gridUnit
height: width
rotation: 45

1
mobile-widgets/qml/Log.qml
View file

@ -30,6 +30,7 @@ Kirigami.ScrollablePage {
delegate : Text {
width: logWindow.width
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
color: Kirigami.Theme.textColor
text : message
}
}

26
mobile-widgets/qml/main.qml
View file

@ -266,6 +266,13 @@ Kirigami.ApplicationWindow {
}
}
Kirigami.Action {
text: qsTr("Switch to dark theme")
onTriggered: {
darkTheme()
}
}
Kirigami.Action {
text: qsTr("Theme information")
onTriggered: {
@ -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