bar: introduce borderless mode

.config/quickshell/modules/bar/Battery.qml

@@ -8,6 +8,7 @@ import Quickshell.Services.UPower
 
 Rectangle {
     id: root
+    property bool borderless: ConfigOptions.bar.borderless
     readonly property var chargeState: UPower.displayDevice.state
     readonly property bool isCharging: chargeState == UPowerDeviceState.Charging
     readonly property bool isPluggedIn: isCharging || chargeState == UPowerDeviceState.PendingCharge
@@ -18,7 +19,7 @@ Rectangle {
 
     implicitWidth: rowLayout.implicitWidth + rowLayout.spacing * 2
     implicitHeight: 32
-    color: Appearance.colors.colLayer1
+    color: borderless ? "transparent" : Appearance.colors.colLayer1
     radius: Appearance.rounding.small
 
     RowLayout {

.config/quickshell/modules/bar/ClockWidget.qml

@@ -5,9 +5,10 @@ import QtQuick
 import QtQuick.Layouts
 
 Rectangle {
+    property bool borderless: ConfigOptions.bar.borderless
     implicitWidth: rowLayout.implicitWidth + rowLayout.spacing * 6 // idk, text seems nicer w/ more padding
     implicitHeight: 32
-    color: Appearance.colors.colLayer1
+    color: borderless ? "transparent" : Appearance.colors.colLayer1
     radius: Appearance.rounding.small
 
     RowLayout {

.config/quickshell/modules/bar/Media.qml

@@ -11,6 +11,7 @@ import Quickshell.Hyprland
 
 Item {
     id: root
+    property bool borderless: ConfigOptions.bar.borderless
     readonly property MprisPlayer activePlayer: MprisController.activePlayer
     readonly property string cleanedTitle: StringUtils.cleanMusicTitle(activePlayer?.trackTitle) || qsTr("No media")
 
@@ -45,7 +46,7 @@ Item {
         anchors.centerIn: parent
         width: parent.width
         implicitHeight: 32
-        color: Appearance.colors.colLayer1
+        color: borderless ? "transparent" : Appearance.colors.colLayer1
         radius: Appearance.rounding.small
     }
 

.config/quickshell/modules/bar/Resources.qml

@@ -8,9 +8,10 @@ import Quickshell.Io
 import Quickshell.Services.Mpris
 
 Rectangle {
+    property bool borderless: ConfigOptions.bar.borderless
     implicitWidth: rowLayout.implicitWidth + rowLayout.anchors.leftMargin + rowLayout.anchors.rightMargin
     implicitHeight: 32
-    color: Appearance.colors.colLayer1
+    color: borderless ? "transparent" : Appearance.colors.colLayer1
     radius: Appearance.rounding.small
 
     RowLayout {

.config/quickshell/modules/bar/UtilButtons.qml

@@ -7,10 +7,12 @@ import Quickshell.Io
 import Quickshell.Hyprland
 
 Rectangle {
+    id: root
+    property bool borderless: ConfigOptions.bar.borderless
     Layout.alignment: Qt.AlignVCenter
     implicitWidth: rowLayout.implicitWidth + rowLayout.spacing * 2
     implicitHeight: 32
-    color: Appearance.colors.colLayer1
+    color: borderless ? "transparent" : Appearance.colors.colLayer1
     radius: Appearance.rounding.small
 
     RowLayout {

.config/quickshell/modules/bar/Workspaces.qml

@@ -15,6 +15,7 @@ import Qt5Compat.GraphicalEffects
 
 Item {
     required property var bar
+    property bool borderless: ConfigOptions.bar.borderless
     readonly property HyprlandMonitor monitor: Hyprland.monitorFor(bar.screen)
     readonly property Toplevel activeWindow: ToplevelManager.activeToplevel
     
@@ -66,7 +67,7 @@ Item {
         implicitHeight: 32
         implicitWidth: rowLayout.implicitWidth + widgetPadding * 2
         radius: Appearance.rounding.small
-        color: Appearance.colors.colLayer1
+        color: borderless ? "transparent" : Appearance.colors.colLayer1
     }
 
     // Scroll to switch workspaces

.config/quickshell/modules/common/ConfigOptions.qml

@@ -25,6 +25,7 @@ Singleton {
         property int batteryLowThreshold: 20
         property string topLeftIcon: "spark" // Options: distro, spark
         property bool showBackground: true
+        property bool borderless: false
         property QtObject resources: QtObject {
             property bool alwaysShowSwap: true
             property bool alwaysShowCpu: false