Issue #expressjs#1382

- futher changes to dark mode CSS for index - futher changes to dark mode JS for index
chrisdel101 · Apr 16, 2024 · 452bb8d · 452bb8d
1 parent 25807d1
commit 452bb8d
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 3 deletions.
diff --git a/_includes/header/header-en.html b/_includes/header/header-en.html
@@ -174,7 +174,8 @@
           </li>
         -->
       </ul>
-      <div id="theme-icon-container"  class="theme-toggle" title="switch to dark mode">
+      <!-- default theme / darkmode-theme -->
+      <div id="theme-icon-container"  class="theme-toggle default-theme" title="switch to dark mode">
         <i class="fa fa-moon-o fa-2x"></i>
       </div> 
   </div>

diff --git a/css/theme.css b/css/theme.css
@@ -4,6 +4,7 @@
   --dark_text: #e6edf3;
 }
 #theme-icon-container {
+  position: relative;
   float: right;
   background-color: var(--second_dark_bg);
   color: white;
@@ -23,13 +24,50 @@ header.dark-mode {
   background-color: var(--second_dark_bg);
   color: var(--dark_text);
 }
+.dark-mode-body div#overlay {
+  opacity: 0.5
+}
 #logo.dark-mode > a {
   color: var(--dark_text);
 }
 #navbar.dark-mode ul#navmenu  li.dropit-trigger a{
   color: var(--dark_text);
 }
+.dropit-submenu::hover{
+  background: var(--second_dark_bg);
+
+}
 #navbar.dark-mode ul#navmenu li a {
   color: var(--dark_text);
 }
+#navbar.dark-mode ul#navmenu 
+#navbar.dark-mode > span.algolia-autocomplete > input {
+  background-color: var(--second_dark_bg);
+}
+#navbar.dark-mode > span.algolia-autocomplete > input::placeholder {
+  color: var(--dark_text);
+}
+#navbar.dark-mode #navmenu  li  {
+  background: var(--second_dark_bg);
+  /* background-color: green; */
+}
+
+#description .dark-mode.express > a{
+  color: var(--dark_text);
+}
+#install-command.dark-mode {
+  background: var(--main_dark_bg)
+}
+#announcements {
+  background: var(--main_dark_bg)
+
+}
+#boxes div > h3 {
+  color: var(--dark_text);
 
+}
+@media (max-width: 899px) {
+  #theme-icon-container {
+  bottom: 35px;
+  }
+}
diff --git a/js/theme.js b/js/theme.js
@@ -23,10 +23,17 @@ function loadDarkMode() {
     banner.classList.add('dark-mode')
     const header = document.querySelector('header')
     header.classList.add('dark-mode')
-    const logo = document.querySelector('#logo')
-    logo.classList.add('dark-mode')
+    const logoTop = document.querySelector('#logo')
+    logoTop.classList.add('dark-mode')
+    const logoMiddleContainer = document.querySelector('#description .express')
+    console.log(logoMiddleContainer)
+    logoMiddleContainer.classList.add('dark-mode')
     const navbar= document.querySelector('#navbar')
     navbar.classList.add('dark-mode')
+    const installCmd = document.querySelector('#install-command')
+    installCmd.classList.add('dark-mode')
+    const announcements = document.querySelector('#announcements')
+    announcements.classList.add('dark-mode')
 }
 function toggleTheme(e) {
     const isDarkMode = localStorage.getItem("darkmode")