diff --git a/css/rouge/github.css b/css/rouge/github.css
index daf76ad..8e2520d 100644
--- a/css/rouge/github.css
+++ b/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;
+}
+
+}
\ No newline at end of file
diff --git a/css/techfolio-theme/default.css b/css/techfolio-theme/default.css
index 3467e62..0835222 100644
--- a/css/techfolio-theme/default.css
+++ b/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);
+ }
+}
\ No newline at end of file
diff --git a/img/bootstrap-icons.svg b/img/bootstrap-icons.svg
index 99df40f..fa7e620 100644
--- a/img/bootstrap-icons.svg
+++ b/img/bootstrap-icons.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file