add theme selector to configurations

components/StyledComboBox.qml

@@ -0,0 +1,79 @@
+pragma ComponentBehavior: Bound
+
+import qs.config
+import QtQuick
+import QtQuick.Controls
+
+ComboBox {
+    id: control
+
+    palette.button: Styling.theme.base200
+    palette.buttonText: Styling.theme.basecontent
+    palette.highlight: Styling.theme.primary
+    palette.highlightedText: Styling.theme.primarycontent
+    palette.text: Styling.theme.basecontent
+    palette.window: Styling.theme.base200
+
+    implicitHeight: 40
+
+    delegate: ItemDelegate {
+        id: delegate
+
+        required property var model
+        required property int index
+
+        width: control.width
+        contentItem: StyledText {
+            text: delegate.model[control.textRole]
+            color: delegate.highlighted ? palette.highlightedText : palette.buttonText
+            elide: Text.ElideRight
+            verticalAlignment: Text.AlignVCenter
+        }
+        background: Rectangle {
+            color: delegate.highlighted ? palette.highlight : palette.button
+            radius: Styling.theme.radiusSelector
+        }
+        highlighted: control.highlightedIndex === index
+    }
+
+    contentItem: StyledText {
+        leftPadding: 12
+
+        text: control.displayText
+        color: control.hovered || control.down ? palette.highlightedText : palette.buttonText
+        verticalAlignment: Text.AlignVCenter
+        elide: Text.ElideRight
+    }
+
+    background: Rectangle {
+        implicitWidth: 120
+        implicitHeight: 40
+        color: control.hovered || control.down ? palette.highlight : palette.button
+        border.color: Styling.theme.base100
+        border.width: control.visualFocus ? 2 : 1
+        radius: Styling.theme.radiusSelector
+    }
+
+    popup: Popup {
+        palette: control.palette
+        y: control.height - 1
+        width: control.width
+        height: Math.min(contentItem.implicitHeight, control.Window.height - topMargin - bottomMargin)
+        padding: 1
+
+        contentItem: ListView {
+            clip: true
+            implicitHeight: contentHeight + 2
+            model: control.popup.visible ? control.delegateModel : null
+            currentIndex: control.highlightedIndex
+
+            ScrollIndicator.vertical: ScrollIndicator {}
+        }
+
+        background: Rectangle {
+            color: palette.window
+            bottomLeftRadius: Styling.theme.radiusField
+            bottomRightRadius: Styling.theme.radiusField
+        }
+    }
+}

components/StyledRectangle.qml

@@ -3,7 +3,7 @@ import QtQuick
 
 Rectangle {
     radius: Styling.theme.radiusBox
-    color: Styling.theme.base100
+    color: Styling.theme.base200
     Behavior on color {
         ColorAnimation {
             duration: Styling.animations.speed.normal

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
+    implicitHeight: 400
-
-    ScrollView {
-        id: view
 
+    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 {}