Add dark mode for image readers (#241)

* Add dark mode styles and temporary toggle

* Consolidate styles and use sass names

* Fix package-lock.json

* Second try

* Regenerate package-lock.json

Author: rivalee

app/assets/sass/components/_dark-mode.scss

@@ -3,21 +3,18 @@
 $app-dark-mode-blue: #348de0;
 $app-dark-mode-background: #1c1c1c;
 $app-dark-mode-background-secondary: nhsuk-tint($app-dark-mode-background, 10%);
-$app-dark-mode-white: #e8e8e8;
+$app-dark-mode-white: #cfcfcf;
 $app-dark-mode-text-colour: $app-dark-mode-white;
 $app-dark-mode-text-colour-secondary: nhsuk-shade($app-dark-mode-text-colour, 30%);
+$app-dark-mode-surface: #161616;
+$app-dark-mode-border: $app-dark-mode-white;
+$app-dark-mode-banner-border: #015eb8;
 
 // Links
-$app-dark-mode-link-colour: $app-dark-mode-blue;
-$app-dark-mode-link-hover-colour: nhsuk-tint($nhsuk-link-hover-colour, 50%);
-$app-dark-mode-link-active-color: nhsuk-shade($app-dark-mode-link-colour, 20%);
-$app-dark-mode-link-visited-colour: nhsuk-tint($nhsuk-link-visited-colour, 50%);
-
-// Paul's colours
-$app-dark-mode-link-colour: #348de0;
+$app-dark-mode-link-colour: #3892e0;
 $app-dark-mode-link-hover-colour: #ffeb3b;
 $app-dark-mode-link-active-colour: #000;
-$app-dark-mode-link-visited-colour: #89b;
+$app-dark-mode-link-visited-colour: #d055a5;
 
 @mixin app-dark-mode-focused-text {
   background-color: $nhsuk-focus-colour;
@@ -35,7 +32,7 @@ $app-dark-mode-link-visited-colour: #89b;
 }
 
 @mixin app-dark-mode-link-style-default {
-  color: $app-dark-mode-blue;
+  color: $app-dark-mode-link-colour;
 
   &:visited {
     color: $app-dark-mode-link-visited-colour;
@@ -88,7 +85,8 @@ $app-dark-mode-link-visited-colour: #89b;
 
   // Links and link type things
   a,
-  .app-secondary-navigation__link {
+  .app-secondary-navigation__link,
+  .app-button-link {
     @include app-dark-mode-link-style-default;
 
     &:focus {
@@ -175,19 +173,36 @@ $app-dark-mode-link-visited-colour: #89b;
     }
   }
 
+  .nhsuk-button--secondary {
+    box-shadow: 0 4px 0 $app-dark-mode-link-colour;
+    color: $app-dark-mode-link-colour;
+
+    &:link,
+    &:visited,
+    &:active {
+      color: $app-dark-mode-link-colour;
+    }
+
+    &:hover {
+      background-color: $app-dark-mode-surface;
+      box-shadow: 0 4px 0 $app-dark-mode-link-colour;
+      color: $app-dark-mode-link-colour;
+    }
+  }
+
   .nhsuk-header {
     a {
-      color: $app-dark-mode-text-colour;
+      color: #ffffff;
 
       &:visited {
-        color: $app-dark-mode-text-colour;
+        color: #ffffff;
       }
       &:focus {
         @include app-dark-mode-focused-text;
       }
     }
     // background: $app-dark-mode-background-secondary;
-    color: $app-dark-mode-text-colour;
+    color: #ffffff;
 
     .nhsuk-header__account,
     .nhsuk-header__account-item {
@@ -202,7 +217,8 @@ $app-dark-mode-link-visited-colour: #89b;
   }
   // Component overrides
   .nhsuk-card {
-    background: $app-dark-mode-background-secondary;
+    background: $app-dark-mode-surface;
+    border: 1px solid $app-dark-mode-border;
     color: $app-dark-mode-text-colour;
 
     .nhsuk-card__heading--feature {
@@ -213,7 +229,7 @@ $app-dark-mode-link-visited-colour: #89b;
 
   .nhsuk-footer,
   .nhsuk-footer-container {
-    background: $app-dark-mode-background-secondary;
+    background: $app-dark-mode-surface;
     color: $app-dark-mode-text-colour;
 
     .nhsuk-footer__list-item-link,
@@ -225,7 +241,7 @@ $app-dark-mode-link-visited-colour: #89b;
   .nhsuk-radios {
     .nhsuk-radios__input + .nhsuk-radios__label::before {
       border-color: $app-dark-mode-white;
-      background-color: $app-dark-mode-background-secondary;
+      background-color: transparent;
     }
     .nhsuk-radios__input + .nhsuk-radios__label::after {
       background: $app-dark-mode-white;
@@ -235,25 +251,44 @@ $app-dark-mode-link-visited-colour: #89b;
 
   .nhsuk-checkboxes {
     .nhsuk-checkboxes__input + .nhsuk-checkboxes__label::before {
-      // border-color: $app-dark-mode-white;
-      // background-color: $app-dark-mode-background-secondary;
-      background: $app-dark-mode-background-secondary;
-      border-color: $app-dark-mode-text-colour-secondary;
+      background: transparent;
+      border-color: $app-dark-mode-white;
     }
     .nhsuk-checkboxes__input + .nhsuk-checkboxes__label::after {
-      // background: $app-dark-mode-white;
-      // border: 10px solid $app-dark-mode-white;
+      // Checkmark styling
     }
   }
 
   .nhsuk-checkboxes__conditional {
     border-left-color: $app-dark-mode-text-colour-secondary;
   }
 
+  // Text inputs, textareas, and selects
+  .nhsuk-input,
+  .nhsuk-textarea,
+  .nhsuk-select {
+    background-color: transparent;
+    border-color: $app-dark-mode-white;
+    color: $app-dark-mode-text-colour;
+  }
+
   .nhsuk-notification-banner__content {
     color: $app-dark-mode-text-colour;
     background: $app-dark-mode-background-secondary;
   }
+
+  .app-reading-opinion-banner {
+    background: $app-dark-mode-surface;
+    border: 2px solid $app-dark-mode-banner-border;
+    filter: drop-shadow(2px 3px 3px $app-dark-mode-surface);
+  }
+
+  .app-reading-opinion-banner__link,
+  .app-reading-opinion-banner__link:visited,
+  .app-reading-opinion-banner__link:hover,
+  .app-reading-opinion-banner__link:focus {
+    color: $app-dark-mode-link-colour;
+  }
 }
 
 html:has(.app-dark-mode) {

app/views/_templates/layout-base.html

@@ -87,6 +87,10 @@
       {
         href: "javascript:window.MammogramChannel.openViewer()",
         text: "Open PACS viewer"
+      },
+      {
+        href: "?settings[darkMode]=" ~ ('true' if data.settings.darkMode !== 'true' else 'false') ~ "&clearQuery=true",
+        text: "Toggle dark mode"
       }
     ] %}
   {% endif %}