fix dark mode colours (#1182)

![image](https://github.com/user-attachments/assets/f12a0c37-df4e-4bb2-b9e0-9611ec3fc5bd)
RaspberryPiFoundation · Jan 30, 2025 · e072598 · e072598
1 parent a339606
commit e072598
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -24,6 +24,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Allow `instructions` attribute to override instructions attached to the project (#1169)
 - Instructions tabs for edit and viewing (#1167)
 - Add remove instructions button modal (#1176)
+- Dark mode colours (#1182)
 
 ### Changed
 

diff --git a/src/assets/stylesheets/Instructions.scss b/src/assets/stylesheets/Instructions.scss
@@ -14,6 +14,10 @@
     margin: 0;
   }
 
+  a {
+    color: var(--editor-color-theme-secondary);
+  }
+
   strong {
     font-weight: $font-weight-bold;
   }
@@ -263,7 +267,7 @@
   }
 
   .project-instructions__empty {
-    background-color: $rpf-teal-100;
+    background-color: var(--editor-color-layer-1);
     border-radius: $space-0-5;
     display: flex;
     flex-direction: column;
@@ -292,11 +296,11 @@
     }
 
     .react-tabs__tab {
-      background: var(--rpf-off-white);
+      background: var(--editor-color-tab-background);
       padding-inline: var(--space-1-5);
 
       &--selected {
-        background: var(--rpf-white);
+        background: var(--editor-color-layer-3);
       }
     }
 
@@ -309,6 +313,8 @@
     textarea {
       @include typography.style-1();
 
+      background: var(--editor-color-layer-3);
+      color: var(--editor-color-text);
       border: none;
       block-size: 100%;
       overflow-block: scroll;

diff --git a/src/assets/stylesheets/InternalStyles.scss b/src/assets/stylesheets/InternalStyles.scss
@@ -103,6 +103,7 @@ button:focus-visible {
   --editor-color-theme-tertiary: #{$rpf-teal-100};
   --editor-color-text: #{$rpf-text-primary};
   --editor-color-text-secondary: #{$rpf-text-secondary};
+  --editor-color-tab-background: #{$rpf-off-white};
 }
 
 .--dark {
@@ -116,6 +117,7 @@ button:focus-visible {
   --editor-color-text: #{$rpf-white};
   --editor-color-text-secondary: #{$rpf-text-secondary-darkmode};
   --rpf-button-secondary-text-color: #{$rpf-white};
+  --editor-color-tab-background: #{$rpf-grey-700};
 
   .rpf-button--secondary {
     border-color: $rpf-navy-800;}