add theme selector to configurations

modules/configuration/Configuration.qml

@@ -1,7 +1,9 @@
 import qs.components
+import qs.config
 import qs.services
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Layouts
 
 StyledPanelWindow {
     id: window
@@ -10,13 +12,52 @@ StyledPanelWindow {
 
     visible: Visibility.configuration
     implicitWidth: 800
-    implicitHeight: 800
-
-    ScrollView {
-        id: view
+    implicitHeight: 400
 
+    ColumnLayout {
+        spacing: 0
         anchors.fill: parent
-        background: Item {}
+        StyledText {
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+
+            text: "Configurations"
+            font.pixelSize: Styling.typography.textSize.xl
+            padding: 8
+        }
+
+        StyledRectangle {
+            id: titleBar
+
+            Layout.fillWidth: true
+            Layout.preferredHeight: 4
+        }
+
+        ScrollView {
+            id: view
+
+            Layout.fillHeight: true
+            padding: 24
+            background: Item {}
+
+            GridLayout {
+
+                columnSpacing: Styling.layout.spacing.xl
+
+                StyledText {
+                    text: "Theme"
+                    // font.bold: true
+                    font.pixelSize: Styling.typography.textSize.lg
+                }
+
+                StyledComboBox {
+                    currentIndex: Theme.themes.indexOf(Theme.currentTheme)
+                    model: Theme.themes
+                    onActivated: index => {
+                        Theme.currentTheme = Theme.themes[index];
+                    }
+                }
+            }
+        }
     }
 
     component Menus: QtObject {

modules/configuration/ThemeConfig.qml

@@ -0,0 +1,5 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+
+GridLayout {}