settings: add material palette and transparency

.config/quickshell/modules/settings/Style.qml

@@ -11,6 +11,8 @@ import "root:/modules/common/functions/color_utils.js" as ColorUtils
 import "root:/modules/common/functions/file_utils.js" as FileUtils
 
 ContentPage {
+    baseWidth: lightDarkButtonGroup.implicitWidth
+    forceWidth: true
 
     Process {
         id: konachanWallProc
@@ -27,7 +29,9 @@ ContentPage {
     ContentSection {
         title: "Colors & Wallpaper"
 
+        // Light/Dark mode preference
         ButtonGroup {
+            id: lightDarkButtonGroup
             Layout.fillWidth: true
             LightDarkPreferenceButton {
                 dark: false
@@ -37,6 +41,59 @@ ContentPage {
             }
         }
 
+        // Material palette selection
+        StyledText {
+            text: "Material palette"
+            color: Appearance.colors.colSubtext
+        }
+        Flow {
+            id: paletteFlow
+            Layout.fillWidth: true
+            spacing: 2
+            property list<var> palettes: [
+                {"value": "auto", "displayName": "Auto"},
+                {"value": "scheme-content", "displayName": "Content"},
+                {"value": "scheme-expressive", "displayName": "Expressive"},
+                {"value": "scheme-fidelity", "displayName": "Fidelty"},
+                {"value": "scheme-fruit-salad", "displayName": "Fruit Salad"},
+                {"value": "scheme-monochrome", "displayName": "Monochrome"},
+                {"value": "scheme-neutral", "displayName": "Neutral"},
+                {"value": "scheme-rainbow", "displayName": "Rainbow"},
+                {"value": "scheme-tonal-spot", "displayName": "Tonal Spot"},
+            ]
+
+            Repeater {
+                model: paletteFlow.palettes
+                delegate: SelectionGroupButton {
+                    id: paletteButton
+                    required property var modelData
+                    required property int index
+                    onYChanged: {
+                        if (index === 0) {
+                            paletteButton.leftmost = true
+                        } else {
+                            var prev = paletteFlow.children[index - 1]
+                            var thisIsOnNewLine = prev && prev.y !== paletteButton.y
+                            paletteButton.leftmost = thisIsOnNewLine
+                            prev.rightmost = thisIsOnNewLine
+                        }
+                    }
+                    leftmost: index === 0
+                    rightmost: index === paletteFlow.palettes.length - 1
+                    buttonText: modelData.displayName;
+                    toggled: ConfigOptions.appearance.palette.type === modelData.value
+                    onClicked: {
+                        ConfigLoader.setConfigValueAndSave("appearance.palette.type", modelData.value);
+                    }
+                }
+            }
+        }
+
+        // Wallpaper selection
+        StyledText {
+            text: "Wallpaper"
+            color: Appearance.colors.colSubtext
+        }
         RowLayout {
             Layout.alignment: Qt.AlignHCenter
             RippleButtonWithIcon {
@@ -139,5 +196,17 @@ ContentPage {
                 }
             }
         }
+
+        ConfigSwitch {
+            text: "Transparency"
+            checked: ConfigOptions.appearance.transparency
+            onClicked: checked = !checked;
+            onCheckedChanged: {
+                ConfigLoader.setConfigValueAndSave("appearance.transparency", checked);
+            }
+            StyledToolTip {
+                content: "Might look ass. Unsupported."
+            }
+        }
     }
 }