From ac868dd6df9dce8821fff44796ae22840a4b7e6e Mon Sep 17 00:00:00 2001
From: Collin Brown <collinbrown95@gmail.com>
Date: Thu, 20 Aug 2020 21:58:44 -0400
Subject: [PATCH 1/2] Adding style tag to frontend/layouts/project.vue
 Addressing low contrast of markdown editor in dark mode Issue #955

---
 frontend/layouts/project.vue | 39 ++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/frontend/layouts/project.vue b/frontend/layouts/project.vue
index 1ca85007..3120b101 100644
--- a/frontend/layouts/project.vue
+++ b/frontend/layouts/project.vue
@@ -67,3 +67,42 @@ export default {
   }
 }
 </script>
+
+<style>
+/* dark mode styles */
+.theme--dark .tui-editor-contents h1 {
+  color: #fff; /* inversion of #000 */
+}
+.theme--dark .tui-editor-contents h2,
+.theme--dark .tui-editor-contents h3,
+.theme--dark .tui-editor-contents h4,
+.theme--dark .tui-editor-contents h5,
+.theme--dark .tui-editor-contents h6,
+.theme--dark .tui-editor-contents code span {
+  color: #ccc; /* inversion of #333 */
+}
+.theme--dark .tui-editor-contents blockquote {
+  color: #888; /* inversion of #777777 */
+}
+.theme--dark .tui-editor-contents ul,
+.theme--dark .tui-editor-contents menu,
+.theme--dark .tui-editor-contents ol,
+.theme--dark .tui-editor-contents dir,
+.theme--dark .tui-editor-contents p,
+.theme--dark .tui-editor-contents table {
+  color: #aaa; /* inversion of #555555 */
+}
+.theme--dark .tui-editor-contents table td {
+border: #151515; /* inversion of #eaeaea */
+}
+.theme--dark .tui-editor-contents table th {
+  border: #8d8884; /* inversion of #72777b */
+  background-color: #847e7b; /* inversion of #7b8184 */
+}
+.theme--dark .tui-editor-contents pre {
+  background-color: #0a0807; /* inversion of #f5f7f8 */
+}
+.theme--dark .tui-editor-contents code {
+  color: #3e8774; /* inversion of #c1788b */
+}
+</style>

From fc5487b29a9c96844fd6defd2ace73324fd7f8d0 Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Mon, 7 Sep 2020 14:03:03 +0900
Subject: [PATCH 2/2] Move style tag to GuidelineCard.vue

---
 .../organisms/annotation/GuidelineCard.vue    | 39 +++++++++++++++++++
 frontend/layouts/project.vue                  | 39 -------------------
 2 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/frontend/components/organisms/annotation/GuidelineCard.vue b/frontend/components/organisms/annotation/GuidelineCard.vue
index 4f3bda5a..7a62e020 100644
--- a/frontend/components/organisms/annotation/GuidelineCard.vue
+++ b/frontend/components/organisms/annotation/GuidelineCard.vue
@@ -39,3 +39,42 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+/* dark mode styles */
+.theme--dark >>> .tui-editor-contents h1 {
+  color: #fff; /* inversion of #000 */
+}
+.theme--dark >>> .tui-editor-contents h2,
+.theme--dark >>> .tui-editor-contents h3,
+.theme--dark >>> .tui-editor-contents h4,
+.theme--dark >>> .tui-editor-contents h5,
+.theme--dark >>> .tui-editor-contents h6,
+.theme--dark >>> .tui-editor-contents code span {
+  color: #ccc; /* inversion of #333 */
+}
+.theme--dark >>> .tui-editor-contents blockquote {
+  color: #888; /* inversion of #777777 */
+}
+.theme--dark >>> .tui-editor-contents ul,
+.theme--dark >>> .tui-editor-contents menu,
+.theme--dark >>> .tui-editor-contents ol,
+.theme--dark >>> .tui-editor-contents dir,
+.theme--dark >>> .tui-editor-contents p,
+.theme--dark >>> .tui-editor-contents table {
+  color: #aaa; /* inversion of #555555 */
+}
+.theme--dark >>> .tui-editor-contents table td {
+border: #151515; /* inversion of #eaeaea */
+}
+.theme--dark >>> .tui-editor-contents table th {
+  border: #8d8884; /* inversion of #72777b */
+  background-color: #847e7b; /* inversion of #7b8184 */
+}
+.theme--dark >>> .tui-editor-contents pre {
+  background-color: #0a0807; /* inversion of #f5f7f8 */
+}
+.theme--dark >>> .tui-editor-contents code {
+  color: #3e8774; /* inversion of #c1788b */
+}
+</style>
diff --git a/frontend/layouts/project.vue b/frontend/layouts/project.vue
index 3120b101..1ca85007 100644
--- a/frontend/layouts/project.vue
+++ b/frontend/layouts/project.vue
@@ -67,42 +67,3 @@ export default {
   }
 }
 </script>
-
-<style>
-/* dark mode styles */
-.theme--dark .tui-editor-contents h1 {
-  color: #fff; /* inversion of #000 */
-}
-.theme--dark .tui-editor-contents h2,
-.theme--dark .tui-editor-contents h3,
-.theme--dark .tui-editor-contents h4,
-.theme--dark .tui-editor-contents h5,
-.theme--dark .tui-editor-contents h6,
-.theme--dark .tui-editor-contents code span {
-  color: #ccc; /* inversion of #333 */
-}
-.theme--dark .tui-editor-contents blockquote {
-  color: #888; /* inversion of #777777 */
-}
-.theme--dark .tui-editor-contents ul,
-.theme--dark .tui-editor-contents menu,
-.theme--dark .tui-editor-contents ol,
-.theme--dark .tui-editor-contents dir,
-.theme--dark .tui-editor-contents p,
-.theme--dark .tui-editor-contents table {
-  color: #aaa; /* inversion of #555555 */
-}
-.theme--dark .tui-editor-contents table td {
-border: #151515; /* inversion of #eaeaea */
-}
-.theme--dark .tui-editor-contents table th {
-  border: #8d8884; /* inversion of #72777b */
-  background-color: #847e7b; /* inversion of #7b8184 */
-}
-.theme--dark .tui-editor-contents pre {
-  background-color: #0a0807; /* inversion of #f5f7f8 */
-}
-.theme--dark .tui-editor-contents code {
-  color: #3e8774; /* inversion of #c1788b */
-}
-</style>