diff --git a/modules/bar/Bar.qml b/modules/bar/Bar.qml
index f5460ff..bd19260 100644
--- a/modules/bar/Bar.qml
+++ b/modules/bar/Bar.qml
@@ -29,7 +29,7 @@ Variants {
             id: container
             implicitHeight: Settings.config.barHeight
             anchors.fill: parent
-            color: Colors.background
+            color: Colors.surface
             radius: implicitHeight / 2
 
             Row {
diff --git a/modules/bar/Battery.qml b/modules/bar/Battery.qml
index 13f1162..df086d1 100644
--- a/modules/bar/Battery.qml
+++ b/modules/bar/Battery.qml
@@ -15,7 +15,7 @@ Loader {
     sourceComponent: Rectangle {
         id: container
         radius: implicitHeight / 2
-        color: clickHandler.containsMouse ? Colors.color5 : Colors.color6
+        color: clickHandler.containsMouse ? Colors.primary : Colors.secondary
         anchors.verticalCenter: parent.verticalCenter
         implicitWidth: root.implicitWidth + 20
         implicitHeight: Settings.config.barHeight - 10
diff --git a/modules/bar/Clock.qml b/modules/bar/Clock.qml
index 7b330bb..066e9f3 100644
--- a/modules/bar/Clock.qml
+++ b/modules/bar/Clock.qml
@@ -8,7 +8,7 @@ import qs.reusables
 Rectangle {
     id: container
     radius: implicitHeight / 2
-    color: formatSwitch.containsMouse ? Colors.color5 : Colors.color6
+    color: formatSwitch.containsMouse ? Colors.secondaryContainer : Colors.primaryContainer
     anchors.verticalCenter: parent.verticalCenter
     implicitHeight: Settings.config.barHeight - 10
     implicitWidth: root.implicitWidth + 20
diff --git a/modules/bar/Mpris.qml b/modules/bar/Mpris.qml
index eabd70b..f79c89f 100644
--- a/modules/bar/Mpris.qml
+++ b/modules/bar/Mpris.qml
@@ -8,7 +8,7 @@ Rectangle {
     id: container
     visible: root.spotify != null
     radius: implicitHeight / 2
-    color: clickHandler.containsMouse ? Colors.color5 : Colors.color6
+    color: clickHandler.containsMouse ? Colors.secondaryContainer : Colors.primaryContainer
     implicitWidth: root.implicitWidth + 20
     implicitHeight: Settings.config.barHeight - 10
     Item {
diff --git a/modules/bar/Title.qml b/modules/bar/Title.qml
index 9ad5d35..61ae21a 100644
--- a/modules/bar/Title.qml
+++ b/modules/bar/Title.qml
@@ -7,7 +7,7 @@ import qs.reusables
 Rectangle {
     id: container
     radius: implicitHeight / 2
-    color: Colors.color6
+    color: Colors.primaryContainer
     anchors.verticalCenter: parent.verticalCenter
     implicitWidth: root.implicitWidth
     implicitHeight: Settings.config.barHeight - 10
diff --git a/modules/bar/Volume.qml b/modules/bar/Volume.qml
index 269f55d..a03f9b3 100644
--- a/modules/bar/Volume.qml
+++ b/modules/bar/Volume.qml
@@ -9,7 +9,7 @@ import qs
 Rectangle {
     id: container
     radius: implicitHeight / 2
-    color: pavuArea.containsMouse ? Colors.color5 : Colors.color6
+    color: pavuArea.containsMouse ? Colors.secondaryContainer : Colors.primaryContainer
     anchors.verticalCenter: parent.verticalCenter
     implicitWidth: root.implicitWidth + 20
     implicitHeight: Settings.config.barHeight - 10
diff --git a/modules/bar/Workspaces.qml b/modules/bar/Workspaces.qml
index 107a25a..df80b41 100644
--- a/modules/bar/Workspaces.qml
+++ b/modules/bar/Workspaces.qml
@@ -11,6 +11,7 @@ Item {
     implicitWidth: workspaceRow.implicitWidth
     implicitHeight: workspaceRow.implicitHeight
     anchors.verticalCenter: parent.verticalCenter
+    property var screen: screen
     Row {
         id: workspaceRow
         anchors.centerIn: parent
@@ -43,8 +44,7 @@ Item {
                 CustomText {
                     anchors.centerIn: workspaceNumber
                     text: parent.modelData.id
-                    color: Colors.color2 // Set contrasting color for workspace number
-                    opacity: workspaceNumber.modelData.focused ? 1 : 0.5
+                    color: workspaceNumber.modelData.focused ? Colors.onSecondaryContainerColor : Colors.surfaceVariant
                 }
                 MouseArea {
                     anchors.fill: parent
diff --git a/reusables/CustomIcon.qml b/reusables/CustomIcon.qml
index 6520791..15b99b0 100644
--- a/reusables/CustomIcon.qml
+++ b/reusables/CustomIcon.qml
@@ -6,7 +6,7 @@ Text {
     property real fill: 1
     anchors.verticalCenter: parent.verticalCenter
     font.family: "Material Icons Sharp"
-    color: Colors.foreground
+    color: Colors.onSurfaceColor
     font.variableAxes: ({
             FILL: fill.toFixed(1),
             GRAD: -25,
diff --git a/reusables/CustomText.qml b/reusables/CustomText.qml
index 21427d2..7a30e61 100644
--- a/reusables/CustomText.qml
+++ b/reusables/CustomText.qml
@@ -3,7 +3,7 @@ import qs
 import qs.settings
 
 Text {
-    color: Colors.foreground
+    color: Colors.onSurfaceColor
     font.family: Settings.config.font
     font.pixelSize: Settings.config.fontSize
     font.variableAxes: ({