create ThemeComboBox

components/composite/ThemeComboBox.qml

@@ -0,0 +1,20 @@
+import qs.components
+import qs.config
+import QtQuick
+
+StyledComboBox {
+    id: control
+
+    currentIndex: Theme.themes.indexOf(Theme.currentTheme)
+    model: Theme.themes
+    onActivated: index => {
+        Theme.currentTheme = Theme.themes[index];
+    }
+
+    Component.onCompleted: {
+        control.currentIndex = Theme.themes.indexOf(Theme.currentTheme);
+        Theme.onCurrentThemeChanged = () => {
+            Theme.themes.indexOf(Theme.currentTheme);
+        };
+    }
+}

modules/configuration/StylingView.qml

@@ -1,4 +1,5 @@
 import qs.components
+import qs.components.composite
 import qs.config
 import QtQuick
 import QtQuick.Layouts
@@ -10,16 +11,9 @@ StyledPane {
 
         StyledText {
             text: "Theme"
-            // font.bold: true
             font.pixelSize: Styling.typography.textSize.lg
         }
 
-        StyledComboBox {
+        ThemeComboBox {}
-            currentIndex: Theme.themes.indexOf(Theme.currentTheme)
-            model: Theme.themes
-            onActivated: index => {
-                Theme.currentTheme = Theme.themes[index];
-            }
-        }
     }
 }