diff --git a/src/App.vue b/src/App.vue
index d9e922f4f..31b5b7ca9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -167,7 +167,7 @@ export default {
 	}
 
 	.avatardiv.circles {
-		background: var(--color-primary);
+		background: var(--color-primary-element);
 	}
 
 	.icon-circles {
diff --git a/src/BoardSelector.vue b/src/BoardSelector.vue
index cca16fa31..411f5e11b 100644
--- a/src/BoardSelector.vue
+++ b/src/BoardSelector.vue
@@ -110,7 +110,7 @@ export default {
 	}
 
 	li.selected {
-		border: 1px solid var(--color-primary);
+		border: 1px solid var(--color-primary-element);
 	}
 
 	.board-bullet {
diff --git a/src/components/AttachmentDragAndDrop.vue b/src/components/AttachmentDragAndDrop.vue
index 05ba964b8..80bc7d17d 100644
--- a/src/components/AttachmentDragAndDrop.vue
+++ b/src/components/AttachmentDragAndDrop.vue
@@ -136,7 +136,7 @@ export default {
 
 	.dragover {
 		position: absolute;
-		background: var(--color-primary-light);
+		background: var(--color-primary-element-light);
 		z-index: 11;
 		display: flex;
 		border-radius: var(--border-radius);
diff --git a/src/components/card/Description.vue b/src/components/card/Description.vue
index dc8a05668..6df0ac44d 100644
--- a/src/components/card/Description.vue
+++ b/src/components/card/Description.vue
@@ -392,7 +392,7 @@ h5 {
 .CodeMirror-selected,
 .CodeMirror-line::selection, .CodeMirror-line>span::selection, .CodeMirror-line>span>span::selection {
 	background: var(--color-primary-element) !important;
-	color: var(--color-primary-text) !important;
+	color: var(--color-primary-element-text) !important;
 }
 
 .editor-preview,
diff --git a/src/components/cards/CardBadges.vue b/src/components/cards/CardBadges.vue
index ce9d05fc1..704e9fec7 100644
--- a/src/components/cards/CardBadges.vue
+++ b/src/components/cards/CardBadges.vue
@@ -133,7 +133,7 @@ export default {
 
 		&.overdue {
 			background-color: var(--color-error);
-			color: var(--color-primary-text);
+			color: var(--color-primary-element-text);
 			opacity: .7;
 		}
 		&.now {
diff --git a/src/components/cards/badges/DueDate.vue b/src/components/cards/badges/DueDate.vue
index 805edad3c..ad1db8600 100644
--- a/src/components/cards/badges/DueDate.vue
+++ b/src/components/cards/badges/DueDate.vue
@@ -90,7 +90,7 @@ export default {
 
 		&.overdue {
 			background-color: var(--color-error);
-			color: var(--color-primary-text);
+			color: var(--color-primary-element-text);
 			opacity: .7;
 			padding: 3px 4px;
 		}