diff --git a/src/views/tasks/TaskDetailViewModal.vue b/src/views/tasks/TaskDetailViewModal.vue
index 507e1d566..9b4932464 100644
--- a/src/views/tasks/TaskDetailViewModal.vue
+++ b/src/views/tasks/TaskDetailViewModal.vue
@@ -2,6 +2,7 @@
 	<modal
 		@close="close()"
 		variant="scrolling"
+		class="task-detail-view-modal"
 	>
 				<a @click="close()" class="close">
 					<icon icon="times"/>
@@ -60,11 +61,11 @@ export default {
 		color: var(--dark);
 	}
 }
+</style>
 
-/* Close icon SVG uses currentColor, change the color to keep it visible */
-@media (prefers-color-scheme: dark) {
-	.close {
-		color: var(--grey-900);
-	}
+<style lang="scss">
+// Close icon SVG uses currentColor, change the color to keep it visible
+.dark .task-detail-view-modal .close {
+	color: var(--grey-900);
 }
 </style>
\ No newline at end of file