1 files changed, 71 insertions, 10 deletions

diff --git a/assets/scss/common/_dark.scss b/assets/scss/common/_dark.scss
index 8d3b126..b5a38c1 100644
--- a/assets/scss/common/_dark.scss
+++ b/assets/scss/common/_dark.scss
@@ -1,10 +1,23 @@
 /** Theme variables */
 
-$body-bg-dark: lighten($black, 10%);
-$body-color-dark: darken($white, 15%);
-$link-color-dark: lighten($primary, 20%);
-$body-overlay-dark: lighten($black, 15%);
-$border-dark: lighten($black, 20%);
+// Source: https://material.io/design/color/dark-theme.html
+
+$body-bg-dark: $gray-900;
+$body-overlay-dark: darken($body-bg-dark, 2.5%);
+$border-dark: darken($body-bg-dark, 2.5%);
+$body-color-dark: $gray-300;
+$dots-dark: darken($body-color-dark, 50%);
+
+$link-color-dark: $blue-300;
+$button-color-dark: $link-color-dark;
+$focus-color-dark: lighten($link-color-dark, 2.5%);
+$selection-color-dark: lighten($link-color-dark, 2.5%);
+
+$navbar-dark-brand-color:           $link-color-dark;
+$navbar-dark-brand-hover-color:     $body-color-dark;
+$navbar-dark-color:                 $body-color-dark;
+$navbar-dark-hover-color:           $link-color-dark;
+$navbar-dark-active-color:          $link-color-dark;
 
 /** Theme styles */
 
@@ -17,8 +30,14 @@ body.dark a {
   color: $link-color-dark;
 }
 
+body.dark a.text-body {
+  color: $body-color-dark !important;
+}
+
 body.dark .btn-primary {
-  color: $body-color-dark;
+  @include button-variant($button-color-dark, $button-color-dark);
+
+  color: $body-bg-dark !important;
 }
 
 body.dark .navbar {
@@ -32,12 +51,12 @@ body.dark.home .navbar {
 }
 
 body.dark .navbar-light .navbar-brand {
-  color: $navbar-dark-brand-color;
+  color: $navbar-dark-brand-color !important;
 }
 
 body.dark .navbar-light .navbar-brand:hover,
 body.dark .navbar-light .navbar-brand:focus {
-  color: $navbar-dark-brand-hover-color;
+  color: $navbar-dark-brand-hover-color !important;
 }
 
 body.dark .navbar-light .navbar-nav .nav-link {
@@ -64,6 +83,15 @@ body.dark .navbar-light .navbar-text {
   color: $navbar-dark-color;
 }
 
+body.dark .alert-primary a {
+  color: $body-bg-dark;
+}
+
+body.dark .alert-warning {
+  background: $body-overlay-dark;
+  color: $body-color-dark;
+}
+
 body.dark .page-links a {
   color: $body-color-dark;
 }
@@ -106,6 +134,14 @@ body.dark .navbar .btn-link:active {
 
 body.dark .form-control.is-search {
   background: $body-overlay-dark;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right calc(0.375em + 0.1875rem) center;
+  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+}
+
+body.dark .form-control:focus {
+  box-shadow: 0 0 0 0.2rem $focus-color-dark;
 }
 
 body.dark .border-top {
@@ -124,7 +160,7 @@ body.dark .docs-navigation {
 }
 
 body.dark ::selection {
-  background: lighten($primary, 25%);
+  background: $selection-color-dark;
 }
 
 body.dark pre {
@@ -138,7 +174,7 @@ body.dark code {
 }
 
 body.dark blockquote {
-  border-left: 3px solid lighten($black, 30%);
+  border-left: 3px solid $border-dark;
 }
 
 body.dark .footer {
@@ -211,3 +247,28 @@ body.dark .navbar .menu-icon .navicon::before,
 body.dark .navbar .menu-icon .navicon::after {
   background: $navbar-dark-color;
 }
+
+body.dark .logo-light {
+  display: none !important;
+}
+
+body.dark .logo-dark {
+  display: inline-block !important;
+}
+
+body.dark .bg-light {
+  background: darken($body-bg-dark, 1.5%) !important;
+}
+
+body.dark .bg-dots {
+  background-image: radial-gradient($dots-dark 15%, transparent 15%);
+}
+
+body.dark .text-muted {
+  color: darken($body-color-dark, 7.5%) !important;
+}
+
+body.dark .alert-primary {
+  background: $link-color-dark;
+  color: $body-bg-dark;
+}