dark theme improvements

about.json

@@ -18,7 +18,7 @@
     "moz://a dark": {
       "primary": "ffffff",
       "secondary": "28292a",
-      "tertiary": "0060df",
+      "tertiary": "00b3f4",
       "quaternary": "ffffff",
       "header_background": "28292a",
       "header_primary": "ffffff",

common/common.scss

@@ -116,32 +116,32 @@ tr[data-category-id="275"] {
 }
 
 .btn.btn-primary, .btn#create-topic {
-  color: $secondary;
-  background: $tertiary;
+  color: $white-text;
+  background: $button-blue;
   border-color: transparent;
 
   .d-icon {
-    color: $secondary;
+    color: $white-text;
   }
 
   &:hover, &.btn-hover, &:active, &.btn-active {
-    color: $tertiary;
+    color: $primary;
     background: $secondary;
-    border-color: $tertiary;
+    border-color: $button-blue;
 
     .d-icon {
-      color: $tertiary;
+      color: $primary;
     }
   }
 }
 
 .btn.btn-danger {
-  color: $secondary;
+  color: $white-text;
   background: $danger;
   border-color: transparent;
 
   .d-icon {
-    color: $secondary;
+    color: $white-text;
   }
 
   &:hover, &.btn-hover, &:active, &.btn-active {
@@ -339,17 +339,17 @@ body .profiler-results.profiler-left {
 /* Dinopark-style alert banners */
 
 .alert.alert-info {
-  background-color: $tertiary;
-  color: $secondary;
+  background-color: $button-blue;
+  color: $white-text;
   text-align: center;
 
   a {
-    color: $secondary;
+    color: $white-text;
     text-decoration: underline;
   }
 
   .close {
-    color: $secondary;
+    color: $white-text;
     margin-right: 4px;
   }
 }
@@ -360,4 +360,39 @@ body .profiler-results.profiler-left {
   #site-logo {
     filter: invert(1);
   }
+
+  .user-main .staff-counters {
+    background-color: $highlight;
+
+    div a {
+      color: $white-text;
+    }
+  }
+
+  .menu-panel {
+    li,
+    li.heading {
+      a.widget-link {
+        &:hover,
+        &:focus {
+          background-color: $highlight;
+        }
+      }
+    }
+  }
+
+  .user-menu {
+    .notifications {
+      li {
+        &:hover,
+        &:focus {
+          background-color: $highlight;
+        }
+      }
+    }
+  }
+
+  .select-kit .select-kit-row.is-selected {
+    background: $highlight;
+  }
 }

scss/variables.scss

@@ -6,6 +6,8 @@ $border-radius: 4px;
 $main-outlet-shadow: 0 0.25em 0.25em 0 hsla(0,0%,82.4%,0.5);
 $header-border: #d7d7db;
 $light-text: #737373;
+$white-text: #fff;
+$button-blue: $tertiary;
 
 $transparentBlue: rgba(69,161,255,0.54);
 $focusOutlineShadow: 0px 0 0 1px $tertiary,0 0 0 3px $transparentBlue;
@@ -13,4 +15,6 @@ $focusOutlineShadow: 0px 0 0 1px $tertiary,0 0 0 3px $transparentBlue;
 @if $dark-theme == "true" {
   $main-outlet-shadow: 0 0.25em 0.25em 0 hsla(0,0%,17.6%,0.5);
   $header-border: #000000;
+  $light-text: #d7d7db;
+  $button-blue: #054096;
 }