qml: introduce ThemeSettings page

Author: jarolrod

src/Makefile.qt.include

@@ -352,6 +352,7 @@ QML_RES_QML = \
   qml/components/StorageLocations.qml \
   qml/components/StorageOptions.qml \
   qml/components/StorageSettings.qml \
+  qml/components/ThemeSettings.qml \
   qml/components/TotalBytesIndicator.qml \
   qml/controls/ContinueButton.qml \
   qml/controls/CoreText.qml \
@@ -389,7 +390,8 @@ QML_RES_QML = \
   qml/pages/settings/SettingsConnection.qml \
   qml/pages/settings/SettingsDeveloper.qml \
   qml/pages/settings/SettingsProxy.qml \
-  qml/pages/settings/SettingsStorage.qml
+  qml/pages/settings/SettingsStorage.qml \
+  qml/pages/settings/SettingsTheme.qml
 
 BITCOIN_QT_CPP = $(BITCOIN_QT_BASE_CPP)
 if TARGET_WINDOWS

src/qml/bitcoin_qml.qrc

@@ -15,6 +15,7 @@
         <file>components/Separator.qml</file>
         <file>components/StorageOptions.qml</file>
         <file>components/StorageSettings.qml</file>
+        <file>components/ThemeSettings.qml</file>
         <file>components/TotalBytesIndicator.qml</file>
         <file>controls/ContinueButton.qml</file>
         <file>controls/CoreText.qml</file>
@@ -53,6 +54,7 @@
         <file>pages/settings/SettingsDeveloper.qml</file>
         <file>pages/settings/SettingsProxy.qml</file>
         <file>pages/settings/SettingsStorage.qml</file>
+        <file>pages/settings/SettingsTheme.qml</file>
     </qresource>
     <qresource prefix="/icons">
         <file alias="arrow-down">res/icons/arrow-down.png</file>

src/qml/components/ThemeSettings.qml

@@ -0,0 +1,60 @@
+// Copyright (c) 2023 The Bitcoin Core developers
+// Distributed under the MIT software license, see the accompanying
+// file COPYING or http://www.opensource.org/licenses/mit-license.php.
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import Qt.labs.settings 1.0
+import "../controls"
+
+ColumnLayout {
+    id: root
+    spacing: 4
+
+    Settings {
+        id: settings
+    }
+
+    Setting {
+        Layout.fillWidth: true
+        header: qsTr("Light")
+        actionItem: Button {
+            anchors.centerIn: parent
+            visible: !Theme.dark
+            icon.source: "image://images/check"
+            icon.color: Theme.color.neutral9
+            icon.height: 24
+            icon.width: 24
+            background: null
+
+            Behavior on icon.color {
+                ColorAnimation { duration: 150 }
+            }
+        }
+        onClicked: {
+            Theme.dark = false
+        }
+    }
+    Separator { Layout.fillWidth: true }
+    Setting {
+        Layout.fillWidth: true
+        header: qsTr("Dark")
+        actionItem: Button {
+            anchors.centerIn: parent
+            visible: Theme.dark
+            icon.source: "image://images/check"
+            icon.color: Theme.color.neutral9
+            icon.height: 24
+            icon.width: 24
+            background: null
+
+            Behavior on icon.color {
+                ColorAnimation { duration: 150 }
+            }
+        }
+        onClicked: {
+            Theme.dark = true;
+        }
+    }
+}

src/qml/pages/settings/SettingsTheme.qml

@@ -0,0 +1,28 @@
+// Copyright (c) 2023 The Bitcoin Core developers
+// Distributed under the MIT software license, see the accompanying
+// file COPYING or http://www.opensource.org/licenses/mit-license.php.
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import "../../controls"
+import "../../components"
+
+Page {
+    property alias navLeftDetail: navbar.leftDetail
+    property alias navMiddleDetail: navbar.middleDetail
+
+    background: null
+    implicitWidth: 450
+    leftPadding: 20
+    rightPadding: 20
+    topPadding: 30
+
+    header: NavigationBar {
+        id: navbar
+    }
+    ThemeSettings {
+        width: Math.min(parent.width, 450)
+        anchors.horizontalCenter: parent.horizontalCenter
+    }
+}