diff --git a/src/components/NcSettingsSection/NcSettingsSection.vue b/src/components/NcSettingsSection/NcSettingsSection.vue
index 4e96eb51dc..6d164e9766 100644
--- a/src/components/NcSettingsSection/NcSettingsSection.vue
+++ b/src/components/NcSettingsSection/NcSettingsSection.vue
@@ -154,17 +154,17 @@ $maxWidth: 900px;
 		// make sure to properly align the icon with the text
 		margin: -$icon-margin;
 		margin-left: 0;
-		opacity: $opacity_normal;
+		color: var(--color-text-maxcontrast);
 
 		&:hover, &:focus, &:active {
-			opacity: $opacity_full;
+			color: var(--color-main-text);
 		}
 	}
 
 	&__desc {
 		margin-top: -.2em;
 		margin-bottom: 1em;
-		opacity: $opacity_normal;
+		color: var(--color-text-maxcontrast);
 		max-width: $maxWidth;
 	}
 }