dark-mode: adjust the background

In dark mode, we do not actually want the textured background. Also, the
sidebar needs to be adjusted, it had a hard-coded, very bright
background.

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

Author: dscho

assets/sass/dark-mode.css

@@ -14,6 +14,8 @@
     $highlight-bg-color:      #eee0b5;
     $black-3:                 #333333;
     $main-bg:                 #fcfcfa;
+    $bg-color:                #f0efe7 url($baseurl + "images/bg/body.jpg");
+    $sidebar-bg-color:        #efefe7;
 
     @if $mode == dark {
         $orange:                  #d7834f;
@@ -29,6 +31,8 @@
         $highlight-bg-color:      #7d724f;
         $black-3:                 #cccccc;
         $main-bg:                 #333333;
+        $bg-color:                #2a2a2aff;
+        $sidebar-bg-color:        #3d3d3a;
     }
 
     :root#{$theme} {
@@ -56,6 +60,8 @@
 
         --black-3:                      #{$black-3};
         --main-bg:                      #{$main-bg};
+        --sidebar-bg-color:             #{$sidebar-bg-color};
+        --bg-color:                     #{$bg-color};
     }
 }
 

assets/sass/errors.scss

@@ -6,7 +6,7 @@ body {
   line-height: $base-line-height;
   font-family: $base-font-family;
   color: var(--font-color);
-  background: #f0efe7 url($baseurl + "images/bg/body.jpg");
+  background: var(--bg-color);
 }
 
 // windows chrome makes a mess of Adelle web font

assets/sass/layout.scss

@@ -8,7 +8,7 @@ body {
   font-size: $base-font-size;
   line-height: $base-line-height;
   color: var(--font-color);
-  background: #f0efe7 url($baseurl + "images/bg/body.jpg");
+  background: var(--bg-color);
 }
 
 // windows chrome makes a mess of Adelle web font

assets/sass/mixins.scss

@@ -82,7 +82,7 @@
 }
 
 @mixin responsive-sidebar-ui {
-  background-color: #efefe7;
+  background-color: var(--sidebar-bg-color);
   z-index: 305;
   left: 0;
   box-shadow: 6px 2px 8px 0px rgba(28,28,28,0.10%);