Add dark theme (#1204)

Fixes #1151

_includes/head.html

@@ -44,4 +44,5 @@
 
   <!-- CSS stylesheets -->
   <link href="/assets/css/style.css?v=5" rel="stylesheet">
+  <link id="dark-css" href="/assets/css/dark.css?v=1" rel="stylesheet" media="(prefers-color-scheme: dark)">
 </head>

_includes/nav.html

@@ -143,6 +143,9 @@
         <a href="/donate/" class="nav-anchor">
           Donate <span class="fas fa-heart text-danger"></span>
         </a>
+        <a id="nav-switch-theme" class="nav-anchor" href="javascript:void(0)" onClick="changeColorScheme()">
+          Theme <span class="nav-theme-icon fas"></span>
+        </a>
       </div>
     </div>
   </nav>

assets/css/dark.scss

@@ -0,0 +1,174 @@
+---
+---
+$dark-400: #181b21;
+$dark-300: #22262e;
+$dark-200: #343a46;
+$dark-100: #464f60;
+$light: #d8d8d8;
+$primary: #345e8e;
+$danger: #b63f4a;
+$secondary: $dark-100;
+$success: #2c7f40;
+$warning: #c6a339;
+$info: #218899;
+
+
+/*
+ * HTML
+ */
+
+body {
+  background: $dark-400;
+  color: $light;
+}
+a {
+  color: lighten($primary, 25%);
+}
+a:hover {
+  color: lighten($primary, 10%);
+}
+img {
+  filter: saturate(80%);
+}
+
+
+/*
+ * Bootstrap
+ */
+
+.alert a {
+  color: #214D97;
+}
+
+.bg-secondary, .btn-secondary, .badge-secondary { background-color: $secondary !important; }
+.btn-secondary, .card-secondary .card-header { border-color: $secondary !important; }
+.text-secondary { color: $secondary !important; }
+.alert-secondary, .btn-secondary:hover {
+  color: $light;
+  background-color: darken($secondary, 10%);
+  border-color: darken($secondary, 10%);
+}
+
+.bg-primary, .btn-primary, .badge-primary { background-color: $primary !important; }
+.btn-primary, .card-primary .card-header { border-color: $primary !important; }
+.text-primary { color: $primary !important; }
+.alert-primary, .btn-primary:hover {
+  color: $light;
+  background-color: darken($primary, 10%);
+  border-color: darken($primary, 10%);
+}
+
+.bg-warning, .btn-warning, .badge-warning { background-color: $warning !important; }
+.btn-warning, .card-warning .card-header { border-color: $warning !important; }
+.text-warning { color: $warning !important; }
+.card-warning > .text-dark { color: $dark-400 !important; }
+.alert-warning, .btn-warning:hover {
+  color: $light;
+  background-color: darken($warning, 10%);
+  border-color: darken($warning, 10%);
+}
+
+.bg-info, .btn-info, .badge-info { background-color: $info !important; }
+.btn-info, .card-info .card-header { border-color: $info !important; }
+.text-info { color: $info !important; }
+.alert-info, .btn-info:hover {
+  color: $light;
+  background-color: darken($info, 10%);
+  border-color: darken($info, 10%);
+}
+
+.bg-success, .btn-success, .badge-success { background-color: $success !important; }
+.btn-success, .card-success .card-header { border-color: $success !important; }
+.text-success { color: $success !important; }
+.alert-success, .btn-success {
+  color: $light;
+  background-color: darken($success, 10%);
+  border-color: darken($success, 10%);
+}
+
+.bg-danger, .btn-danger, .badge-danger { background-color: $danger !important; }
+.btn-danger, .card-danger .card-header { border-color: $danger !important; }
+.text-danger { color: $danger !important; }
+.alert-danger, .btn-danger:hover {
+  color: $light;
+  background-color: darken($danger, 10%);
+  border-color: darken($danger, 10%);
+}
+
+.card {
+  box-shadow: none !important;
+}
+
+.dropdown-item:hover {
+  color: $light;
+  background-color: $dark-300;
+}
+
+.form-control,
+.form-control:focus {
+  color: $light;
+  background: $dark-300;
+  border-color: $dark-300;
+}
+
+.card,
+.jumbotron,
+.list-group-item {
+  background: $dark-300;
+}
+
+.blockquote {
+  border-color: $dark-300;
+}
+
+.bg-dark {
+  background-color: $dark-300 !important;
+}
+
+.dropdown-item {
+  color: $light;
+}
+
+.list-group-item {
+  border-color: $dark-200;
+}
+
+.text-dark {
+  color: $light !important;
+}
+
+table[data-sortable].sortable-theme-bootstrap {
+  color: $light;
+  background-color: $dark-300;
+}
+table[data-sortable].sortable-theme-bootstrap th,
+table[data-sortable].sortable-theme-bootstrap td {
+  border-color: $dark-100 !important;
+}
+table[data-sortable].sortable-theme-bootstrap th[data-sorted="true"] {
+  color: $light;
+  background: $dark-200;
+}
+table[data-sortable].sortable-theme-bootstrap th[data-sorted="true"][data-sorted-direction="ascending"]::after, {
+  border-bottom-color: $light;
+}
+table[data-sortable].sortable-theme-bootstrap th[data-sorted="true"][data-sorted-direction="descending"]::after {
+  border-top-color: $light;
+}
+
+
+/*
+ * Other
+ */
+
+.nav-dropdown {
+  color: $light;
+  background-color: $dark-400;
+  border-color: $dark-300;
+}
+
+.nav-theme-icon:before {
+  color: $warning;
+  font-size: 1em;
+  content: "\f185";
+}

assets/css/style.scss

@@ -177,6 +177,10 @@ h2, h3:not(.h5), h4, h5 {
   text-align: justify;
 }
 
+.no-text-wrap {
+  white-space: nowrap;
+}
+
 footer {
   img,
   i {
@@ -184,6 +188,7 @@ footer {
   }
 }
 
+
 /*
  * Navbar
  */
@@ -272,8 +277,15 @@ input#nav-toggle,
   display: none;
 }
 
+#nav-switch-theme {
+  /* We will make it visible with JavaScript
+   * as it does not work without it */
+  display: none;
+}
 
-/* Mobile hamburger menu */
+/*
+ * Mobile hamburger menu
+ */
 
 @media only screen and (max-width: 992px) {
   .menu,
@@ -336,8 +348,10 @@ input#nav-toggle,
   }
 }
 
-.no-text-wrap {
+.nav-theme-icon:before {
-  white-space: nowrap;
+  color: var(--warning);
+  font-size: 0.875em;
+  content: "\f186";
 }
 
 .table td, .table th {

assets/js/main.js

@@ -27,6 +27,47 @@ function navSectionsClose(event) {
   });
 }
 
+
+// Dark/Light color scheme switch button
+document.querySelector("#nav-switch-theme").style.display = "inline"
+
+if (localStorage.getItem("colorScheme") === "dark") {
+  document.querySelector("#dark-css").removeAttribute("media"); // Set dark theme
+}
+else if (localStorage.getItem("colorScheme") === "light") {
+  document.querySelector("#dark-css").setAttribute("media", "invalid"); // Set light theme
+}
+
+function changeColorScheme() {
+
+  // Use whatever users want
+  if (localStorage.getItem("colorScheme") === "dark") {
+    // Change to light theme
+    // by setting invalid media it will just not apply CSS for anyone
+    document.querySelector("#dark-css").setAttribute("media", "invalid");
+    localStorage.setItem("colorScheme", "light");
+  }
+  else if (localStorage.getItem("colorScheme") === "light") {
+    // Change to dark theme
+    // media was set to prefers-color-scheme: dark
+    document.querySelector("#dark-css").removeAttribute("media");
+    localStorage.setItem("colorScheme", "dark");;
+  }
+
+  // Just use whatever browsers want
+  else if (window.matchMedia("(prefers-color-scheme: dark)").matches === true) {
+    // Change to light Theme
+    document.querySelector("#dark-css").setAttribute("media", "invalid");
+    localStorage.setItem("colorScheme", "light");
+  }
+  else {
+    // Change to dark theme
+    document.querySelector("#dark-css").removeAttribute("media");
+    localStorage.setItem("colorScheme", "dark");;
+  }
+}
+
+
 // Matomo
 var _paq = window._paq || [];
 /* tracker methods like "setCustomDimension" should be called before "trackPageView" */