Fix dark theme background color of menu on mobile

With the dark theme on small displayes, use a dark background for the
menu as well.

1 files changed, 22 insertions, 21 deletions

diff --git a/web/input/resources/plugins.css b/web/input/resources/plugins.css
index 70d0ec1..ab6198d 100644
--- a/web/input/resources/plugins.css
+++ b/web/input/resources/plugins.css
@@ -280,6 +280,26 @@ img.travis {
 }
 
 /*
+ * Dark scheme.
+ */
+
+@media (prefers-color-scheme: dark) {
+    /*
+     * Loosely based on:
+     *
+     * https://material.io/archive/guidelines/style/color.html#color-themes
+     */
+    body {
+        color: #eee;
+        background-color: #212121;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        color: #eee;
+    }
+}
+
+/*
  * On narrow displays, replace the menu bar with a simple list of items, and
  * omit the GitHub ribbon.
  */
@@ -287,7 +307,7 @@ img.travis {
 @media (max-width: 45em) {
     div#menu {
         padding: 1em;
-        background-color: #fff;
+        background-color: inherit;
         border-bottom: 1px dotted #696969;
     }
 
@@ -298,7 +318,7 @@ img.travis {
 
     div#menu span#current {
         color: #5a95c7;
-        background-color: #fff;
+        background-color: inherit;
     }
 
     div#menu a {
@@ -311,22 +331,3 @@ img.travis {
         display: none;
     }
 }
-
-/*
- * Dark scheme.
- */
-@media (prefers-color-scheme: dark) {
-    /*
-     * Loosely based on:
-     *
-     * https://material.io/archive/guidelines/style/color.html#color-themes
-     */
-    body {
-        color: #eee;
-        background-color: #212121;
-    }
-
-    h1, h2, h3, h4, h5, h6 {
-        color: #eee;
-    }
-}