Dark mode added

Author: Mobmaker55

Dockerfile

@@ -6,10 +6,10 @@ RUN . ~/.nvm/nvm.sh install 13
 RUN . ~/.nvm/nvm.sh use 13
 RUN apt update
 RUN apt install -y python2
-RUN python2 -v
+WORKDIR /app
+COPY package.json .
+RUN yarn
 
 FROM base AS build
 WORKDIR /app
-COPY package.json .
-RUN npm install
 COPY . .

index.html

@@ -7,6 +7,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <link rel="stylesheet" href="dist/csh-material-bootstrap.css" media="screen">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
     <style>
       body{padding-top:120px}pre{background:#f7f7f9}@media (min-width: 768px){body>.navbar-transparent{box-shadow:none}body>.navbar-transparent .navbar-nav>.open>a{box-shadow:none}}#home,#help{font-size:0.9rem}#home .navbar,#help .navbar{background:#349aed;background:linear-gradient(145deg, #349aed 50%, #34d8ed 100%);transition:box-shadow 200ms ease-in}#home .navbar-transparent,#help .navbar-transparent{background:none !important;box-shadow:none}#home .navbar-brand .nav-link,#help .navbar-brand .nav-link{display:inline-block;margin-right:-30px}#home .navbar-brand img,#help .navbar-brand img{display:inline-block;margin:0 10px;width:30px}#home .nav-link,#help .nav-link{text-transform:uppercase;font-weight:500;color:#fff}#home{padding-top:0px}#home .btn{padding:0.6rem 0.55rem 0.5rem;box-shadow:none;font-size:0.7rem;font-weight:500}.bs-docs-section{margin-top:4em}.bs-docs-section .page-header h1{padding:2rem 0;font-size:3rem}.dropdown-menu.show[aria-labelledby="themes"]{display:flex;width:420px;flex-wrap:wrap}.dropdown-menu.show[aria-labelledby="themes"] .dropdown-item{width:33.333%}.dropdown-menu.show[aria-labelledby="themes"] .dropdown-item:first-child{width:100%}.bs-component{position:relative}.bs-component+.bs-component{margin-top:1rem}.bs-component .card{margin-bottom:1rem}.bs-component .modal{position:relative;top:auto;right:auto;left:auto;bottom:auto;z-index:1;display:block}.bs-component .modal-dialog{width:90%}.bs-component .popover{position:relative;display:inline-block;width:220px;margin:20px}.source-button{display:none;position:absolute;top:0;right:0;z-index:100;font-weight:bold}.source-button:hover{cursor:pointer}.bs-component:hover .source-button{display:block}#source-modal pre{max-height:calc(100vh - 11rem);background-color:rgba(0,0,0,0.7);color:rgba(255,255,255,0.7)}.nav-tabs{margin-bottom:15px}.progress{margin-bottom:10px}#footer{margin:5em 0}#footer li{float:left;margin-right:1.5em;margin-bottom:1.5em}#footer p{clear:left;margin-bottom:0}.splash{padding:12em 0 6em;background:#349aed;background:linear-gradient(145deg, #349aed 50%, #34d8ed 100%);color:#fff;text-align:center}.splash .logo{width:160px}.splash h1{font-size:3em;color:#fff}.splash #social{margin:2em 0 3em}.splash .alert{margin:2em 0;border:none}.splash .sponsor a{color:#fff}.section-tout{padding:6em 0 1em;border-bottom:1px solid rgba(0,0,0,0.05);background-color:#eaf1f1;text-align:center}.section-tout .icon{text-align:center;margin-bottom:1rem}.section-tout .fa{display:inline-block;padding:0.8em;font-size:2rem;background:#349aed;background:linear-gradient(145deg, #3b9cea 50%, #3db8eb 100%);border-radius:50%;color:rgba(0,0,0,0.5)}.section-tout p{margin-bottom:5em}.section-preview{padding:4em 0 4em}.section-preview .preview{margin-bottom:4em;background-color:#eaf1f1}.section-preview .preview img{max-width:100%}.section-preview .preview .image{position:relative}.section-preview .preview .image:before{box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1);position:absolute;top:0;left:0;width:100%;height:100%;content:"";pointer-events:none}.section-preview .preview .options{padding:2em;border:1px solid rgba(0,0,0,0.05);border-top:none;text-align:center}.section-preview .preview .options p{margin-bottom:2em}.section-preview .dropdown-menu{text-align:left}.section-preview .lead{margin-bottom:2em}@media (max-width: 767px){.section-preview .image img{width:100%}}.sponsor img{max-width:100%}.sponsor #carbonads{max-width:240px;margin:0 auto}.sponsor .carbon-text{display:block;margin-top:1em;font-size:12px}.sponsor .carbon-poweredby{float:right;margin-top:1em;font-size:10px}@media (max-width: 767px){.splash{padding-top:8em}.splash .logo{width:100px}.splash h1{font-size:2em}#banner{margin-bottom:2em;text-align:center}}
     </style>
@@ -35,6 +36,7 @@
             </li>
           </ul>
         </div>
+        <div id="theme-indicator"></div>
       </div>
     </div>
 
@@ -1559,7 +1561,7 @@ <h4 class="modal-title">Source Code</h4>
             </ul>
             <p>Made by <a href="https://csh.rit.edu">Computer Science House</a>.</p>
             <p>Code released under the <a href="https://github.com/ComputerScienceHouse/csh-material-bootstrap/blob/master/LICENSE">MIT License</a>.</p>
-            <p>Based on <a href="https://bootswatch.com/materia" rel="nofollow">Materia</a> by <a href="https://bootswatch.com" rel="nofollow">Bootswatch</a>. Icons from <a href="http://fontawesome.io/" rel="nofollow">Font Awesome</a>. Web fonts from <a href="https://fonts.google.com/" rel="nofollow">Google</a>.</p>
+            <p>Based on <a href="https://bootswatch.com/materia" rel="nofollow">Materia</a> by <a href="https://bootswatch.com" rel="nofollow">Bootswatch</a>. Icons and web fonts from <a href="https://fonts.google.com/" rel="nofollow">Google</a>.</p>
           </div>
         </div>
       </footer>
@@ -1632,5 +1634,27 @@ <h4 class="modal-title">Source Code</h4>
 
       hljs.initHighlightingOnLoad();
     </script>
+    <script>
+    const themeIndicator = document.getElementById("theme-indicator");
+    const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
+    if (prefersDarkScheme.matches) {
+      document.body.classList.add('dark-theme');
+      themeIndicator.innerHTML = '<span class="material-icons-outlined">dark_mode</span>';
+    } else {
+      document.body.classList.remove('dark-theme');
+      themeIndicator.innerHTML = '<span class="material-icons-outlined">light_mode</span>';
+    }
+
+    themeIndicator.onclick = function() {
+      if (themeIndicator.firstChild.innerHTML == "dark_mode") {
+        document.body.classList.remove('dark-theme');
+        themeIndicator.innerHTML = '<span class="material-icons-outlined">light_mode</span>';
+      } else {
+        document.body.classList.add('dark-theme');
+        themeIndicator.innerHTML = '<span class="material-icons-outlined">dark_mode</span>';
+      }
+    }
+    
+    </script>
   </body>
 </html>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "csh-material-bootstrap",
   "description": "A material design Bootstrap theme for Computer Science House.",
-  "version": "4.5.2",
+  "version": "4.6.2",
   "author": "Computer Science House <[email protected]>",
   "homepage": "https://csh.rit.edu",
   "license": "MIT",

src/csh-material-bootstrap.scss

@@ -768,12 +768,72 @@ select.form-control {
   }
 }
 
+// THEME INDICATOR ===============
+
+#theme-indicator {
+  display: block;
+  width: 32px;
+  height: 32px;
+  fill: var(--dark);
+}
 
 // DARK THEME =============================
 
 .dark-theme {
-  body {
-    background-color: rgb(34, 34, 34);
-    color: #eee;
+  background-color: rgb(34, 34, 34);
+  color: #eee;
+}
+.dark-theme * {
+  
+  --secondary: #aaa;
+  --light: #eee;
+
+  #theme-indicator {
+    fill: var(--light);
+    
+  }
+  
+  .bg-secondary {
+      background-color: #444 !important;
+  }
+
+  .jumbotron {
+      background-color: rgb(43, 43, 43);
+  }
+
+  tr:not([class]),
+  tr.table-active,
+  tr:not([class]):hover,
+  tr.table-active:hover {
+      color: #eee;
+  }
+
+  .form-control::placeholder, .form-control-plaintext {
+      color: #666;
+  }
+  
+  .text-muted {
+      color: #aaa !important; 
+  }
+  
+  .modal-content {
+      background-color: #262626;
+  }
+  
+  .toast-body {
+      color: #444;
+  }
+  
+  .card:not(.text-white) {
+      color: #444;
+  }
+  
+  .nav-tabs .nav-link  {
+      color: #aaa;
+  }
+  
+  .btn-secondary.disabled {
+      color: #555;
   }
+  
 }