wearable: add a dark theme with a runtime switch on the Settings page

Change-Id: Iaa205c19aa413de7a5537f17f74d969547d5e558
Reviewed-by: Richard Moe Gustavsen <richard.gustavsen@qt.io>

99 files changed, 291 insertions, 105 deletions

diff --git a/examples/quickcontrols2/wearable/images/background-dark.png b/examples/quickcontrols2/wearable/images/background-dark.png
new file mode 100644
index 00000000..e8eb169d
--- /dev/null
+++ b/examples/quickcontrols2/wearable/images/background-dark.png
diff --git a/examples/quickcontrols2/wearable/images/background.png b/examples/quickcontrols2/wearable/images/background-light.png
index 1c6920e6..1c6920e6 100644
--- a/examples/quickcontrols2/wearable/images/background.png
+++ b/examples/quickcontrols2/wearable/images/background-light.png
diff --git a/examples/quickcontrols2/wearable/qml/Alarms/AlarmsPage.qml b/examples/quickcontrols2/wearable/qml/Alarms/AlarmsPage.qml
index d86e182e..dba8144a 100644
--- a/examples/quickcontrols2/wearable/qml/Alarms/AlarmsPage.qml
+++ b/examples/quickcontrols2/wearable/qml/Alarms/AlarmsPage.qml
@@ -84,7 +84,7 @@ Item {
                         font.bold: stateSwitch.checked
                         font.pixelSize: stateSwitch.checked ? UIStyle.fontSizeXL : UIStyle.fontSizeL
                         font.letterSpacing: 4
-                        color: UIStyle.colorQtGray1
+                        color: UIStyle.themeColorQtGray1
                     }
 
                     Text {
@@ -95,7 +95,7 @@ Item {
                         font.italic: true
                         font.bold: true
                         font.letterSpacing: 1
-                        color: UIStyle.colorQtGray2
+                        color: UIStyle.themeColorQtGray2
                     }
                 }
             }
diff --git a/examples/quickcontrols2/wearable/qml/Fitness/FitnessPage.qml b/examples/quickcontrols2/wearable/qml/Fitness/FitnessPage.qml
index d4db0ca0..1f018e2e 100644
--- a/examples/quickcontrols2/wearable/qml/Fitness/FitnessPage.qml
+++ b/examples/quickcontrols2/wearable/qml/Fitness/FitnessPage.qml
@@ -72,18 +72,18 @@ Item {
                     text: qsTr("Steps: ") + FitnessData.getSteps()
                     font.italic: true
                     font.pixelSize: UIStyle.fontSizeM
-                    color: UIStyle.colorQtGray1
+                    color: UIStyle.themeColorQtGray1
                 }
                 Image {
                     anchors.horizontalCenter: parent.horizontalCenter
-                    source: "images/man-walking.png"
+                    source: UIStyle.themeImagePath("images/man-walking")
                 }
                 Text {
                     anchors.horizontalCenter: parent.horizontalCenter
                     text: qsTr("Calories: ") + FitnessData.getCalories()
                     font.pixelSize: UIStyle.fontSizeS
                     font.italic: true
-                    color: UIStyle.colorQtGray3
+                    color: UIStyle.themeColorQtGray3
                 }
             }
         }
@@ -102,11 +102,11 @@ Item {
                           + qsTr(" miles")
                     font.italic: true
                     font.pixelSize: UIStyle.fontSizeM
-                    color: UIStyle.colorQtGray1
+                    color: UIStyle.themeColorQtGray1
                 }
                 Image {
                     anchors.horizontalCenter: parent.horizontalCenter
-                    source: "images/man-running.png"
+                    source: UIStyle.themeImagePath("images/man-running")
                 }
                 Text {
                     anchors.horizontalCenter: parent.horizontalCenter
@@ -115,7 +115,7 @@ Item {
                           + qsTr(" mins")
                     font.pixelSize: UIStyle.fontSizeS
                     font.italic: true
-                    color: UIStyle.colorQtGray3
+                    color: UIStyle.themeColorQtGray3
                 }
             }
         }
diff --git a/examples/quickcontrols2/wearable/qml/Fitness/images/man-running-dark.png b/examples/quickcontrols2/wearable/qml/Fitness/images/man-running-dark.png
new file mode 100644
index 00000000..709c4b0f
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Fitness/images/man-running-dark.png
diff --git a/examples/quickcontrols2/wearable/qml/Fitness/images/man-running-dark@2x.png b/examples/quickcontrols2/wearable/qml/Fitness/images/man-running-dark@2x.png
new file mode 100644
index 00000000..1497ba4a
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Fitness/images/man-running-dark@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Fitness/images/man-running.png b/examples/quickcontrols2/wearable/qml/Fitness/images/man-running-light.png
index 5efab6e2..5efab6e2 100644
--- a/examples/quickcontrols2/wearable/qml/Fitness/images/man-running.png
+++ b/examples/quickcontrols2/wearable/qml/Fitness/images/man-running-light.png
diff --git a/examples/quickcontrols2/wearable/qml/Fitness/images/man-running@2x.png b/examples/quickcontrols2/wearable/qml/Fitness/images/man-running-light@2x.png
index 2073d97f..2073d97f 100644
--- a/examples/quickcontrols2/wearable/qml/Fitness/images/man-running@2x.png
+++ b/examples/quickcontrols2/wearable/qml/Fitness/images/man-running-light@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Fitness/images/man-walking-dark.png b/examples/quickcontrols2/wearable/qml/Fitness/images/man-walking-dark.png
new file mode 100644
index 00000000..6de13144
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Fitness/images/man-walking-dark.png
diff --git a/examples/quickcontrols2/wearable/qml/Fitness/images/man-walking-dark@2x.png b/examples/quickcontrols2/wearable/qml/Fitness/images/man-walking-dark@2x.png
new file mode 100644
index 00000000..e094e071
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Fitness/images/man-walking-dark@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Fitness/images/man-walking.png b/examples/quickcontrols2/wearable/qml/Fitness/images/man-walking-light.png
index 01add534..01add534 100644
--- a/examples/quickcontrols2/wearable/qml/Fitness/images/man-walking.png
+++ b/examples/quickcontrols2/wearable/qml/Fitness/images/man-walking-light.png
diff --git a/examples/quickcontrols2/wearable/qml/Fitness/images/man-walking@2x.png b/examples/quickcontrols2/wearable/qml/Fitness/images/man-walking-light@2x.png
index 037a8f03..037a8f03 100644
--- a/examples/quickcontrols2/wearable/qml/Fitness/images/man-walking@2x.png
+++ b/examples/quickcontrols2/wearable/qml/Fitness/images/man-walking-light@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/LauncherPage.qml b/examples/quickcontrols2/wearable/qml/LauncherPage.qml
index 95312bfe..53c9e5a4 100644
--- a/examples/quickcontrols2/wearable/qml/LauncherPage.qml
+++ b/examples/quickcontrols2/wearable/qml/LauncherPage.qml
@@ -118,7 +118,7 @@ PathView {
         background: Rectangle {
             radius: width / 2
             border.width: 3
-            border.color: parent.PathView.isCurrentItem ? UIStyle.colorQtPrimGreen : UIStyle.colorQtGray4
+            border.color: parent.PathView.isCurrentItem ? UIStyle.colorQtPrimGreen : UIStyle.themeColorQtGray4
         }
 
         onClicked: {
@@ -184,6 +184,6 @@ PathView {
         font.bold: true
         font.pixelSize: circularView.itemSize / 3
         font.letterSpacing: 1
-        color: UIStyle.colorQtGray1
+        color: UIStyle.themeColorQtGray1
     }
 }
diff --git a/examples/quickcontrols2/wearable/qml/Navigation/NavigationPage.qml b/examples/quickcontrols2/wearable/qml/Navigation/NavigationPage.qml
index 26169c49..973ad528 100644
--- a/examples/quickcontrols2/wearable/qml/Navigation/NavigationPage.qml
+++ b/examples/quickcontrols2/wearable/qml/Navigation/NavigationPage.qml
@@ -63,7 +63,7 @@ Item {
             width: parent.width
             height: titleRow.height
 
-            color: UIStyle.colorQtGray9
+            color: UIStyle.themeColorQtGray9
 
             Row {
                 id: titleRow
@@ -72,7 +72,7 @@ Item {
 
                 Image {
                     anchors.verticalCenter: parent.verticalCenter
-                    source: "images/navigation.png"
+                    source: UIStyle.themeImagePath("images/navigation")
                     fillMode: Image.PreserveAspectCrop
                 }
                 Text {
@@ -80,7 +80,7 @@ Item {
                     text: qsTr("Walking")
                     font.pixelSize: UIStyle.fontSizeM
                     font.letterSpacing: 2
-                    color: UIStyle.colorQtGray2
+                    color: UIStyle.themeColorQtGray2
                 }
             }
         }
@@ -94,12 +94,12 @@ Item {
 
             width: parent.width
             height: parent.height - titleRow.height - parent.spacing
-            property var imageList: ["straight.png",
-                                     "leftturn.png",
-                                     "rightturn.png",
-                                     "uturn.png",
-                                     "start.png",
-                                     "end.png"]
+            property var imageList: [UIStyle.themeImagePath("images/straight"),
+                                     UIStyle.themeImagePath("images/leftturn"),
+                                     UIStyle.themeImagePath("images/rightturn"),
+                                     "images/uturn.png",
+                                     "images/start.png",
+                                     "images/end.png"]
 
             clip: true
             focus: true
diff --git a/examples/quickcontrols2/wearable/qml/Navigation/RouteElement.qml b/examples/quickcontrols2/wearable/qml/Navigation/RouteElement.qml
index bda5ea0f..937b84a8 100644
--- a/examples/quickcontrols2/wearable/qml/Navigation/RouteElement.qml
+++ b/examples/quickcontrols2/wearable/qml/Navigation/RouteElement.qml
@@ -52,7 +52,7 @@ import QtQuick 2.10
 import "../Style"
 
 Rectangle {
-    color: UIStyle.colorQtGray8
+    color: UIStyle.themeColorQtGray8
 
     Row {
         spacing: 5
@@ -62,7 +62,7 @@ Rectangle {
         Image {
             id: img
             anchors.verticalCenter: parent.verticalCenter
-            source: "images/" + navImage
+            source: navImage
             fillMode: Image.PreserveAspectFit
         }
 
@@ -78,7 +78,7 @@ Rectangle {
                 font.pixelSize: UIStyle.fontSizeS
                 verticalAlignment: Text.AlignVCenter
                 padding: 1
-                color: UIStyle.colorQtGray1
+                color: UIStyle.themeColorQtGray1
             }
 
             Text {
@@ -88,7 +88,7 @@ Rectangle {
                 font.pixelSize: UIStyle.fontSizeXS
                 verticalAlignment: Text.AlignVCenter
                 padding: 1
-                color: UIStyle.colorQtGray2
+                color: UIStyle.themeColorQtGray2
             }
         }
     }
diff --git a/examples/quickcontrols2/wearable/qml/Navigation/images/leftturn-dark.png b/examples/quickcontrols2/wearable/qml/Navigation/images/leftturn-dark.png
new file mode 100644
index 00000000..b318b954
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Navigation/images/leftturn-dark.png
diff --git a/examples/quickcontrols2/wearable/qml/Navigation/images/leftturn-dark@2x.png b/examples/quickcontrols2/wearable/qml/Navigation/images/leftturn-dark@2x.png
new file mode 100644
index 00000000..ec782ebd
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Navigation/images/leftturn-dark@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Navigation/images/leftturn.png b/examples/quickcontrols2/wearable/qml/Navigation/images/leftturn-light.png
index 3c416304..3c416304 100644
--- a/examples/quickcontrols2/wearable/qml/Navigation/images/leftturn.png
+++ b/examples/quickcontrols2/wearable/qml/Navigation/images/leftturn-light.png
diff --git a/examples/quickcontrols2/wearable/qml/Navigation/images/leftturn@2x.png b/examples/quickcontrols2/wearable/qml/Navigation/images/leftturn-light@2x.png
index 39e9be84..39e9be84 100644
--- a/examples/quickcontrols2/wearable/qml/Navigation/images/leftturn@2x.png
+++ b/examples/quickcontrols2/wearable/qml/Navigation/images/leftturn-light@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Navigation/images/navigation-dark.png b/examples/quickcontrols2/wearable/qml/Navigation/images/navigation-dark.png
new file mode 100644
index 00000000..7dce6aa5
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Navigation/images/navigation-dark.png
diff --git a/examples/quickcontrols2/wearable/qml/Navigation/images/navigation-dark@2x.png b/examples/quickcontrols2/wearable/qml/Navigation/images/navigation-dark@2x.png
new file mode 100644
index 00000000..5061e52b
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Navigation/images/navigation-dark@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Navigation/images/navigation.png b/examples/quickcontrols2/wearable/qml/Navigation/images/navigation-light.png
index 9b8cb8e6..9b8cb8e6 100644
--- a/examples/quickcontrols2/wearable/qml/Navigation/images/navigation.png
+++ b/examples/quickcontrols2/wearable/qml/Navigation/images/navigation-light.png
diff --git a/examples/quickcontrols2/wearable/qml/Navigation/images/navigation@2x.png b/examples/quickcontrols2/wearable/qml/Navigation/images/navigation-light@2x.png
index 8d133abc..8d133abc 100644
--- a/examples/quickcontrols2/wearable/qml/Navigation/images/navigation@2x.png
+++ b/examples/quickcontrols2/wearable/qml/Navigation/images/navigation-light@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Navigation/images/rightturn-dark.png b/examples/quickcontrols2/wearable/qml/Navigation/images/rightturn-dark.png
new file mode 100644
index 00000000..634ab593
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Navigation/images/rightturn-dark.png
diff --git a/examples/quickcontrols2/wearable/qml/Navigation/images/rightturn-dark@2x.png b/examples/quickcontrols2/wearable/qml/Navigation/images/rightturn-dark@2x.png
new file mode 100644
index 00000000..9a388440
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Navigation/images/rightturn-dark@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Navigation/images/rightturn.png b/examples/quickcontrols2/wearable/qml/Navigation/images/rightturn-light.png
index a29ec694..a29ec694 100644
--- a/examples/quickcontrols2/wearable/qml/Navigation/images/rightturn.png
+++ b/examples/quickcontrols2/wearable/qml/Navigation/images/rightturn-light.png
diff --git a/examples/quickcontrols2/wearable/qml/Navigation/images/rightturn@2x.png b/examples/quickcontrols2/wearable/qml/Navigation/images/rightturn-light@2x.png
index 258c4144..258c4144 100644
--- a/examples/quickcontrols2/wearable/qml/Navigation/images/rightturn@2x.png
+++ b/examples/quickcontrols2/wearable/qml/Navigation/images/rightturn-light@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Navigation/images/straight-dark.png b/examples/quickcontrols2/wearable/qml/Navigation/images/straight-dark.png
new file mode 100644
index 00000000..014ed7c8
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Navigation/images/straight-dark.png
diff --git a/examples/quickcontrols2/wearable/qml/Navigation/images/straight-dark@2x.png b/examples/quickcontrols2/wearable/qml/Navigation/images/straight-dark@2x.png
new file mode 100644
index 00000000..be51d2ac
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Navigation/images/straight-dark@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Navigation/images/straight.png b/examples/quickcontrols2/wearable/qml/Navigation/images/straight-light.png
index e3c5bb5c..e3c5bb5c 100644
--- a/examples/quickcontrols2/wearable/qml/Navigation/images/straight.png
+++ b/examples/quickcontrols2/wearable/qml/Navigation/images/straight-light.png
diff --git a/examples/quickcontrols2/wearable/qml/Navigation/images/straight@2x.png b/examples/quickcontrols2/wearable/qml/Navigation/images/straight-light@2x.png
index ef71ab1b..ef71ab1b 100644
--- a/examples/quickcontrols2/wearable/qml/Navigation/images/straight@2x.png
+++ b/examples/quickcontrols2/wearable/qml/Navigation/images/straight-light@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Notifications/NotificationsPage.qml b/examples/quickcontrols2/wearable/qml/Notifications/NotificationsPage.qml
index dabbf735..eeddf6dc 100644
--- a/examples/quickcontrols2/wearable/qml/Notifications/NotificationsPage.qml
+++ b/examples/quickcontrols2/wearable/qml/Notifications/NotificationsPage.qml
@@ -70,7 +70,7 @@ ListView {
         width: parent.width / 2
         anchors.right: parent.horizontalCenter
         anchors.verticalCenter: parent.verticalCenter
-        source: "images/missedcall.png"
+        source: UIStyle.themeImagePath("images/missedcall")
         fillMode: Image.Pad
     }
 
@@ -85,7 +85,7 @@ ListView {
 
             Image {
                 anchors.horizontalCenter: parent.horizontalCenter
-                source: qsTr("images/avatar%1.png").arg(model.gender)
+                source: qsTr("images/avatar%1-%2.png").arg(model.gender).arg(UIStyle.darkTheme ? "dark" : "light")
             }
 
             Text {
@@ -93,7 +93,7 @@ ListView {
                 anchors.horizontalCenter: parent.horizontalCenter
                 font.bold: true
                 font.pixelSize: UIStyle.fontSizeS
-                color: UIStyle.colorQtGray1
+                color: UIStyle.themeColorQtGray1
             }
 
             Text {
@@ -101,7 +101,7 @@ ListView {
                 text: date + " " + time
                 font.pixelSize: UIStyle.fontSizeXS
                 font.italic: true
-                color: UIStyle.colorQtGray2
+                color: UIStyle.themeColorQtGray2
             }
         }
     }
diff --git a/examples/quickcontrols2/wearable/qml/Notifications/images/avatarf-dark.png b/examples/quickcontrols2/wearable/qml/Notifications/images/avatarf-dark.png
new file mode 100644
index 00000000..2a553aed
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Notifications/images/avatarf-dark.png
diff --git a/examples/quickcontrols2/wearable/qml/Notifications/images/avatarf-dark@2x.png b/examples/quickcontrols2/wearable/qml/Notifications/images/avatarf-dark@2x.png
new file mode 100644
index 00000000..a91031f3
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Notifications/images/avatarf-dark@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Notifications/images/avatarf.png b/examples/quickcontrols2/wearable/qml/Notifications/images/avatarf-light.png
index c88edc60..c88edc60 100644
--- a/examples/quickcontrols2/wearable/qml/Notifications/images/avatarf.png
+++ b/examples/quickcontrols2/wearable/qml/Notifications/images/avatarf-light.png
diff --git a/examples/quickcontrols2/wearable/qml/Notifications/images/avatarf@2x.png b/examples/quickcontrols2/wearable/qml/Notifications/images/avatarf-light@2x.png
index 2c916b2c..2c916b2c 100644
--- a/examples/quickcontrols2/wearable/qml/Notifications/images/avatarf@2x.png
+++ b/examples/quickcontrols2/wearable/qml/Notifications/images/avatarf-light@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Notifications/images/avatarm-dark.png b/examples/quickcontrols2/wearable/qml/Notifications/images/avatarm-dark.png
new file mode 100644
index 00000000..5810312c
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Notifications/images/avatarm-dark.png
diff --git a/examples/quickcontrols2/wearable/qml/Notifications/images/avatarm-dark@2x.png b/examples/quickcontrols2/wearable/qml/Notifications/images/avatarm-dark@2x.png
new file mode 100644
index 00000000..64ddd8ea
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Notifications/images/avatarm-dark@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Notifications/images/avatarm.png b/examples/quickcontrols2/wearable/qml/Notifications/images/avatarm-light.png
index f7abb4c9..f7abb4c9 100644
--- a/examples/quickcontrols2/wearable/qml/Notifications/images/avatarm.png
+++ b/examples/quickcontrols2/wearable/qml/Notifications/images/avatarm-light.png
diff --git a/examples/quickcontrols2/wearable/qml/Notifications/images/avatarm@2x.png b/examples/quickcontrols2/wearable/qml/Notifications/images/avatarm-light@2x.png
index d30eb2d2..d30eb2d2 100644
--- a/examples/quickcontrols2/wearable/qml/Notifications/images/avatarm@2x.png
+++ b/examples/quickcontrols2/wearable/qml/Notifications/images/avatarm-light@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Notifications/images/missedcall-dark.png b/examples/quickcontrols2/wearable/qml/Notifications/images/missedcall-dark.png
new file mode 100644
index 00000000..4080e3e4
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Notifications/images/missedcall-dark.png
diff --git a/examples/quickcontrols2/wearable/qml/Notifications/images/missedcall-dark@2x.png b/examples/quickcontrols2/wearable/qml/Notifications/images/missedcall-dark@2x.png
new file mode 100644
index 00000000..6002e456
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Notifications/images/missedcall-dark@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Notifications/images/missedcall.png b/examples/quickcontrols2/wearable/qml/Notifications/images/missedcall-light.png
index d05f17b3..d05f17b3 100644
--- a/examples/quickcontrols2/wearable/qml/Notifications/images/missedcall.png
+++ b/examples/quickcontrols2/wearable/qml/Notifications/images/missedcall-light.png
diff --git a/examples/quickcontrols2/wearable/qml/Notifications/images/missedcall@2x.png b/examples/quickcontrols2/wearable/qml/Notifications/images/missedcall-light@2x.png
index d28e62c5..d28e62c5 100644
--- a/examples/quickcontrols2/wearable/qml/Notifications/images/missedcall@2x.png
+++ b/examples/quickcontrols2/wearable/qml/Notifications/images/missedcall-light@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Settings/SettingsPage.qml b/examples/quickcontrols2/wearable/qml/Settings/SettingsPage.qml
index 243020a7..af6561f3 100644
--- a/examples/quickcontrols2/wearable/qml/Settings/SettingsPage.qml
+++ b/examples/quickcontrols2/wearable/qml/Settings/SettingsPage.qml
@@ -50,20 +50,11 @@
 
 import QtQuick 2.10
 import QtQuick.Controls 2.3 as QQC2
-import Qt.labs.settings 1.0
 import ".."
 import "../Style"
 
 Item {
 
-    Settings {
-        id: settings
-        property alias wireless: wirelessSwitch.checked
-        property alias bluetooth: bluetoothSwitch.checked
-        property alias contrast: contrastSlider.value
-        property alias brightness: brightnessSlider.value
-    }
-
     QQC2.SwipeView {
         id: svSettingsContainer
 
@@ -80,24 +71,26 @@ Item {
                     spacing: 50
                     Image {
                         anchors.verticalCenter: parent.verticalCenter
-                        source: "images/bluetooth.png"
+                        source: UIStyle.themeImagePath("images/bluetooth")
                     }
                     QQC2.Switch {
                         id: bluetoothSwitch
                         anchors.verticalCenter: parent.verticalCenter
                         checked: settings.bluetooth
+                        onToggled: settings.bluetooth = checked
                     }
                 }
                 Row {
                     spacing: 50
                     Image {
                         anchors.verticalCenter: parent.verticalCenter
-                        source: "images/wifi.png"
+                        source: UIStyle.themeImagePath("images/wifi")
                     }
                     QQC2.Switch {
                         id: wirelessSwitch
                         anchors.verticalCenter: parent.verticalCenter
                         checked: settings.wireless
+                        onToggled: settings.wireless = checked
                     }
                 }
             }
@@ -113,7 +106,7 @@ Item {
                 Column {
                     Image {
                         anchors.horizontalCenter: parent.horizontalCenter
-                        source: "images/brightness.png"
+                        source: UIStyle.themeImagePath("images/brightness")
                     }
                     QQC2.Slider {
                         id: brightnessSlider
@@ -122,13 +115,14 @@ Item {
                         to: 5
                         stepSize: 1
                         value: settings.brightness
+                        onMoved: settings.brightness = value
                     }
                 }
                 Column {
                     spacing: 2
                     Image {
                         anchors.horizontalCenter: parent.horizontalCenter
-                        source: "images/contrast.png"
+                        source: UIStyle.themeImagePath("images/contrast")
                     }
                     QQC2.Slider {
                         id: contrastSlider
@@ -137,6 +131,30 @@ Item {
                         to: 10
                         stepSize: 1
                         value: settings.contrast
+                        onMoved: settings.contrast = value
+                    }
+                }
+            }
+        }
+
+        SwipeViewPage {
+            id: settingsPage3
+
+            Column {
+                anchors.centerIn: parent
+                spacing: 2
+
+                Row {
+                    spacing: 50
+                    Image {
+                        anchors.verticalCenter: parent.verticalCenter
+                        source: UIStyle.themeImagePath("images/theme")
+                    }
+                    QQC2.Switch {
+                        id: darkThemeSwitch
+                        anchors.verticalCenter: parent.verticalCenter
+                        checked: settings.darkTheme
+                        onToggled: settings.darkTheme = checked
                     }
                 }
             }
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/bluetooth-dark.png b/examples/quickcontrols2/wearable/qml/Settings/images/bluetooth-dark.png
new file mode 100644
index 00000000..32040b18
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Settings/images/bluetooth-dark.png
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/bluetooth-dark@2x.png b/examples/quickcontrols2/wearable/qml/Settings/images/bluetooth-dark@2x.png
new file mode 100644
index 00000000..d29c6d3a
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Settings/images/bluetooth-dark@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/bluetooth.png b/examples/quickcontrols2/wearable/qml/Settings/images/bluetooth-light.png
index 2b2d0e7e..2b2d0e7e 100644
--- a/examples/quickcontrols2/wearable/qml/Settings/images/bluetooth.png
+++ b/examples/quickcontrols2/wearable/qml/Settings/images/bluetooth-light.png
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/bluetooth@2x.png b/examples/quickcontrols2/wearable/qml/Settings/images/bluetooth-light@2x.png
index 276d7337..276d7337 100644
--- a/examples/quickcontrols2/wearable/qml/Settings/images/bluetooth@2x.png
+++ b/examples/quickcontrols2/wearable/qml/Settings/images/bluetooth-light@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/brightness-dark.png b/examples/quickcontrols2/wearable/qml/Settings/images/brightness-dark.png
new file mode 100644
index 00000000..1904a6a4
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Settings/images/brightness-dark.png
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/brightness-dark@2x.png b/examples/quickcontrols2/wearable/qml/Settings/images/brightness-dark@2x.png
new file mode 100644
index 00000000..7cd287e9
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Settings/images/brightness-dark@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/brightness.png b/examples/quickcontrols2/wearable/qml/Settings/images/brightness-light.png
index 846a896c..846a896c 100644
--- a/examples/quickcontrols2/wearable/qml/Settings/images/brightness.png
+++ b/examples/quickcontrols2/wearable/qml/Settings/images/brightness-light.png
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/brightness@2x.png b/examples/quickcontrols2/wearable/qml/Settings/images/brightness-light@2x.png
index 94753ea6..94753ea6 100644
--- a/examples/quickcontrols2/wearable/qml/Settings/images/brightness@2x.png
+++ b/examples/quickcontrols2/wearable/qml/Settings/images/brightness-light@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/contrast-dark.png b/examples/quickcontrols2/wearable/qml/Settings/images/contrast-dark.png
new file mode 100644
index 00000000..92e17192
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Settings/images/contrast-dark.png
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/contrast-dark@2x.png b/examples/quickcontrols2/wearable/qml/Settings/images/contrast-dark@2x.png
new file mode 100644
index 00000000..d52633ab
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Settings/images/contrast-dark@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/contrast.png b/examples/quickcontrols2/wearable/qml/Settings/images/contrast-light.png
index eb528eb8..eb528eb8 100644
--- a/examples/quickcontrols2/wearable/qml/Settings/images/contrast.png
+++ b/examples/quickcontrols2/wearable/qml/Settings/images/contrast-light.png
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/contrast@2x.png b/examples/quickcontrols2/wearable/qml/Settings/images/contrast-light@2x.png
index 92e112f9..92e112f9 100644
--- a/examples/quickcontrols2/wearable/qml/Settings/images/contrast@2x.png
+++ b/examples/quickcontrols2/wearable/qml/Settings/images/contrast-light@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/theme-dark.png b/examples/quickcontrols2/wearable/qml/Settings/images/theme-dark.png
new file mode 100644
index 00000000..346ffec3
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Settings/images/theme-dark.png
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/theme-dark@2x.png b/examples/quickcontrols2/wearable/qml/Settings/images/theme-dark@2x.png
new file mode 100644
index 00000000..4207d739
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Settings/images/theme-dark@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/theme-light.png b/examples/quickcontrols2/wearable/qml/Settings/images/theme-light.png
new file mode 100644
index 00000000..2f02744c
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Settings/images/theme-light.png
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/theme-light@2x.png b/examples/quickcontrols2/wearable/qml/Settings/images/theme-light@2x.png
new file mode 100644
index 00000000..07c4b774
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Settings/images/theme-light@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/theme.svg b/examples/quickcontrols2/wearable/qml/Settings/images/theme.svg
new file mode 100644
index 00000000..bf3f1e57
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Settings/images/theme.svg
@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="64"
+   height="64"
+   viewBox="0 0 16.933333 16.933333"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="theme.svg"
+   inkscape:export-filename="C:\dev\qt5.11\qtquickcontrols2\examples\quickcontrols2\wearable\qml\Settings\images\theme@2x.png"
+   inkscape:export-xdpi="192"
+   inkscape:export-ydpi="192">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="7.9195959"
+     inkscape:cx="-11.371874"
+     inkscape:cy="28.405259"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     units="px"
+     fit-margin-top="1"
+     fit-margin-left="1"
+     fit-margin-right="1"
+     fit-margin-bottom="1"
+     inkscape:window-width="3840"
+     inkscape:window-height="2066"
+     inkscape:window-x="-11"
+     inkscape:window-y="-11"
+     inkscape:window-maximized="1"
+     inkscape:snap-global="false">
+    <inkscape:grid
+       type="xygrid"
+       id="grid3713"
+       originx="-0.0070880335"
+       originy="-280.58354" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-0.00708803,0.51688025)">
+    <path
+       style="fill:#141f3a;fill-opacity:1;stroke:none;stroke-width:0.25668776px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 2.7296861,14.56437 H 12.831038 C 13.464556,14.411157 15.01089,14.101758 15.231756,11.825604 15.232242,10.48538 13.96701,8.4813248 11.69084,9.0467292 10.687852,7.3630573 9.1232541,7.2558172 8.2817051,7.654427 6.9050791,4.9744381 2.9222535,5.8560797 2.9703307,8.9435956 1.7108806,9.1004362 0.37826375,9.7182846 0.27167137,11.745388 0.31660717,13.546059 1.5831259,14.350467 2.7296861,14.56437 Z"
+       id="path4535"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccccccc" />
+    <path
+       style="fill:#141f3a;fill-opacity:1;stroke:none;stroke-width:0.25668776px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 11.392726,0.92763044 C 8.8246143,2.2754379 7.9809615,4.3443829 8.9780532,7.1830936 10.167295,7.1426991 11.108291,7.6664967 11.822182,8.7064442 12.799984,8.6194307 13.765772,8.6795708 14.658208,9.6382815 15.605885,9.3257847 16.200803,8.852941 16.675838,8.325607 13.735088,9.4033595 8.6151974,5.957728 11.392726,0.92763044 Z"
+       id="path4537"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccccc" />
+  </g>
+</svg>
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/wifi-dark.png b/examples/quickcontrols2/wearable/qml/Settings/images/wifi-dark.png
new file mode 100644
index 00000000..72b84245
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Settings/images/wifi-dark.png
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/wifi-dark@2x.png b/examples/quickcontrols2/wearable/qml/Settings/images/wifi-dark@2x.png
new file mode 100644
index 00000000..bc49e4f4
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Settings/images/wifi-dark@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/wifi.png b/examples/quickcontrols2/wearable/qml/Settings/images/wifi-light.png
index 42c92516..42c92516 100644
--- a/examples/quickcontrols2/wearable/qml/Settings/images/wifi.png
+++ b/examples/quickcontrols2/wearable/qml/Settings/images/wifi-light.png
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/wifi@2x.png b/examples/quickcontrols2/wearable/qml/Settings/images/wifi-light@2x.png
index 8aa4c9a8..8aa4c9a8 100644
--- a/examples/quickcontrols2/wearable/qml/Settings/images/wifi@2x.png
+++ b/examples/quickcontrols2/wearable/qml/Settings/images/wifi-light@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Style/PageIndicator.qml b/examples/quickcontrols2/wearable/qml/Style/PageIndicator.qml
index 34bd27fc..81d4c9ef 100644
--- a/examples/quickcontrols2/wearable/qml/Style/PageIndicator.qml
+++ b/examples/quickcontrols2/wearable/qml/Style/PageIndicator.qml
@@ -67,7 +67,7 @@ T.PageIndicator {
         implicitHeight: 8
 
         radius: width / 2
-        color: UIStyle.colorQtGray3
+        color: UIStyle.themeColorQtGray3
 
         opacity: index === control.currentIndex ? 1.0 : 0.35
 
diff --git a/examples/quickcontrols2/wearable/qml/Style/Slider.qml b/examples/quickcontrols2/wearable/qml/Style/Slider.qml
index 0f19fbca..cdff4aec 100644
--- a/examples/quickcontrols2/wearable/qml/Style/Slider.qml
+++ b/examples/quickcontrols2/wearable/qml/Style/Slider.qml
@@ -66,14 +66,14 @@ T.Slider {
 
         radius: 5
         color: control.pressed ? "#f0f0f0" : "#f6f6f6"
-        border.color: UIStyle.colorQtGray7
+        border.color: UIStyle.themeColorQtGray7
     }
 
     background: Rectangle {
         y: (control.height - height) / 2
         height: 4
         radius: 2
-        color: UIStyle.colorQtGray3
+        color: UIStyle.themeColorQtGray3
 
         Rectangle {
             width: control.visualPosition * parent.width
diff --git a/examples/quickcontrols2/wearable/qml/Style/Switch.qml b/examples/quickcontrols2/wearable/qml/Style/Switch.qml
index 54295aff..6f663920 100644
--- a/examples/quickcontrols2/wearable/qml/Style/Switch.qml
+++ b/examples/quickcontrols2/wearable/qml/Style/Switch.qml
@@ -65,7 +65,7 @@ T.Switch {
         height: 26
 
         radius: 13
-        color: control.down ? UIStyle.colorQtGray6 : UIStyle.colorQtGray10
+        color: control.down ? UIStyle.themeColorQtGray6 : UIStyle.themeColorQtGray10
         border.color: !control.checked ? "#999999"
                                        : (control.down ? UIStyle.colorQtAuxGreen2
                                                        : UIStyle.colorQtAuxGreen1)
@@ -80,7 +80,7 @@ T.Switch {
         radius: 13
         color: control.checked ? UIStyle.colorQtAuxGreen2 : "#E6173D"
         border.color: control.checked ? UIStyle.colorQtAuxGreen2
-                                      : UIStyle.colorQtGray6
+                                      : UIStyle.themeColorQtGray6
     }
 }
 
diff --git a/examples/quickcontrols2/wearable/qml/Style/UIStyle.qml b/examples/quickcontrols2/wearable/qml/Style/UIStyle.qml
index 3b130497..98f2e5a2 100644
--- a/examples/quickcontrols2/wearable/qml/Style/UIStyle.qml
+++ b/examples/quickcontrols2/wearable/qml/Style/UIStyle.qml
@@ -81,4 +81,24 @@ QtObject {
     readonly property color colorQtGray8: "#b5b7bf"
     readonly property color colorQtGray9: "#cecfd5"
     readonly property color colorQtGray10: "#f3f3f4"
+
+    // Light/dark versions of the colors above.
+    // Some UI elements always use a specific color regardless of theme,
+    // which is why we have both sets: so that those elements don't need to hard-code the hex string.
+    readonly property color themeColorQtGray1: darkTheme ? colorQtGray10 : colorQtGray1
+    readonly property color themeColorQtGray2: darkTheme ? colorQtGray9 : colorQtGray2
+    readonly property color themeColorQtGray3: darkTheme ? colorQtGray8 : colorQtGray3
+    readonly property color themeColorQtGray4: darkTheme ? colorQtGray7 : colorQtGray4
+    readonly property color themeColorQtGray5: darkTheme ? colorQtGray6 : colorQtGray5
+    readonly property color themeColorQtGray6: darkTheme ? colorQtGray5 : colorQtGray6
+    readonly property color themeColorQtGray7: darkTheme ? colorQtGray4 : colorQtGray7
+    readonly property color themeColorQtGray8: darkTheme ? colorQtGray3 : colorQtGray8
+    readonly property color themeColorQtGray9: darkTheme ? colorQtGray2 : colorQtGray9
+    readonly property color themeColorQtGray10: darkTheme ? colorQtGray1 : colorQtGray10
+
+    property bool darkTheme: false
+
+    function themeImagePath(baseImagePath) {
+        return baseImagePath + (darkTheme ? "-dark" : "-light") + ".png"
+    }
 }
diff --git a/examples/quickcontrols2/wearable/qml/Weather/WeatherPage.qml b/examples/quickcontrols2/wearable/qml/Weather/WeatherPage.qml
index 1405a8e7..256e60a4 100644
--- a/examples/quickcontrols2/wearable/qml/Weather/WeatherPage.qml
+++ b/examples/quickcontrols2/wearable/qml/Weather/WeatherPage.qml
@@ -69,7 +69,7 @@ Item {
 
                 Image {
                     anchors.verticalCenter: parent.verticalCenter
-                    source: "images/temperature.png"
+                    source: UIStyle.themeImagePath("images/temperature")
                 }
 
                 Column {
@@ -85,7 +85,7 @@ Item {
                                   + " °F" : "N/A"
                         font.pixelSize: UIStyle.fontSizeM
                         font.letterSpacing: 1
-                        color: UIStyle.colorQtGray1
+                        color: UIStyle.themeColorQtGray1
                     }
 
                     Text {
@@ -97,7 +97,7 @@ Item {
                                   + " °F" : "N/A"
                         font.pixelSize: UIStyle.fontSizeM
                         font.letterSpacing: 1
-                        color: UIStyle.colorQtGray1
+                        color: UIStyle.themeColorQtGray1
                     }
 
                     Text {
@@ -109,7 +109,7 @@ Item {
                                   + " °F " : "N/A"
                         font.pixelSize: UIStyle.fontSizeM
                         font.letterSpacing: 1
-                        color: UIStyle.colorQtGray1
+                        color: UIStyle.themeColorQtGray1
                     }
                 }
             }
@@ -129,7 +129,7 @@ Item {
                     Image {
                         id: wImg
                         anchors.verticalCenter: parent.verticalCenter
-                        source: "images/wind.png"
+                        source: UIStyle.themeImagePath("images/wind")
                     }
 
                     Text {
@@ -141,7 +141,7 @@ Item {
                                   + " mph" : "N/A"
                         font.pixelSize: UIStyle.fontSizeM
                         font.letterSpacing: 1
-                        color: UIStyle.colorQtGray1
+                        color: UIStyle.themeColorQtGray1
                     }
                 }
 
@@ -152,7 +152,7 @@ Item {
                     Image {
                         id: hImg
                         anchors.verticalCenter: parent.verticalCenter
-                        source: "images/humidity.png"
+                        source: UIStyle.themeImagePath("images/humidity")
                     }
 
                     Text {
@@ -164,7 +164,7 @@ Item {
                                   + " %" : "N/A"
                         font.pixelSize: UIStyle.fontSizeM
                         font.letterSpacing: 1
-                        color: UIStyle.colorQtGray1
+                        color: UIStyle.themeColorQtGray1
                     }
                 }
             }
@@ -179,7 +179,7 @@ Item {
 
                 Image {
                     anchors.verticalCenter: parent.verticalCenter
-                    source: "images/pressure.png"
+                    source: UIStyle.themeImagePath("images/pressure")
                 }
 
                 Column {
@@ -195,7 +195,7 @@ Item {
                                   + " hPa" : "N/A"
                         font.pixelSize: UIStyle.fontSizeM
                         font.letterSpacing: 1
-                        color: UIStyle.colorQtGray1
+                        color: UIStyle.themeColorQtGray1
                     }
 
                     Text {
@@ -207,7 +207,7 @@ Item {
                                   + " hPa" : "N/A"
                         font.pixelSize: UIStyle.fontSizeM
                         font.letterSpacing: 1
-                        color: UIStyle.colorQtGray1
+                        color: UIStyle.themeColorQtGray1
                     }
 
                     Text {
@@ -219,7 +219,7 @@ Item {
                                   + " hPa" : "N/A"
                         font.pixelSize: UIStyle.fontSizeM
                         font.letterSpacing: 1
-                        color: UIStyle.colorQtGray1
+                        color: UIStyle.themeColorQtGray1
                     }
                 }
             }
@@ -238,7 +238,7 @@ Item {
 
                     Image {
                         anchors.verticalCenter: parent.verticalCenter
-                        source: "images/sunrise.png"
+                        source: UIStyle.themeImagePath("images/sunrise")
                     }
 
                     Text {
@@ -250,7 +250,7 @@ Item {
                                 : "N/A"
                         font.pixelSize: UIStyle.fontSizeM
                         font.letterSpacing: 1
-                        color: UIStyle.colorQtGray1
+                        color: UIStyle.themeColorQtGray1
                     }
                 }
 
@@ -260,7 +260,7 @@ Item {
 
                     Image {
                         anchors.verticalCenter: parent.verticalCenter
-                        source: "images/sunset.png"
+                        source: UIStyle.themeImagePath("images/sunset")
                     }
 
                     Text {
@@ -272,7 +272,7 @@ Item {
                                 : "N/A"
                         font.pixelSize: UIStyle.fontSizeM
                         font.letterSpacing: 1
-                        color: UIStyle.colorQtGray1
+                        color: UIStyle.themeColorQtGray1
                     }
                 }
             }
diff --git a/examples/quickcontrols2/wearable/qml/Weather/images/humidity-dark.png b/examples/quickcontrols2/wearable/qml/Weather/images/humidity-dark.png
new file mode 100644
index 00000000..6baaefda
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Weather/images/humidity-dark.png
diff --git a/examples/quickcontrols2/wearable/qml/Weather/images/humidity-dark@2x.png b/examples/quickcontrols2/wearable/qml/Weather/images/humidity-dark@2x.png
new file mode 100644
index 00000000..7060c48d
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Weather/images/humidity-dark@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Weather/images/humidity.png b/examples/quickcontrols2/wearable/qml/Weather/images/humidity-light.png
index ef9ed9de..ef9ed9de 100644
--- a/examples/quickcontrols2/wearable/qml/Weather/images/humidity.png
+++ b/examples/quickcontrols2/wearable/qml/Weather/images/humidity-light.png
diff --git a/examples/quickcontrols2/wearable/qml/Weather/images/humidity@2x.png b/examples/quickcontrols2/wearable/qml/Weather/images/humidity-light@2x.png
index 5c367a3e..5c367a3e 100644
--- a/examples/quickcontrols2/wearable/qml/Weather/images/humidity@2x.png
+++ b/examples/quickcontrols2/wearable/qml/Weather/images/humidity-light@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Weather/images/pressure-dark.png b/examples/quickcontrols2/wearable/qml/Weather/images/pressure-dark.png
new file mode 100644
index 00000000..2038c695
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Weather/images/pressure-dark.png
diff --git a/examples/quickcontrols2/wearable/qml/Weather/images/pressure-dark@2x.png b/examples/quickcontrols2/wearable/qml/Weather/images/pressure-dark@2x.png
new file mode 100644
index 00000000..9b5a4abe
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Weather/images/pressure-dark@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Weather/images/pressure.png b/examples/quickcontrols2/wearable/qml/Weather/images/pressure-light.png
index 7850609e..7850609e 100644
--- a/examples/quickcontrols2/wearable/qml/Weather/images/pressure.png
+++ b/examples/quickcontrols2/wearable/qml/Weather/images/pressure-light.png
diff --git a/examples/quickcontrols2/wearable/qml/Weather/images/pressure@2x.png b/examples/quickcontrols2/wearable/qml/Weather/images/pressure-light@2x.png
index 14c1cab3..14c1cab3 100644
--- a/examples/quickcontrols2/wearable/qml/Weather/images/pressure@2x.png
+++ b/examples/quickcontrols2/wearable/qml/Weather/images/pressure-light@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Weather/images/sunrise-dark.png b/examples/quickcontrols2/wearable/qml/Weather/images/sunrise-dark.png
new file mode 100644
index 00000000..5a70f984
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Weather/images/sunrise-dark.png
diff --git a/examples/quickcontrols2/wearable/qml/Weather/images/sunrise-dark@2x.png b/examples/quickcontrols2/wearable/qml/Weather/images/sunrise-dark@2x.png
new file mode 100644
index 00000000..2baa7135
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Weather/images/sunrise-dark@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Weather/images/sunrise.png b/examples/quickcontrols2/wearable/qml/Weather/images/sunrise-light.png
index 70a9a969..70a9a969 100644
--- a/examples/quickcontrols2/wearable/qml/Weather/images/sunrise.png
+++ b/examples/quickcontrols2/wearable/qml/Weather/images/sunrise-light.png
diff --git a/examples/quickcontrols2/wearable/qml/Weather/images/sunrise@2x.png b/examples/quickcontrols2/wearable/qml/Weather/images/sunrise-light@2x.png
index 3a7892eb..3a7892eb 100644
--- a/examples/quickcontrols2/wearable/qml/Weather/images/sunrise@2x.png
+++ b/examples/quickcontrols2/wearable/qml/Weather/images/sunrise-light@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Weather/images/sunset-dark.png b/examples/quickcontrols2/wearable/qml/Weather/images/sunset-dark.png
new file mode 100644
index 00000000..5dde7c0f
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Weather/images/sunset-dark.png
diff --git a/examples/quickcontrols2/wearable/qml/Weather/images/sunset-dark@2x.png b/examples/quickcontrols2/wearable/qml/Weather/images/sunset-dark@2x.png
new file mode 100644
index 00000000..3892c2ea
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Weather/images/sunset-dark@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Weather/images/sunset.png b/examples/quickcontrols2/wearable/qml/Weather/images/sunset-light.png
index 01bb9ec8..01bb9ec8 100644
--- a/examples/quickcontrols2/wearable/qml/Weather/images/sunset.png
+++ b/examples/quickcontrols2/wearable/qml/Weather/images/sunset-light.png
diff --git a/examples/quickcontrols2/wearable/qml/Weather/images/sunset@2x.png b/examples/quickcontrols2/wearable/qml/Weather/images/sunset-light@2x.png
index 39aeebe5..39aeebe5 100644
--- a/examples/quickcontrols2/wearable/qml/Weather/images/sunset@2x.png
+++ b/examples/quickcontrols2/wearable/qml/Weather/images/sunset-light@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Weather/images/temperature-dark.png b/examples/quickcontrols2/wearable/qml/Weather/images/temperature-dark.png
new file mode 100644
index 00000000..1c86bae2
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Weather/images/temperature-dark.png
diff --git a/examples/quickcontrols2/wearable/qml/Weather/images/temperature-dark@2x.png b/examples/quickcontrols2/wearable/qml/Weather/images/temperature-dark@2x.png
new file mode 100644
index 00000000..c1ac7d66
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Weather/images/temperature-dark@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Weather/images/temperature.png b/examples/quickcontrols2/wearable/qml/Weather/images/temperature-light.png
index 5d7faa99..5d7faa99 100644
--- a/examples/quickcontrols2/wearable/qml/Weather/images/temperature.png
+++ b/examples/quickcontrols2/wearable/qml/Weather/images/temperature-light.png
diff --git a/examples/quickcontrols2/wearable/qml/Weather/images/temperature@2x.png b/examples/quickcontrols2/wearable/qml/Weather/images/temperature-light@2x.png
index 0b4340ce..0b4340ce 100644
--- a/examples/quickcontrols2/wearable/qml/Weather/images/temperature@2x.png
+++ b/examples/quickcontrols2/wearable/qml/Weather/images/temperature-light@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Weather/images/wind-dark.png b/examples/quickcontrols2/wearable/qml/Weather/images/wind-dark.png
new file mode 100644
index 00000000..4e5264a3
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Weather/images/wind-dark.png
diff --git a/examples/quickcontrols2/wearable/qml/Weather/images/wind-dark@2x.png b/examples/quickcontrols2/wearable/qml/Weather/images/wind-dark@2x.png
new file mode 100644
index 00000000..0a893d50
--- /dev/null
+++ b/examples/quickcontrols2/wearable/qml/Weather/images/wind-dark@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/Weather/images/wind.png b/examples/quickcontrols2/wearable/qml/Weather/images/wind-light.png
index c728fcc0..c728fcc0 100644
--- a/examples/quickcontrols2/wearable/qml/Weather/images/wind.png
+++ b/examples/quickcontrols2/wearable/qml/Weather/images/wind-light.png
diff --git a/examples/quickcontrols2/wearable/qml/Weather/images/wind@2x.png b/examples/quickcontrols2/wearable/qml/Weather/images/wind-light@2x.png
index bab49c04..bab49c04 100644
--- a/examples/quickcontrols2/wearable/qml/Weather/images/wind@2x.png
+++ b/examples/quickcontrols2/wearable/qml/Weather/images/wind-light@2x.png
diff --git a/examples/quickcontrols2/wearable/qml/WorldClock/Clock.qml b/examples/quickcontrols2/wearable/qml/WorldClock/Clock.qml
index 143c0343..158f3d70 100644
--- a/examples/quickcontrols2/wearable/qml/WorldClock/Clock.qml
+++ b/examples/quickcontrols2/wearable/qml/WorldClock/Clock.qml
@@ -180,7 +180,7 @@ SwipeViewPage {
             anchors.horizontalCenter: parent.horizontalCenter
 
             text: cityName
-            color: UIStyle.colorQtGray1
+            color: UIStyle.themeColorQtGray1
             font.pixelSize: UIStyle.fontSizeXS
             font.letterSpacing: 2
         }
diff --git a/examples/quickcontrols2/wearable/wearable.cpp b/examples/quickcontrols2/wearable/wearable.cpp
index e90ec413..68dee7c0 100644
--- a/examples/quickcontrols2/wearable/wearable.cpp
+++ b/examples/quickcontrols2/wearable/wearable.cpp
@@ -56,6 +56,9 @@
 int main(int argc, char *argv[])
 {
     QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
+    QCoreApplication::setApplicationName("Wearable");
+    QCoreApplication::setOrganizationName("QtProject");
+
     QGuiApplication app(argc, argv);
 
     //! [style]
diff --git a/examples/quickcontrols2/wearable/wearable.qml b/examples/quickcontrols2/wearable/wearable.qml
index 6be65d1b..62f138bb 100644
--- a/examples/quickcontrols2/wearable/wearable.qml
+++ b/examples/quickcontrols2/wearable/wearable.qml
@@ -50,21 +50,39 @@
 
 import QtQuick 2.10
 import QtQuick.Controls 2.3 as QQC2
+import Qt.labs.settings 1.0
 import "qml"
 import "qml/Style"
 
 QQC2.ApplicationWindow {
     id: window
-
     visible: true
-
     width: 320
     height: 320
-
     title: qsTr("Wearable")
 
+    Settings {
+        id: settings
+        property bool wireless
+        property bool bluetooth
+        property int contrast
+        property int brightness
+        property bool darkTheme
+    }
+
+    Binding {
+        target: UIStyle
+        property: "darkTheme"
+        value: settings.darkTheme
+    }
+
+    // We need the settings object both here and in SettingsPage,
+    // so for convenience, we declare it as a property of the root object so that
+    // it will be available to all of the QML files that we load.
+    property alias settings: settings
+
     background: Image {
-        source: "images/background.png"
+        source: "images/background-" + (settings.darkTheme ? "dark" : "light") + ".png"
     }
 
     header: NaviButton {
diff --git a/examples/quickcontrols2/wearable/wearable.qrc b/examples/quickcontrols2/wearable/wearable.qrc
index d71b5bab..3559ffb8 100644
--- a/examples/quickcontrols2/wearable/wearable.qrc
+++ b/examples/quickcontrols2/wearable/wearable.qrc
@@ -18,7 +18,8 @@
         <file>icons/wearable/36x36@2/settings.png</file>
         <file>icons/wearable/36x36@2/weather.png</file>
         <file>icons/wearable/36x36@2/worldclock.png</file>
-        <file>images/background.png</file>
+        <file>images/background-light.png</file>
+        <file>images/background-dark.png</file>
         <file>images/back.png</file>
         <file>images/back@2x.png</file>
         <file>images/home.png</file>
@@ -26,45 +27,75 @@
         <file>qml/Alarms/AlarmsPage.qml</file>
         <file>qml/Fitness/fitness.js</file>
         <file>qml/Fitness/FitnessPage.qml</file>
-        <file>qml/Fitness/images/man-running.png</file>
-        <file>qml/Fitness/images/man-running@2x.png</file>
-        <file>qml/Fitness/images/man-walking.png</file>
-        <file>qml/Fitness/images/man-walking@2x.png</file>
+        <file>qml/Fitness/images/man-running-light.png</file>
+        <file>qml/Fitness/images/man-running-light@2x.png</file>
+        <file>qml/Fitness/images/man-walking-light.png</file>
+        <file>qml/Fitness/images/man-walking-light@2x.png</file>
+        <file>qml/Fitness/images/man-running-dark.png</file>
+        <file>qml/Fitness/images/man-running-dark@2x.png</file>
+        <file>qml/Fitness/images/man-walking-dark.png</file>
+        <file>qml/Fitness/images/man-walking-dark@2x.png</file>
         <file>qml/Navigation/navigation.js</file>
         <file>qml/Navigation/NavigationPage.qml</file>
         <file>qml/Navigation/RouteElement.qml</file>
         <file>qml/Navigation/walk_route.json</file>
         <file>qml/Navigation/images/end.png</file>
         <file>qml/Navigation/images/end@2x.png</file>
-        <file>qml/Navigation/images/leftturn.png</file>
-        <file>qml/Navigation/images/leftturn@2x.png</file>
-        <file>qml/Navigation/images/navigation.png</file>
-        <file>qml/Navigation/images/navigation@2x.png</file>
-        <file>qml/Navigation/images/rightturn.png</file>
-        <file>qml/Navigation/images/rightturn@2x.png</file>
+        <file>qml/Navigation/images/leftturn-light.png</file>
+        <file>qml/Navigation/images/leftturn-light@2x.png</file>
+        <file>qml/Navigation/images/leftturn-dark.png</file>
+        <file>qml/Navigation/images/leftturn-dark@2x.png</file>
+        <file>qml/Navigation/images/navigation-light.png</file>
+        <file>qml/Navigation/images/navigation-light@2x.png</file>
+        <file>qml/Navigation/images/navigation-dark.png</file>
+        <file>qml/Navigation/images/navigation-dark@2x.png</file>
+        <file>qml/Navigation/images/rightturn-light.png</file>
+        <file>qml/Navigation/images/rightturn-light@2x.png</file>
+        <file>qml/Navigation/images/rightturn-dark.png</file>
+        <file>qml/Navigation/images/rightturn-dark@2x.png</file>
         <file>qml/Navigation/images/start.png</file>
         <file>qml/Navigation/images/start@2x.png</file>
-        <file>qml/Navigation/images/straight.png</file>
-        <file>qml/Navigation/images/straight@2x.png</file>
+        <file>qml/Navigation/images/straight-light.png</file>
+        <file>qml/Navigation/images/straight-light@2x.png</file>
+        <file>qml/Navigation/images/straight-dark.png</file>
+        <file>qml/Navigation/images/straight-dark@2x.png</file>
         <file>qml/Navigation/images/uturn.png</file>
         <file>qml/Navigation/images/uturn@2x.png</file>
         <file>qml/Notifications/notifications.js</file>
         <file>qml/Notifications/NotificationsPage.qml</file>
-        <file>qml/Notifications/images/avatarf.png</file>
-        <file>qml/Notifications/images/avatarf@2x.png</file>
-        <file>qml/Notifications/images/avatarm.png</file>
-        <file>qml/Notifications/images/avatarm@2x.png</file>
-        <file>qml/Notifications/images/missedcall.png</file>
-        <file>qml/Notifications/images/missedcall@2x.png</file>
+        <file>qml/Notifications/images/avatarf-light.png</file>
+        <file>qml/Notifications/images/avatarf-light@2x.png</file>
+        <file>qml/Notifications/images/avatarm-light.png</file>
+        <file>qml/Notifications/images/avatarm-light@2x.png</file>
+        <file>qml/Notifications/images/missedcall-light.png</file>
+        <file>qml/Notifications/images/missedcall-light@2x.png</file>
+        <file>qml/Notifications/images/avatarf-dark.png</file>
+        <file>qml/Notifications/images/avatarf-dark@2x.png</file>
+        <file>qml/Notifications/images/avatarm-dark.png</file>
+        <file>qml/Notifications/images/avatarm-dark@2x.png</file>
+        <file>qml/Notifications/images/missedcall-dark.png</file>
+        <file>qml/Notifications/images/missedcall-dark@2x.png</file>
         <file>qml/Settings/SettingsPage.qml</file>
-        <file>qml/Settings/images/bluetooth.png</file>
-        <file>qml/Settings/images/bluetooth@2x.png</file>
-        <file>qml/Settings/images/brightness.png</file>
-        <file>qml/Settings/images/brightness@2x.png</file>
-        <file>qml/Settings/images/contrast.png</file>
-        <file>qml/Settings/images/contrast@2x.png</file>
-        <file>qml/Settings/images/wifi.png</file>
-        <file>qml/Settings/images/wifi@2x.png</file>
+        <file>qml/Settings/images/bluetooth-light.png</file>
+        <file>qml/Settings/images/bluetooth-light@2x.png</file>
+        <file>qml/Settings/images/brightness-light.png</file>
+        <file>qml/Settings/images/brightness-light@2x.png</file>
+        <file>qml/Settings/images/contrast-light.png</file>
+        <file>qml/Settings/images/contrast-light@2x.png</file>
+        <file>qml/Settings/images/theme-light.png</file>
+        <file>qml/Settings/images/theme-light@2x.png</file>
+        <file>qml/Settings/images/wifi-light.png</file>
+        <file>qml/Settings/images/wifi-light@2x.png</file>
+        <file>qml/Settings/images/bluetooth-dark.png</file>
+        <file>qml/Settings/images/bluetooth-dark@2x.png</file>
+        <file>qml/Settings/images/brightness-dark.png</file>
+        <file>qml/Settings/images/brightness-dark@2x.png</file>
+        <file>qml/Settings/images/contrast-dark.png</file>
+        <file>qml/Settings/images/contrast-dark@2x.png</file>
+        <file>qml/Settings/images/theme-dark.png</file>
+        <file>qml/Settings/images/theme-dark@2x.png</file>
+        <file>qml/Settings/images/wifi-dark.png</file>
+        <file>qml/Settings/images/wifi-dark@2x.png</file>
         <file>qml/Style/qmldir</file>
         <file>qml/Style/PageIndicator.qml</file>
         <file>qml/Style/Slider.qml</file>
@@ -73,18 +104,30 @@
         <file>qml/Weather/weather.js</file>
         <file>qml/Weather/weather.json</file>
         <file>qml/Weather/WeatherPage.qml</file>
-        <file>qml/Weather/images/humidity.png</file>
-        <file>qml/Weather/images/humidity@2x.png</file>
-        <file>qml/Weather/images/pressure.png</file>
-        <file>qml/Weather/images/pressure@2x.png</file>
-        <file>qml/Weather/images/sunrise.png</file>
-        <file>qml/Weather/images/sunrise@2x.png</file>
-        <file>qml/Weather/images/sunset.png</file>
-        <file>qml/Weather/images/sunset@2x.png</file>
-        <file>qml/Weather/images/temperature.png</file>
-        <file>qml/Weather/images/temperature@2x.png</file>
-        <file>qml/Weather/images/wind.png</file>
-        <file>qml/Weather/images/wind@2x.png</file>
+        <file>qml/Weather/images/humidity-light.png</file>
+        <file>qml/Weather/images/humidity-light@2x.png</file>
+        <file>qml/Weather/images/pressure-light.png</file>
+        <file>qml/Weather/images/pressure-light@2x.png</file>
+        <file>qml/Weather/images/sunrise-light.png</file>
+        <file>qml/Weather/images/sunrise-light@2x.png</file>
+        <file>qml/Weather/images/sunset-light.png</file>
+        <file>qml/Weather/images/sunset-light@2x.png</file>
+        <file>qml/Weather/images/temperature-light.png</file>
+        <file>qml/Weather/images/temperature-light@2x.png</file>
+        <file>qml/Weather/images/wind-light.png</file>
+        <file>qml/Weather/images/wind-light@2x.png</file>
+        <file>qml/Weather/images/humidity-dark.png</file>
+        <file>qml/Weather/images/humidity-dark@2x.png</file>
+        <file>qml/Weather/images/pressure-dark.png</file>
+        <file>qml/Weather/images/pressure-dark@2x.png</file>
+        <file>qml/Weather/images/sunrise-dark.png</file>
+        <file>qml/Weather/images/sunrise-dark@2x.png</file>
+        <file>qml/Weather/images/sunset-dark.png</file>
+        <file>qml/Weather/images/sunset-dark@2x.png</file>
+        <file>qml/Weather/images/temperature-dark.png</file>
+        <file>qml/Weather/images/temperature-dark@2x.png</file>
+        <file>qml/Weather/images/wind-dark.png</file>
+        <file>qml/Weather/images/wind-dark@2x.png</file>
         <file>qml/WorldClock/Clock.qml</file>
         <file>qml/WorldClock/WorldClockPage.qml</file>
         <file>qml/WorldClock/images/center.png</file>