Issue #expressjs#1382

- add darkmode icon
- add darkmmode JS file after body

_includes/head.html

@@ -6,7 +6,7 @@
     <meta name="og:image" content="https://expressjs.com/images/express-facebook-share.png">
     <link rel="icon" type="image/png" href="/images/favicon.png" />
     <link rel="stylesheet" href="/css/style.css?_={{ site.time | date: '%s' }}">
-    <link rel="stylesheet" href="/css/darkmode.css?_={{ site.time | date: '%s' }}">
+    <link rel="stylesheet" href="/css/theme.css?_={{ site.time | date: '%s' }}">
     <link rel="stylesheet" href="/css/dropit.css">
     <link rel="stylesheet" href="/css/prism.css">
     <link rel="stylesheet" href="/css/font-awesome.min.css">

_includes/header/header-en.html

@@ -8,7 +8,7 @@
   </div>
   <section id="logo"><a href="/" class="express">Express</a>
   </section>
-  <div id="navbar">
+   <div id="navbar">
       <input id="q" placeholder="🔎 search">
       <ul id="navmenu">
           <li><a href="/" id="home-menu"{% if page.menu == 'home' %} class="active"{% endif %}>Home</a></li>
@@ -174,5 +174,8 @@
           </li>
         -->
       </ul>
+      <div id="theme-icon-container"  class="theme-toggle" title="switch to dark mode">
+        <i class="fa fa-moon-o fa-2x"></i>
+      </div> 
   </div>
 </header>

_layouts/home.html

@@ -19,7 +19,7 @@
     {{ content }}
 
     {% include footer/footer-{{ page.lang }}.html %}
-
+    <script data-cfasync="false" src="../js/theme.js"></script>
   </body>
 
 </html>

css/theme.css

@@ -0,0 +1,26 @@
+:root {
+    --main_dark_bg: #010409;
+    --second_dark_bg: #0d1117;
+    --dark_text: #e6edf3;
+  }
+#theme-icon-container {
+  float : right;
+  background-color: var(--second_dark_bg);
+  color:white;
+  min-width: 50px;
+}
+.dark-mode-body {
+    background: var(--main_dark_bg);
+    --dark_text: whitesmoke;
+    background: var(--main_dark_bg);
+    color: var(--dark_text);
+  }
+  #blm-banner.dark-mode {
+    background-color: var(--main_dark_bg);
+    /* color: var(--dark_text); */
+  }
+  header {
+    background-color: var(--second_dark_bg);
+    color: var(--dark_text);
+
+  }

js/theme.js

@@ -0,0 +1,4 @@
+
+// theme toggle
+const darkModeToggle = document.querySelector('.theme-toggle');
+console.log(darkModeToggle);