use styled switch

components/StyledSwitch.qml

@@ -5,39 +5,51 @@ import QtQuick.Controls
 Switch {
     id: control
 
+    contentItem: Text {
+        id: text
+        rightPadding: control.indicator.width + control.spacing
+        text: control.text
+        font: control.font
+        opacity: enabled ? 1.0 : 0.3
+        color: Theme.palette.basecontent
+        elide: Text.ElideRight
+        verticalAlignment: Text.AlignVCenter
+    }
+
     HoverHandler {
         cursorShape: Qt.PointingHandCursor
     }
 
-    indicator: Item {
+    indicator: Rectangle {
+      id: indicator
+
+      property int padding: 8
+
         implicitWidth: 48
-        implicitHeight: 22
-        Rectangle {
-            implicitWidth: parent.width
-            implicitHeight: parent.height - 4
-            x: control.leftPadding
+        implicitHeight: 24
+        x: control.width - width - control.rightPadding
         y: parent.height / 2 - height / 2
-            radius: 6
-            color: control.checked ? Theme.palette.primary : Theme.palette.base100
-            Behavior on color {
-                ColorAnimation {
-                    duration: 150
-                }
-            }
-        }
+        radius: 16
+        color: "transparent"
+        border.color: control.checked ? Theme.palette.primary : Theme.palette.basecontent
+        border.width: 2
 
         Rectangle {
-            x: control.checked ? parent.width - 3 * width / 4 : width / 4
+            anchors.margins: 4
+            x: control.checked ? parent.width - width - indicator.padding / 2 : indicator.padding / 2
             y: parent.height / 2 - height / 2
             Behavior on x {
                 NumberAnimation {
-                    duration: 150
+                    duration: 100
                 }
             }
-            width: 22
-            height: 22
-            radius: 6
-            color: Theme.palette.basecontent
+            width: parent.width / 2 - indicator.padding
+            height: parent.height - indicator.padding
+            radius: 16
+            color: control.checked ? Theme.palette.primary : Theme.palette.basecontent
+            // border.color: control.checked ? (control.down ? "#17a81a" : "#21be2b") : "#999999"
         }
     }
+
+    background: undefined
 }

modules/bar/components/bluetooth/BluetoothMenu.qml

@@ -4,7 +4,6 @@ import qs.components
 import qs.config
 import qs.widgets
 import QtQuick
-import QtQuick.Controls
 import QtQuick.Layouts
 import Quickshell
 import Quickshell.Bluetooth
@@ -22,32 +21,22 @@ StyledPopupWindow {
             margin: 16
             Layout.fillWidth: true
             RowLayout {
-                RowLayout {
-                    StyledText {
+                StyledSwitch {
                     text: "Enabled"
-                    }
-
-                    Switch {
                     checkable: !!Bluetooth.defaultAdapter
                     checked: Bluetooth.defaultAdapter?.enabled ?? false
                     onClicked: Bluetooth.defaultAdapter.enabled = checked
                 }
-                }
 
-                RowLayout {
+                StyledSwitch {
                     Layout.alignment: Qt.AlignRight
-                    StyledText {
                     text: "Scan"
-                    }
-
-                    Switch {
                     checkable: !!Bluetooth.defaultAdapter
                     checked: Bluetooth.defaultAdapter?.discovering ?? false
                     onClicked: Bluetooth.defaultAdapter.discovering = checked
                 }
             }
         }
-        }
 
         StyledWrapperRectangle {
             margin: 16

modules/bar/components/notifications/NotificationMenu.qml

@@ -5,7 +5,6 @@ import qs.config
 import qs.services
 import qs.widgets
 import QtQuick
-import QtQuick.Controls
 import QtQuick.Layouts
 
 StyledPopupWindow {
@@ -20,17 +19,14 @@ StyledPopupWindow {
 
         RowLayout {
             Layout.fillWidth: true
-            StyledText {
-                text: "Enabled"
-            }
 
-            Switch {
+            StyledSwitch {
+                text: "Enabled"
                 checked: Notifications.enabled
                 onClicked: Notifications.enabled = checked
             }
 
             StyledButton {
-                id: clearButton
                 Layout.alignment: Qt.AlignRight
                 text: "Clear"
                 onClicked: Notifications.clear()

modules/storybook/Storybook.qml

@@ -62,7 +62,10 @@ StyledWindow {
                     text: "Switch"
                     font.pixelSize: 18
                 }
-                StyledSwitch {}
+
+                StyledSwitch {
+                    text: "Enable"
+                }
             }
 
             ColumnLayout {