Add Dark Mode (#1490)

* Issue ##1382 - init commit - add darkmode.css file and include * Issue ##1382 - add darkmode icon - add darkmmode JS file after body * Issue ##1382: work on JS and CSS * Issue ##1382 - futher changes to dark mode CSS for index - futher changes to dark mode JS for index * Issue ##1382 - add hover state styles - complete most of index page * Issue ##1382 - Get page layout script tag path to work - clean out CSS to nest under body.dark-mode * Issue ##1382 - add styles for hello-world, routing, generator - hello-world not possible to style iframe * Issue #1382 - complete all CSS for all Getting Started pages * Issue #1382 - add all script tags - finish JS file - finish all CSS for pages * issue #1382 - fix whitespace * issue #1382 - add css to search bar drop down - rearrange css file and add comments * issue #1382 - add check for local storage * issue #1382 -add css to add header html * issue #1382 - add hover color on search bar results - fix search bar width on FR, DE, RU, UZ pages caused by adding moon icon to navbar * issue #1382 - remove error line css - add system style check - remove local storage use until toggled * issue #1382 - clean up comments in theme js - wrap system theme check in function * Issue #1490 - remove bands on dropdowns - slight fix to first "installing" drop down * Issue #1490 - rejig JS - add listener to mediaQuery - make latest change be the override * Issue #1490 - fix forgotten merge conflict line in header uz & ru
expressjs · May 2, 2024 · a09123f · a09123f
1 parent f2889fe
commit a09123f
Show file tree

Hide file tree

Showing 26 changed files with 368 additions and 3 deletions.
diff --git a/_includes/head.html b/_includes/head.html
@@ -6,6 +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/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">

diff --git a/_includes/header/header-de.html b/_includes/header/header-de.html
@@ -124,5 +124,8 @@
               </ul>
           </li>
       </ul>
+      <div id="theme-icon-container"  class="theme-toggle default-theme" title="toggle darkmode">
+        <i class="fa fa-moon-o fa-2x"></i>
+      </div> 
   </div>
 </header>
diff --git a/_includes/header/header-en.html b/_includes/header/header-en.html
@@ -157,5 +157,8 @@
           </li>
         -->
       </ul>
+      <div id="theme-icon-container"  class="theme-toggle default-theme" title="toggle darkmode">
+        <i class="fa fa-moon-o fa-2x"></i>
+      </div> 
   </div>
 </header>
diff --git a/_includes/header/header-es.html b/_includes/header/header-es.html
@@ -124,5 +124,8 @@
               </ul>
           </li>
       </ul>
+      <div id="theme-icon-container"  class="theme-toggle default-theme" title="toggle darkmode">
+        <i class="fa fa-moon-o fa-2x"></i>
+      </div> 
   </div>
 </header>
diff --git a/_includes/header/header-fr.html b/_includes/header/header-fr.html
@@ -124,5 +124,8 @@
               </ul>
           </li>
       </ul>
+      <div id="theme-icon-container"  class="theme-toggle default-theme" title="toggle darkmode">
+        <i class="fa fa-moon-o fa-2x"></i>
+      </div> 
   </div>
 </header>
diff --git a/_includes/header/header-it.html b/_includes/header/header-it.html
@@ -121,5 +121,8 @@
               </ul>
           </li>
       </ul>
+      <div id="theme-icon-container"  class="theme-toggle default-theme" title="toggle darkmode">
+        <i class="fa fa-moon-o fa-2x"></i>
+      </div> 
   </div>
 </header>
diff --git a/_includes/header/header-ja.html b/_includes/header/header-ja.html
@@ -124,5 +124,8 @@
               </ul>
           </li>
       </ul>
+      <div id="theme-icon-container"  class="theme-toggle default-theme" title="toggle darkmode">
+        <i class="fa fa-moon-o fa-2x"></i>
+      </div> 
   </div>
 </header>
diff --git a/_includes/header/header-ko.html b/_includes/header/header-ko.html
@@ -124,5 +124,8 @@
               </ul>
           </li>
       </ul>
+      <div id="theme-icon-container"  class="theme-toggle default-theme" title="toggle darkmode">
+        <i class="fa fa-moon-o fa-2x"></i>
+      </div> 
   </div>
 </header>
diff --git a/_includes/header/header-pt-br.html b/_includes/header/header-pt-br.html
@@ -124,5 +124,8 @@
               </ul>
           </li>
       </ul>
+      <div id="theme-icon-container"  class="theme-toggle default-theme" title="toggle darkmode">
+        <i class="fa fa-moon-o fa-2x"></i>
+      </div> 
   </div>
 </header>
diff --git a/_includes/header/header-ru.html b/_includes/header/header-ru.html
@@ -124,5 +124,8 @@
               </ul>
           </li>
       </ul>
+      <div id="theme-icon-container"  class="theme-toggle default-theme" title="toggle darkmode">
+        <i class="fa fa-moon-o fa-2x"></i>
+      </div> 
   </div>
 </header>
diff --git a/_includes/header/header-sk.html b/_includes/header/header-sk.html
@@ -123,5 +123,8 @@
                 </ul>
             </li>
         </ul>
+        <div id="theme-icon-container"  class="theme-toggle default-theme" title="toggle darkmode">
+            <i class="fa fa-moon-o fa-2x"></i>
+          </div> 
     </div>
 </header>
diff --git a/_includes/header/header-th.html b/_includes/header/header-th.html
@@ -146,5 +146,8 @@
           </li>
         -->
       </ul>
+      <div id="theme-icon-container"  class="theme-toggle default-theme" title="toggle darkmode">
+        <i class="fa fa-moon-o fa-2x"></i>
+      </div> 
   </div>
 </header>
diff --git a/_includes/header/header-tr.html b/_includes/header/header-tr.html
@@ -146,5 +146,8 @@
           </li>
         -->
       </ul>
+      <div id="theme-icon-container"  class="theme-toggle default-theme" title="toggle darkmode">
+        <i class="fa fa-moon-o fa-2x"></i>
+      </div> 
   </div>
 </header>
diff --git a/_includes/header/header-uk.html b/_includes/header/header-uk.html
@@ -121,5 +121,8 @@
               </ul>
           </li>
       </ul>
+      <div id="theme-icon-container"  class="theme-toggle default-theme" title="toggle darkmode">
+        <i class="fa fa-moon-o fa-2x"></i>
+      </div> 
   </div>
 </header>
diff --git a/_includes/header/header-uz.html b/_includes/header/header-uz.html
@@ -124,5 +124,8 @@
               </ul>
           </li>
       </ul>
+      <div id="theme-icon-container"  class="theme-toggle default-theme" title="toggle darkmode">
+        <i class="fa fa-moon-o fa-2x"></i>
+      </div> 
   </div>
 </header>
diff --git a/_includes/header/header-zh-cn.html b/_includes/header/header-zh-cn.html
@@ -124,5 +124,8 @@
               </ul>
           </li>
       </ul>
+      <div id="theme-icon-container"  class="theme-toggle default-theme" title="toggle darkmode">
+        <i class="fa fa-moon-o fa-2x"></i>
+      </div> 
   </div>
 </header>
diff --git a/_includes/header/header-zh-tw.html b/_includes/header/header-zh-tw.html
@@ -123,5 +123,8 @@
               </ul>
           </li>
       </ul>
+      <div id="theme-icon-container"  class="theme-toggle default-theme" title="toggle darkmode">
+        <i class="fa fa-moon-o fa-2x"></i>
+      </div> 
   </div>
 </header>
diff --git a/_layouts/3x-api.html b/_layouts/3x-api.html
@@ -22,6 +22,8 @@
     </section>
 
     {% include footer/footer-{{ page.lang }}.html %}
+    <script src="/js/theme.js"></script>
+
 
   </body>
 

diff --git a/_layouts/4x-api.html b/_layouts/4x-api.html
@@ -22,6 +22,7 @@
     </section>
 
     {% include footer/footer-{{ page.lang }}.html %}
+    <script src="/js/theme.js"></script>
 
   </body>
 

diff --git a/_layouts/5x-api.html b/_layouts/5x-api.html
@@ -22,6 +22,7 @@
     </section>
 
     {% include footer/footer-{{ page.lang }}.html %}
+    <script src="/js/theme.js"></script>
 
   </body>
 

diff --git a/_layouts/home.html b/_layouts/home.html
@@ -19,7 +19,7 @@
     {{ content }}
 
     {% include footer/footer-{{ page.lang }}.html %}
-
+    <script src="../js/theme.js"></script>
   </body>
 
 </html>
diff --git a/_layouts/middleware.html b/_layouts/middleware.html
@@ -26,5 +26,7 @@
     {% else %}
       <h3>ERROR: No source specified for README {{page.module}}</h3>
     {% endif %}
+    <script src="/js/theme.js"></script>
+
   </div>
 </div>
diff --git a/_layouts/page.html b/_layouts/page.html
@@ -31,6 +31,7 @@
     </section>
 
     {% include footer/footer-{{ page.lang }}.html %}
+    <script src="/js/theme.js"></script>
 
   </body>
 

diff --git a/css/style.css b/css/style.css
@@ -722,9 +722,7 @@ footer {
 .menu ul.dropit-submenu {
   background-color: #fcfcfa;
   border: 1px solid #b2b2b2;
-  padding: 6px 0;
   margin: 0 0 0 1px;
-  border-radius: 3px;
   box-shadow: 0px 1px 3px rgba(0,0,0,0.15);
 }