settings: add material palette and transparency

.config/quickshell/modules/common/Appearance.qml

@@ -130,7 +130,7 @@ Singleton {
         property color colSecondary: m3colors.m3secondary
         property color colSecondaryHover: ColorUtils.mix(m3colors.m3secondary, colLayer1Hover, 0.85)
         property color colSecondaryActive: ColorUtils.mix(m3colors.m3secondary, colLayer1Active, 0.4)
-        property color colSecondaryContainer: ColorUtils.transparentize(m3colors.m3secondaryContainer, root.contentTransparency)
+        property color colSecondaryContainer: m3colors.m3secondaryContainer
         property color colSecondaryContainerHover: ColorUtils.mix(m3colors.m3secondaryContainer, colLayer1Hover, 0.6)
         property color colSecondaryContainerActive: ColorUtils.mix(m3colors.m3secondaryContainer, colLayer1Active, 0.54)
         property color colOnSecondaryContainer: m3colors.m3onSecondaryContainer

.config/quickshell/modules/common/widgets/ConfigSwitch.qml

@@ -0,0 +1,29 @@
+import "root:/modules/common/widgets/"
+import "root:/modules/common/"
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+
+RippleButton {
+    id: root
+    Layout.fillWidth: true
+
+    contentItem: RowLayout {
+        spacing: 10
+        StyledText {
+            id: labelWidget
+            Layout.fillWidth: true
+            text: root.text
+            font.pixelSize: Appearance.font.pixelSize.normal
+            color: Appearance.colors.colOnSecondaryContainer
+        }
+        StyledSwitch {
+            id: switchWidget
+            down: root.down
+            scale: 0.75
+            Layout.fillWidth: false
+            checked: root.checked
+        }
+    }
+}
+

.config/quickshell/modules/common/widgets/KeyboardKey.qml

@@ -15,7 +15,7 @@ Rectangle {
     property real extraBottomBorderWidth: 2
     property color borderColor: Appearance.colors.colOnLayer0
     property real borderRadius: 5
-    property color keyColor: Appearance.colors.colSurfaceContainerLow
+    property color keyColor: Appearance.m3colors.m3surfaceContainerLow
     implicitWidth: keyFace.implicitWidth + borderWidth * 2
     implicitHeight: keyFace.implicitHeight + borderWidth * 2 + extraBottomBorderWidth
     radius: borderRadius

.config/quickshell/modules/common/widgets/StyledSwitch.qml

@@ -36,13 +36,13 @@ Switch {
 
     // Custom thumb styling
     indicator: Rectangle {
-        width: root.pressed ? (28 * root.scale) : root.checked ? (24 * root.scale) : (16 * root.scale)
+        width: (root.pressed || root.down) ? (28 * root.scale) : root.checked ? (24 * root.scale) : (16 * root.scale)
-        height: root.pressed ? (28 * root.scale) : root.checked ? (24 * root.scale) : (16 * root.scale)
+        height: (root.pressed || root.down) ? (28 * root.scale) : root.checked ? (24 * root.scale) : (16 * root.scale)
         radius: Appearance.rounding.full
         color: root.checked ? Appearance.m3colors.m3onPrimary : Appearance.m3colors.m3outline
         anchors.verticalCenter: parent.verticalCenter
         anchors.left: parent.left
-        anchors.leftMargin: root.checked ? (root.pressed ? (22 * root.scale) : 24 * root.scale) : (root.pressed ? (2 * root.scale) : 8 * root.scale)
+        anchors.leftMargin: root.checked ? ((root.pressed || root.down) ? (22 * root.scale) : 24 * root.scale) : ((root.pressed || root.down) ? (2 * root.scale) : 8 * root.scale)
 
         Behavior on anchors.leftMargin {
             animation: Appearance.animation.elementMove.numberAnimation.createObject(this)

.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."
+            }
+        }
     }
 }