diff --git a/src/components/input/datepicker.vue b/src/components/input/datepicker.vue
index 729a39fb62..27a35d4863 100644
--- a/src/components/input/datepicker.vue
+++ b/src/components/input/datepicker.vue
@@ -294,7 +294,7 @@ export default defineComponent({
 			}
 
 			&:hover {
-				background: var(--light);
+				background: var(--grey-100);
 			}
 
 			.text {
diff --git a/src/components/list/partials/list-card.vue b/src/components/list/partials/list-card.vue
index cfa34fc852..f3fda09c1c 100644
--- a/src/components/list/partials/list-card.vue
+++ b/src/components/list/partials/list-card.vue
@@ -106,7 +106,7 @@ function toggleFavoriteList(list: ListModel) {
 	overflow: hidden;
 
 	&.has-light-text .title {
-		color: var(--light);
+		color: var(--grey-100);
 	}
 
 	&.has-background, .list-background {
diff --git a/src/components/tasks/gantt-component.vue b/src/components/tasks/gantt-component.vue
index af7a21ad22..cb2298cfea 100644
--- a/src/components/tasks/gantt-component.vue
+++ b/src/components/tasks/gantt-component.vue
@@ -520,14 +520,14 @@ $gantt-vertical-border-color: var(--grey-100);
 				}
 
 				&.has-light-text {
-					color: var(--light);
+					color: var(--grey-100);
 
 					&.done span:after {
-						border-top: 1px solid var(--light);
+						border-top: 1px solid var(--grey-100);
 					}
 
 					.edit-toggle {
-						color: var(--light);
+						color: var(--grey-100);
 					}
 				}