dark mode: adjust some border colors

The light mode colors of the borders around e.g. the options of Git
commands in their synopsis are unpleasantly bright in dark mode; Let's
adjust them to be less sore on the eye.

Signed-off-by: Johannes Schindelin <[email protected]>

Author: dscho

assets/sass/application.scss

@@ -36,7 +36,7 @@ code {
 
 pre {
   background-color: var(--main-bg);
-  border: solid 1px #efeee6;
+  border: solid 1px var(--pre-border);
   border-radius: 3px;
   color: var(--orange);
   display: block;

assets/sass/dark-mode.css

@@ -14,13 +14,17 @@
     $base-border-color:       #d8d7cf;
     $callout-color:           #e9e8e0;
     $highlight-bg-color:      #eee0b5;
+    $pre-border:              #efeee6;
     $black-3:                 #333333;
     $main-bg:                 #fcfcfa;
+    $main-border:             #e2e0d8;
     $bg-color:                #f0efe7 url($baseurl + "images/bg/body.jpg");
     $sidebar-bg-color:        #efefe7;
     $no-changes-bg-color:     #f5f5f3;
     $dropdown-active-bg-color: #fff;
     $versions-footer-bg-color: #eae9e0;
+    $search-border:           #ceccc5;
+    $search-focus-border:     #007175;
 
     @if $mode == dark {
         $orange:                  #d7834f;
@@ -36,13 +40,17 @@
         $base-border-color:       #b3b2a7;
         $callout-color:           #555555;
         $highlight-bg-color:      #7d724f;
+        $pre-border:              #494945;
         $black-3:                 #cccccc;
         $main-bg:                 #333333;
+        $main-border:             #5e5e5a;
         $bg-color:                #2a2a2aff;
         $sidebar-bg-color:        #3d3d3a;
         $no-changes-bg-color:     #515150;
         $dropdown-active-bg-color: #515150;
         $versions-footer-bg-color: #1f1f1e;
+        $search-border:           #5e5e5a;
+        $search-focus-border:     #ceccc5;
 
         :root#{$theme} {
             div#masthead {
@@ -137,14 +145,18 @@
         --base-border-color-lighter-10: #{lighten($base-border-color, 10%)};
         --callout-color:                #{$callout-color};
         --highlight-bg-color:           #{$highlight-bg-color};
+        --pre-border:                   #{$pre-border};
 
         --black-3:                      #{$black-3};
         --main-bg:                      #{$main-bg};
+        --main-border:                  #{$main-border};
         --sidebar-bg-color:             #{$sidebar-bg-color};
         --bg-color:                     #{$bg-color};
         --no-changes-bg-color:          #{$no-changes-bg-color};
         --dropdown-active-bg-color:     #{$dropdown-active-bg-color};
         --versions-footer-bg-color:     #{$versions-footer-bg-color};
+        --search-border:                #{$search-border};
+        --search-focus-border:          #{$search-focus-border};
     }
 }
 

assets/sass/forms.scss

@@ -1,5 +1,6 @@
 @import "variables";
 @import "mixins";
+@import "dark-mode";
 
 \::-webkit-input-placeholder {
   color: #9a9994 !important;
@@ -39,7 +40,7 @@ form#search {
   padding-left: 32px;
   @include background-image-2x($baseurl + "images/icons/search", 17px, 17px, 10px 50%);
   background-color: var(--main-bg) !important;
-  border: solid 1px #ceccc5;
+  border: solid 1px var(--search-border);
   @include border-radius(20px);
   @include box-shadow(inset 0 1px 4px #ddd);
 
@@ -56,7 +57,7 @@ form#search {
   }
 
   &.focus {
-    border-color: #007175;
+    border-color: var(--search-focus-border);
     background-color: var(--main-bg);
   }
 }

assets/sass/layout.scss

@@ -1,5 +1,6 @@
 @import "variables";
 @import "mixins";
+@import "dark-mode";
 
 body {
   padding: 0;
@@ -41,7 +42,7 @@ aside {
   padding: 22px;
   margin-bottom: 35px;
   background-color: var(--main-bg);
-  border: solid 1px #e2e0d8;
+  border: solid 1px var(--main-border);
   @include border-radius(5px);
 
   .two-column {

assets/sass/typography.scss

@@ -1,5 +1,6 @@
 @import "variables";
 @import "mixins";
+@import "dark-mode";
 
 // BODY TEXT
 // ---------
@@ -261,7 +262,7 @@ code {
   font-variant-ligatures: none;
   color: var(--orange);
   background-color: var(--main-bg);
-  border: solid 1px #efeee6;
+  border: solid 1px var(--pre-border);
 }
 
 // Quotes