Add darkmode support for default theme

css/rouge/github.css

@@ -207,3 +207,65 @@
 .highlight {
   background-color: #f8f8f8;
 }
+
+@media (prefers-color-scheme: dark) {
+  .highlight {
+    background-color: #000000;
+  }
+
+  .highlight .gd {
+    color: #ffffff;
+    background-color: #ffdddd;
+  }
+
+  .highlight .ge {
+    color: #ffffff;
+    font-style: italic;
+  }
+
+  .highlight .gi {
+  color: #ffffff;
+  background-color: #ddffdd;
+}
+highlight .kc {
+  color: #ffffff;
+  font-weight: bold;
+}
+
+.highlight .kd {
+  color: #ffffff;
+  font-weight: bold;
+}
+
+.highlight .kn {
+  color: #ffffff;
+  font-weight: bold;
+}
+
+.highlight .kp {
+  color: #ffffff;
+  font-weight: bold;
+}
+
+.highlight .kr {
+  color: #ffffff;
+  font-weight: bold;
+}
+
+.highlight .k,
+.highlight .kv {
+  color: #ffffff;
+  font-weight: bold;
+}
+
+.highlight .ow {
+  color: #ffffff;
+  font-weight: bold;
+}
+
+.highlight .o {
+  color: #ffffff;
+  font-weight: bold;
+}
+
+}

css/techfolio-theme/default.css

@@ -48,3 +48,72 @@ a {
   background-color: var(--bs-white);
   border-top: none;
 }
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Base Colors */
+    --bs-body-bg: #121212;
+    --bs-body-color: #e0e0e0;
+
+    /* Elevated Surface Colors */
+    --tf-surface-bg-color: #1c1c1c;
+
+    /* Links */
+    --bs-link-color: #58a6ff;
+    --bs-link-hover-color: #1f6feb;
+
+    /* Icons */
+    --tf-icon-fill: var(--bs-gray-200);
+    --tf-icon-hover: var(--bs-gray-400);
+
+    /* Page Sections */
+    --tf-page-bg-color: var(--bs-body-bg);
+    --tf-footer-bg-color: var(--tf-surface-bg-color);
+    --tf-projects-bg-color: var(--tf-surface-bg-color);
+    --tf-essays-bg-color: var(--tf-surface-bg-color);
+
+    /* Bootstrap Component Overrides */
+    --bs-light-rgb: 33,37,41;
+    --bs-gradient: none;
+    --bs-card-bg: var(--tf-surface-bg-color);
+    --bs-badge-color: #e0e0e0;
+
+    /* Pill (Hashtags) Background */
+    --tf-pill-bg: var(--bs-gray-900);
+  }
+
+  body {
+    background-color: var(--bs-body-bg);
+    color: var(--bs-body-color);
+  }
+
+  .navbar {
+    /* Set background to be fully transparent to let body background show through */
+    --bs-bg-opacity: 0;
+    --bs-navbar-color: rgba(230, 230, 230, 0.75);
+    --bs-navbar-brand-color: var(--bs-navbar-color);
+    --bs-navbar-hover-color: #fff;
+  }
+
+  footer.navbar {
+    color: rgba(255, 255, 255, 0.75);
+  }
+
+  .text-muted {
+    color: rgba(255, 255, 255, 0.5) !important;
+  }
+
+  .btn-outline-dark {
+    color: var(--bs-body-color);
+    border-color: var(--bs-body-color);
+  }
+
+  .card {
+    --bs-card-bg: var(--bs-body-bg);
+  }
+
+  .card-footer {
+    /* Ensure footer inherits the card's background color */
+    background-color: var(--bs-card-bg);
+  }
+}