Darkmode and layout fixes

Author: vsalvino

CONTRIBUTORS.md

@@ -6,7 +6,7 @@
 -   Tibor Leupold
 -   Coen van der Kamp
 -   Paarth Agarwal
--   Vince Salvo
+-   Vince Salvino
 -   LB (Ben) Johnston
 
 ## Sphinx Typo3 theme

sass/_component_search.scss

@@ -91,7 +91,7 @@
 
     &:last-child {
       padding-bottom: 0;
-      border-bottom-color: transparent;
+      border: unset;
     }
   }
 

sass/_darkmode.scss

@@ -4,7 +4,6 @@
 /// background/foreground overrides, implement the relevant dark mode code in
 /// the component's scss file.
 
-
 // Utilities during light mode.
 .dark-only {
   display: none;
@@ -19,6 +18,7 @@ body.theme-dark {
   color: $darkmode-color;
   background-color: $darkmode-bg;
 
+  .btn-link,
   a {
     color: $darkmode-color;
 
@@ -67,6 +67,15 @@ body.theme-dark {
     color: $darkmode-color-darker;
   }
 
+  // Quotes
+  blockquote {
+    border-color: $darkmode-bg-lighter;
+
+    .attribution {
+      color: $darkmode-color-darker;
+    }
+  }
+
   // Search
   .autocomplete {
     background-color: $darkmode-bg;
@@ -77,6 +86,32 @@ body.theme-dark {
     }
   }
 
+  // Borders
+  hr,
+  .border,
+  .border-top,
+  .border-right,
+  .border-bottom,
+  .border-left,
+  .search li {
+    border-color: $darkmode-bg-lighter !important;
+    border-width: 2px !important;
+  }
+
+  // Tables
+  table.docutils {
+    &:not(.field-list) {
+      border: 0;
+      @extend .table-dark;
+      @extend .table-bordered;
+      @extend .table-striped;
+
+      thead {
+        @extend .thead-dark;
+      }
+    }
+  }
+
   // Re-define light Bootstrap elements.
   .btn-light {
     color: color-yiq($darkmode-bg-lighter);
@@ -87,7 +122,7 @@ body.theme-dark {
     &:focus,
     &:focus-within,
     &:not(:disabled):not(.disabled):active,
-    &:not(:disabled):not(.disabled).active, {
+    &:not(:disabled):not(.disabled).active {
       color: color-yiq($primary);
       background-color: $primary;
     }
@@ -100,7 +135,7 @@ body.theme-dark {
   }
 
   .form-control:focus {
-    box-shadow: 0 0 0 0.2rem rgb(211 211 211 / 50%)
+    box-shadow: 0 0 0 0.2rem rgb(211 211 211 / 50%);
   }
 
   .form-control::placeholder {
@@ -115,4 +150,8 @@ body.theme-dark {
       background-color: $darkmode-bg-lighter !important;
     }
   }
+
+  code {
+    color: $darkmode-code;
+  }
 }

sass/_layout.scss

@@ -13,4 +13,5 @@ li > p {
 *:focus {
   outline: 3px solid $focus-outline !important;
   outline-offset: 1px;
+  box-shadow: none;
 }

sass/_variables.scss

@@ -41,12 +41,14 @@ $link-alternate-hover-color: color.adjust(
   $lightness: -15%
 );
 
-$table-bg: $white;
-
 $yiq-contrasted-threshold: 160;
 
 $focus-outline: #1f7e9a;
 
+// --------------------------------------------------
+// Dark mode colors
+// --------------------------------------------------
+
 $darkmode-color: rgba(255, 255, 255, 0.8);
 $darkmode-color-darker: rgba(255, 255, 255, 0.6);
 $darkmode-bg: color.adjust($primary, $lightness: -15%);
@@ -55,6 +57,10 @@ $darkmode-danger: color.adjust($danger, $lightness: -25%);
 $darkmode-info: color.adjust($info, $lightness: -15%);
 $darkmode-success: color.adjust($success, $lightness: -30%);
 $darkmode-warning: color.adjust($warning, $lightness: -18%);
+$darkmode-code: #fe587c;
+
+$table-dark-color: $darkmode-color;
+$table-dark-bg: $darkmode-bg;
 
 // --------------------------------------------------
 // Code Colors