PreferencesDialog: Add accent color option

Author: adazem009

src/app/qml/dialogs/PreferencesDialog.qml

@@ -17,6 +17,31 @@ CustomDialog {
         ThemeEngine.reloadTheme();
     }
 
+    QtObject {
+        id: priv
+        property int accentColorIndex: -1
+
+        readonly property list<color> darkAccentColors: [
+            Qt.rgba(0.85, 0.31, 0.33, 1),
+            Qt.rgba(0.85, 0.62, 0.31, 1),
+            Qt.rgba(0.85, 0.84, 0.31, 1),
+            Qt.rgba(0.39, 0.85, 0.31, 1),
+            Qt.rgba(0.31, 0.75, 0.85, 1),
+            Qt.rgba(0.32, 0.32, 0.85, 1),
+            Qt.rgba(0.68, 0.31, 0.85, 1),
+        ]
+
+        readonly property list<color> lightAccentColors: [
+            Qt.rgba(0.75, 0.08, 0.09, 1),
+            Qt.rgba(0.75, 0.47, 0.08, 1),
+            Qt.rgba(0.75, 0.74, 0.08, 1),
+            Qt.rgba(0.17, 0.75, 0.08, 1),
+            Qt.rgba(0.08, 0.63, 0.75, 1),
+            Qt.rgba(0.08, 0.08, 0.75, 1),
+            Qt.rgba(0.54, 0.08, 0.75, 1),
+        ]
+    }
+
     contentItem: ColumnLayout {
         // Themes
         Label {
@@ -38,5 +63,47 @@ CustomDialog {
                 onCheckedChanged: if(checked) ThemeEngine.theme = ThemeEngine.DarkTheme
             }
         }
+
+        RowLayout {
+            Label {
+                text: qsTr("Accent color:")
+            }
+
+            Repeater {
+                id: accentColors
+                model: ThemeEngine.theme == ThemeEngine.DarkTheme ? priv.darkAccentColors : priv.lightAccentColors
+
+                ColorButton {
+                    required property color modelData
+                    required property int index
+                    color: modelData
+                    checked: {
+                        if(ThemeEngine.accentColor === modelData) {
+                            priv.accentColorIndex = index;
+                            return true;
+                        } else {
+                            return false;
+                        }
+                    }
+                    autoExclusive: true
+                    checkable: true
+                    onPressed: ThemeEngine.accentColor = modelData;
+                }
+            }
+        }
+
+        Connections {
+            target: ThemeEngine
+
+            function onThemeChanged() {
+                console.log(priv.accentColorIndex, ThemeEngine.theme);
+
+                if(ThemeEngine.theme == ThemeEngine.DarkTheme) {
+                    ThemeEngine.accentColor = priv.darkAccentColors[priv.accentColorIndex];
+                } else {
+                    ThemeEngine.accentColor = priv.lightAccentColors[priv.accentColorIndex];
+                }
+            }
+        }
     }
 }