Move dark color for modal close icon into scoped styles

2021-11-08 13:48:54 +00:00 · 2021-11-08 13:48:54 +00:00 · 6877ca30a1
parent f5f00bf46e
commit 6877ca30a1
2 changed files with 7 additions and 5 deletions
--- a/src/styles/variables/colors.scss
+++ b/src/styles/variables/colors.scss
@ -94,10 +94,5 @@
    --text-invert: #000;
    --text-light: var(--grey-300);
    --text-strong: var(--grey-900);
-
-      // svg uses currentColor, change the color to keep the modal close X visible
-      .close {
-        color: var(--grey-900);
-      }
  }
 }
--- a/src/views/tasks/TaskDetailViewModal.vue
+++ b/src/views/tasks/TaskDetailViewModal.vue
@ -60,4 +60,11 @@ export default {
 		color: var(--dark);
 	}
 }
+
+/* Close icon SVG uses currentColor, change the color to keep it visible */
+@media (prefers-color-scheme: dark) {
+	.close {
+		color: var(--grey-900);
+	}
+}
 </style>