diff --git a/shell/Ui/PanelSeparator.qml b/shell/Ui/PanelSeparator.qml
index 8b38afd6..27a81ec3 100644
--- a/shell/Ui/PanelSeparator.qml
+++ b/shell/Ui/PanelSeparator.qml
@@ -1,4 +1,5 @@
 import QtQuick
+import qs.Commons
 
 // 1px horizontal divider for panel sections. The alpha-on-foreground tint
 // keeps the rule legible against the panel background without competing
@@ -6,7 +7,7 @@ import QtQuick
 Rectangle {
   id: root
 
-  property color foreground: "#cacccc"
+  property color foreground: Color.foreground
   property real strength: 0.12
 
   width: parent ? parent.width : implicitWidth
diff --git a/shell/Ui/PanelSlider.qml b/shell/Ui/PanelSlider.qml
index 710d72d3..019f3d49 100644
--- a/shell/Ui/PanelSlider.qml
+++ b/shell/Ui/PanelSlider.qml
@@ -11,8 +11,8 @@ Item {
   property real step: 0.05
   property bool integer: false
   property color trackColor: bar ? Style.selectedFillFor(bar.foreground, Color.accent) : "#333"
-  property color fillColor: bar ? bar.foreground : "#cacccc"
-  property color knobColor: bar ? bar.foreground : "#cacccc"
+  property color fillColor: bar ? bar.foreground : Color.foreground
+  property color knobColor: bar ? bar.foreground : Color.foreground
   property bool dragging: false
   property real trackHeight: Math.max(4, Math.round(Style.spacing.controlHeight * 0.11))
   property real knobSize: Math.max(14, Math.round(Style.spacing.controlHeight * 0.38))
diff --git a/shell/plugins/bar/widgets/activeWindow.qml b/shell/plugins/bar/widgets/activeWindow.qml
index 49ef4f72..d84d96f3 100644
--- a/shell/plugins/bar/widgets/activeWindow.qml
+++ b/shell/plugins/bar/widgets/activeWindow.qml
@@ -33,8 +33,8 @@ BarWidget {
       anchors.left: parent.left
       width: parent.width
       text: root.title
-      color: root.bar ? root.bar.foreground : "#cacccc"
-      font.family: root.bar ? root.bar.fontFamily : "JetBrainsMono Nerd Font"
+      color: root.bar ? root.bar.foreground : Color.foreground
+      font.family: root.bar ? root.bar.fontFamily : Style.font.family
       font.pixelSize: Style.font.body
       elide: Text.ElideRight
       opacity: 0.85
diff --git a/shell/plugins/bar/widgets/lockKeys.qml b/shell/plugins/bar/widgets/lockKeys.qml
index 272bb594..af67f47c 100644
--- a/shell/plugins/bar/widgets/lockKeys.qml
+++ b/shell/plugins/bar/widgets/lockKeys.qml
@@ -87,8 +87,8 @@ BarWidget {
     property bool active: false
 
     text: glyph
-    color: active ? (root.bar ? root.bar.foreground : "#cacccc") : Qt.rgba(0.7, 0.7, 0.7, 0.3)
-    font.family: root.bar ? root.bar.fontFamily : "JetBrainsMono Nerd Font"
+    color: active ? (root.bar ? root.bar.foreground : Color.foreground) : Qt.rgba(0.7, 0.7, 0.7, 0.3)
+    font.family: root.bar ? root.bar.fontFamily : Style.font.family
     font.pixelSize: Style.font.bodySmall
   }
 }
diff --git a/shell/plugins/bar/widgets/systemStats.qml b/shell/plugins/bar/widgets/systemStats.qml
index 31e020cc..0f40b07c 100644
--- a/shell/plugins/bar/widgets/systemStats.qml
+++ b/shell/plugins/bar/widgets/systemStats.qml
@@ -233,8 +233,8 @@ BarWidget {
     property string title: ""
     property string value: ""
     property var history: []
-    property color barFg: "#cacccc"
-    property string fontFamily: "JetBrainsMono Nerd Font"
+    property color barFg: Color.foreground
+    property string fontFamily: Style.font.family
 
     spacing: Style.space(4)