add dark color scheme based on system

themes/hugo-sustain/assets/scss/default.scss

@@ -1,9 +1,20 @@
+/* Variables */
+:root {
+  --primary-color: #0D76EC;
+  --hover-color: #12437A;
+  --light-bg: #fff;
+  --primary-color-dark: #4da3ff;
+  --hover-color-dark: #91c9ff;
+  --dark-bg: #222;
+  --dark-font-color: #eee;
+}
+
 /* Main page with sticky footer */
 html, body {
   height: 100%;
-  background-color: #fff;
+  background-color: var(--light-bg);
   font-family: 'Source Sans Pro', sans-serif;
-  border-top: 3px solid #0D76EC;
+  border-top: 3px solid var(--primary-color);
 }
 
 #wrap {
@@ -16,83 +27,6 @@ html, body {
   margin-left: calc(100vw - 100%);
 }
 
-/* Navbar */
-.navbar-static-top {
-  margin-bottom: 10px;
-}
-
-.navbar-default {
-  background-color: #fff;
-  border-color: #fff;
-
-  .navbar-brand,
-  .navbar-text,
-  .navbar-nav>li>a,
-  .navbar-nav>.active>a,
-  .navbar-nav>.open>a,
-  .navbar-link {
-    color: #6b6b6b;
-  }
-
-  .navbar-brand:hover,
-  .navbar-brand:focus,
-  .navbar-nav>li>a:hover,
-  .navbar-nav>li>a:focus,
-  .navbar-nav>.active>a:hover,
-  .navbar-nav>.active>a:focus,
-  .navbar-nav>.open>a:hover,
-  .navbar-nav>.open>a:focus,
-  .navbar-link:hover {
-    color: #6b6b6b;
-  }
-
-  .navbar-nav {
-
-    >.active>a,
-    >.open>a {
-      background-color: #fff;
-    }
-  }
-
-  .navbar-toggle {
-    border-color: #fff;
-
-    &:hover,
-    &:focus {
-      background-color: #fff;
-    }
-
-    .icon-bar {
-      background-color: #6b6b6b;
-    }
-  }
-
-  .navbar-collapse,
-  .navbar-form {
-    border-color: #6b6b6b;
-  }
-
-  @media (max-width: 767px) {
-    .navbar-nav .open .dropdown-menu {
-      >li>a {
-        color: #6b6b6b;
-
-        &:hover,
-        &:focus {
-          color: #6b6b6b;
-        }
-      }
-
-      >.active>a,
-      >.active>a:hover,
-      >.active>a:focus {
-        color: #6b6b6b;
-        background-color: #fff;
-      }
-    }
-  }
-}
-
 /* Content containers */
 .container {
   width: auto;
@@ -104,10 +38,10 @@ html, body {
   }
 
   a {
-    color: #0D76EC;
+    color: var(--primary-color);
 
     &:hover {
-      color: #12437A;
+      color: var(--hover-color);
     }
 
     &.label-rss {
@@ -133,14 +67,14 @@ html, body {
 
   h1 {
     font-weight: bold;
-    color: #0D76EC;
+    color: var(--primary-color);
   }
 
   h4 a {
-    color: #0D76EC;
+    color: var(--primary-color);
 
     &:hover {
-      color: #0060CC;
+      color: var(--hover-color);
     }
   }
 }
@@ -324,9 +258,22 @@ a.learn-more {
   }
 }
 
+/* Pagination */
+.pagination {
+  li.page-item {
+    a {
+      color: var(--primary-color);
+
+      &:hover {
+        color: var(--hover-color);
+      }
+    }
+  }
+}
+
 /* Footer */
-div.footer {
-  border-bottom: 5px solid #0D76EC;
+footer {
+  border-bottom: 5px solid var(--primary-color);
   text-decoration: none !important;
 
   .text-muted {
@@ -354,3 +301,69 @@ div.contact p {
 pre code {
   white-space: pre;
 }
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  html, body {
+    background-color: var(--dark-bg);
+    color: var(--dark-font-color);
+  }
+
+  .luxbar-menu a,
+  .luxbar-item a {
+    color: #ddd;
+  }
+
+  .container {
+    a {
+      color: var(--primary-color-dark);
+
+      &:hover {
+        color: var(--hover-color-dark);
+      }
+    }
+
+    h1,
+    h4 a {
+      color: var(--primary-color-dark);
+
+      &:hover {
+        color: var(--hover-color-dark);
+      }
+    }
+  }
+
+  .panel {
+    background-color: var(--dark-bg);
+    color: #ddd;
+  }
+
+  .social-links li a {
+    color: #ddd;
+
+    &:hover {
+      color: #fff;
+    }
+  }
+
+  // Pagination
+  .pagination {
+    li.page-item {
+      a {
+        color: var(--primary-color-dark);
+        background-color: #222;
+
+        &:hover {
+          color: var(--hover-color-dark);
+          background-color: #000;
+        }
+      }
+    }
+  }
+
+  footer {
+    .text-muted {
+      color: #a5a5a5 !important;
+    }
+  }
+}