honeynet · Jitmisra · Feb 6, 2025 · Feb 6, 2025 · Feb 12, 2025 · Feb 12, 2025
diff --git a/assets/dark-mode.js b/assets/dark-mode.js
@@ -0,0 +1,25 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const darkModeToggle = document.getElementById('dark-mode-toggle');
+  const htmlElement = document.documentElement;
+
+
+  const savedTheme = localStorage.getItem('theme');
+  if (savedTheme) {
+    htmlElement.setAttribute('data-bs-theme', savedTheme);
+    updateButtonText(darkModeToggle, savedTheme);
+  }
+
+  darkModeToggle.addEventListener('click', () => {
+    const currentTheme = htmlElement.getAttribute('data-bs-theme');
+    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+
+    htmlElement.setAttribute('data-bs-theme', newTheme);
+    localStorage.setItem('theme', newTheme);
+    updateButtonText(darkModeToggle, newTheme);
+  });
+
+
+  function updateButtonText(button, theme) {
+    button.textContent = theme === 'dark' ? 'Switch to Light Mode' : 'Switch to Dark Mode';
+  }
+});
diff --git a/assets/main.scss b/assets/main.scss
@@ -61,3 +61,56 @@ blockquote {
 footer {
   margin-top: auto;
 }
+
+[data-bs-theme="dark"] footer {
+  span {
+    color: rgba(255, 255, 255, 0.9) !important;
+  }
+}
+
+[data-bs-theme="light"] footer {
+  span {
+    color: rgba(0, 0, 0, 0.9) !important;
+  }
+}
+
+
+.navbar[data-bs-theme=dark] {
+  --bs-navbar-active-color: $primary;
+  --bs-navbar-color: #ffffffdd;
+  --bs-navbar-hover-color: #ffffff;
+
+  .nav-link.active,
+  .nav-item.active > .nav-link,
+  .nav-item.show > .nav-link,
+  .nav-link[aria-current="page"],
+  .nav-item.current-section > .nav-link {
+    color: $primary !important;
+  }
+
+  .nav-item {
+    &.active,
+    &.show {
+      .nav-link {
+        color: $primary !important;
+      }
+    }
+  }
+
+  .dropdown-item {
+    &.active,
+    &:active {
+      background-color: $primary;
+      color: var(--bs-dark) !important;
+    }
+  }
+
+  .nav-link:hover {
+    color: rgba($primary, 0.8) !important;
+  }
+}
+
+body.section-workshops .navbar .nav-link[href*="workshops"] {
+  color: $primary !important;
+}
+
diff --git a/.../2015/11/27/honeynet-project-workshop-9-11-may-2016-san-antonio-tx-usa/index.md b/.../2015/11/27/honeynet-project-workshop-9-11-may-2016-san-antonio-tx-usa/index.md
diff --git a/content/workshops/index.html b/content/workshops/index.html
@@ -35,12 +35,39 @@
         padding: 1rem;
         border-radius: 2px;
         text-align: center;
-        color: black;
         box-shadow: rgba(0, 0, 0, 0.12) 0 1px 3px, rgba(0, 0, 0, 0.24) 0 1px 2px;
     }
+
+    #workshops a {
+        text-decoration: none;
+        color: inherit;
+    }
+
     #workshops > .active {
         background-color: var(--bs-primary);
-        color: var(--bs-dark);
+    }
+
+
+    [data-bs-theme="dark"] #workshops > * {
+        color: #ffffff;
+    }
+
+    [data-bs-theme="dark"] #workshops a {
+        color: #ffffff;
+    }
+
+    [data-bs-theme="dark"] #workshops span {
+        color: #ffffff;
+    }
+
+    [data-bs-theme="dark"] #workshops a:hover {
+        text-decoration: underline;
+        text-decoration-color: #ffffff;
+    }
+
+    [data-bs-theme="dark"] #workshops > .active {
+        background-color: var(--bs-primary);
+        color: #ffffff;
     }
 </style>
 <div id="workshops">

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-bs-theme="light">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -9,6 +9,8 @@
     <link rel="stylesheet" href="{{ $style.RelPermalink }}">
     {{ $js := resources.Get "bootstrap-5.3.0/bootstrap.bundle.min.js" | resources.Fingerprint -}}
     <script src="{{ $js.RelPermalink }}"></script>
+    {{ $darkMode := resources.Get "dark-mode.js" | resources.Minify }}
+    <script src="{{ $darkMode.RelPermalink }}"></script>
 
     <link rel="alternate" type="application/rss+xml" title="The Honeynet Project" href="/feed/" />
 </head>

diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html
@@ -41,6 +41,15 @@
                 {{- end }}
             </ul>
             {{ partial "discord_link.html" . }}
+            <!-- Dark Mode Toggle Button - Hidden on mobile -->
+            <button id="dark-mode-toggle" class="btn btn-secondary ms-2 d-none d-lg-block">
+                <svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                    <path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8z"/>
+                </svg>
+                <svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                    <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
+                </svg>
+            </button>
         </div>
     </div>
 </nav>
diff --git a/layouts/projects/list.html b/layouts/projects/list.html
@@ -64,7 +64,30 @@ <h2 class="mt-4">Old Projects</h2>
             {{- partial "project.html" . }}
         {{- end }}
     </div>
-    <div class="col col-lg-5 py-4 bg-light">
+    <div class="col col-lg-5 py-4 bg-light" id="activity-sidebar">
+        <style>
+            [data-bs-theme="dark"] #activity-sidebar {
+                background-color: var(--bs-dark) !important;
+            }
+
+            [data-bs-theme="dark"] .link-body-emphasis {
+                color: var(--bs-light) !important;
+            }
+
+            [data-bs-theme="dark"] .card {
+                background-color: var(--bs-dark-bg-subtle);
+                border-color: var(--bs-border-color-translucent);
+            }
+
+            [data-bs-theme="dark"] .text-muted {
+                color: var(--bs-gray-400) !important;
+            }
+
+            [data-bs-theme="dark"] relative-time {
+                color: var(--bs-gray-400);
+            }
+        </style>
+
         <h4>Latest Activity</h4>
         {{ range sort $all_events "created_at" "desc" | first 20 }}
         <div class="mb-3">