Fix contrast on dark mode instructions code block (#1187)

closes
RaspberryPiFoundation/digital-editor-issues#416

Author: loiswells97

CHANGELOG.md

@@ -21,6 +21,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Instructions tabs for edit and viewing (#1167)
 - Add remove instructions button modal (#1176)
 - Dark mode colours (#1182)
+- Dark mode for instuctions code block (#1187)
 
 ### Changed
 

src/assets/stylesheets/Instructions.scss

@@ -42,6 +42,7 @@
 
   pre {
     background-color: $rpf-grey-700;
+    border: 1px solid $rpf-grey-600;
     border-radius: 8px;
     padding: $space-0-5 $space-1;
     overflow: auto;
@@ -56,11 +57,12 @@
   }
 
   .c-project-code {
-    margin: $space-1 0 $space-1-5 0;
-    border-radius: 8px;
     background-color: $rpf-grey-700;
+    border-radius: 8px;
+    margin: $space-1 0 $space-1-5 0;
 
     pre {
+      border: none;
       margin: 0;
     }
 
@@ -280,6 +282,15 @@
   }
 }
 
+.--dark .project-instructions {
+  pre {
+    background-color: $rpf-grey-850;
+  }
+  code {
+    background-color: $rpf-grey-850;
+  }
+}
+
 #app,
 #wc {
   .c-instruction-tabs {