Lock Screen also uses this clock

Modules/Bar/Calendar/AnalogClock.qml

@@ -5,6 +5,8 @@ import Quickshell
 
 Item {
     property var now
+    property color backgroundColor: Color.mPrimary
+    property color clockColor: Color.mOnPrimary
     anchors.fill: parent
 
     Canvas {
@@ -17,8 +19,8 @@ Item {
         property real markAlpha: 0.7
         property color secondHandColor: {
             var defaultColor = Color.mError
-            var backgroundL = Color.mPrimary.hslLightness
-            var hourMarkL = (Color.mOnPrimary.hslLightness * markAlpha) + (backgroundL *(1.0-markAlpha))
+            var backgroundL = backgroundColor.hslLightness
+            var hourMarkL = (clockColor.hslLightness * markAlpha) + (backgroundL *(1.0-markAlpha))
 
             var bestWorstContrast = -1
             var bestColor = defaultColor
@@ -54,7 +56,7 @@ Item {
             var radius = Math.min(width, height) / 2
 
             // Hour marks
-            ctx.strokeStyle = Qt.alpha(Color.mOnPrimary, markAlpha)
+            ctx.strokeStyle = Qt.alpha(clockColor, markAlpha)
             ctx.lineWidth = 2 * Style.uiScaleRatio
             var scaleFactor = 0.7
 
@@ -76,7 +78,7 @@ Item {
             ctx.save()
             var hourAngle = (hours % 12 + minutes / 60) * Math.PI / 6
             ctx.rotate(hourAngle)
-            ctx.strokeStyle = Color.mOnPrimary
+            ctx.strokeStyle = clockColor
             ctx.lineWidth = 3 * Style.uiScaleRatio
             ctx.lineCap = "round"
             ctx.beginPath()
@@ -89,7 +91,7 @@ Item {
             ctx.save()
             var minuteAngle = (minutes + seconds / 60) * Math.PI / 30
             ctx.rotate(minuteAngle)
-            ctx.strokeStyle = Color.mOnPrimary
+            ctx.strokeStyle = clockColor
             ctx.lineWidth = 2 * Style.uiScaleRatio
             ctx.lineCap = "round"
             ctx.beginPath()
@@ -114,7 +116,7 @@ Item {
             // Center dot
             ctx.beginPath()
             ctx.arc(0, 0, 3 * Style.uiScaleRatio, 0, 2 * Math.PI)
-            ctx.fillStyle = Color.mOnPrimary
+            ctx.fillStyle = clockColor
             ctx.fill()
         }
 

Modules/Bar/Calendar/ClockLoader.qml

@@ -7,6 +7,8 @@ Item {
     id: clockRoot
 
     property var now
+    property color backgroundColor: Color.mPrimary
+    property color clockColor: Color.mOnPrimary
 
     height: Math.round((Style.fontSizeXXXL * 1.9) / 2 * Style.uiScaleRatio) * 2
     width: clockRoot.height
@@ -20,6 +22,8 @@ Item {
         onLoaded: {
             // Bind the loaded item's 'now' property to *this* component's 'now' property
             item.now = Qt.binding(function() { return clockRoot.now })
+            item.backgroundColor = Qt.binding(function() { return clockRoot.backgroundColor })
+            item.clockColor = Qt.binding(function() { return clockRoot.clockColor })
         }
     }
 }

Modules/Bar/Calendar/DigitalClock.qml

@@ -5,6 +5,8 @@ import Quickshell
 
 Item {
     property var now
+    property color backgroundColor: Color.mPrimary
+    property color clockColor: Color.mOnPrimary
     anchors.fill: parent
 
     // Digital clock's seconds circular progress
@@ -32,14 +34,14 @@ Item {
             ctx.beginPath()
             ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI)
             ctx.lineWidth = 2.5
-            ctx.strokeStyle = Qt.alpha(Color.mOnPrimary, 0.15)
+            ctx.strokeStyle = Qt.alpha(clockColor, 0.15)
             ctx.stroke()
 
             // Progress arc
             ctx.beginPath()
             ctx.arc(centerX, centerY, radius, -Math.PI / 2, -Math.PI / 2 + progress * 2 * Math.PI)
             ctx.lineWidth = 2.5
-            ctx.strokeStyle = Color.mOnPrimary
+            ctx.strokeStyle = clockColor
             ctx.lineCap = "round"
             ctx.stroke()
         }
@@ -59,7 +61,7 @@ Item {
 
             pointSize: Style.fontSizeXS
             font.weight: Style.fontWeightBold
-            color: Color.mOnPrimary
+            color: clockColor
             family: Settings.data.ui.fontFixed
             Layout.alignment: Qt.AlignHCenter
         }
@@ -68,7 +70,7 @@ Item {
             text: Qt.formatTime(now, "mm")
             pointSize: Style.fontSizeXXS
             font.weight: Style.fontWeightBold
-            color: Color.mOnPrimary
+            color: clockColor
             family: Settings.data.ui.fontFixed
             Layout.alignment: Qt.AlignHCenter
         }