Update theme toggle functionality and default theme settings

- Changed the default theme from light to dark mode in the theme toggle functionality.
- Updated the setup documentation to reflect the new default theme.
- Added Google Fonts integration for improved typography in the Hacktivity theme.
- Enhanced the lab layout with a theme toggle button for user convenience.

SETUP.md

@@ -5,7 +5,8 @@ This Jekyll site is designed to display cybersecurity lab exercises organized by
 ## Features
 
 - **Organized by Category**: Labs are grouped by their directory structure (e.g., "Introducing Attacks", "Network Security", etc.)
-- **Hacktivity Theme**: Custom theme matching the Hacktivity platform with light/dark mode toggle
+- **Hacktivity Theme**: Custom theme matching the Hacktivity platform with light/dark mode toggle (dark mode default)
+- **Google Fonts**: Uses Inter for body text and JetBrains Mono for code
 - **GitHub Pages Compatible**: Ready for deployment on GitHub Pages
 - **Responsive Design**: Works on desktop and mobile devices
 

_layouts/default.html

@@ -8,6 +8,9 @@
     <title>{% if page.title %}{{ page.title | escape }} | {% endif %}{{ site.title | escape }}</title>
     <meta name="description" content="{{ page.description | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}">
     
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
     <link rel="stylesheet" href="{{ '/assets/css/hacktivity-theme.css' | relative_url }}">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

_layouts/lab.html

@@ -2,6 +2,13 @@
 layout: default
 ---
 
+<!-- Theme Toggle Button -->
+<div class="theme-toggle-container" style="position: fixed; top: 20px; right: 20px; z-index: 1000;">
+  <button id="theme-toggle" class="btn btn-sm" style="background-color: var(--primary-btnbg-color); color: white; border: none; border-radius: 20px; padding: 8px 16px;">
+    <i class="fas fa-moon" id="theme-icon"></i>
+  </button>
+</div>
+
 <article class="lab-content">
   <header class="lab-header">
     <h1>{{ page.title }}</h1>
@@ -156,4 +163,35 @@ layout: default
   text-decoration: underline;
   color: var(--primary-btnhov-color);
 }
-</style>
+</style>
+
+<script>
+// Theme toggle functionality
+document.addEventListener('DOMContentLoaded', function() {
+  const themeToggle = document.getElementById('theme-toggle');
+  const themeIcon = document.getElementById('theme-icon');
+  const body = document.body;
+
+  // Check for saved theme preference or default to dark mode
+  const currentTheme = localStorage.getItem('theme') || 'dark';
+  body.setAttribute('data-theme', currentTheme);
+  updateThemeIcon(currentTheme);
+
+  themeToggle.addEventListener('click', function() {
+    const currentTheme = body.getAttribute('data-theme');
+    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+
+    body.setAttribute('data-theme', newTheme);
+    localStorage.setItem('theme', newTheme);
+    updateThemeIcon(newTheme);
+  });
+
+  function updateThemeIcon(theme) {
+    if (theme === 'dark') {
+      themeIcon.className = 'fas fa-sun';
+    } else {
+      themeIcon.className = 'fas fa-moon';
+    }
+  }
+});
+</script>

assets/css/hacktivity-theme.scss

@@ -2,50 +2,18 @@
 ---
 
 // Hacktivity Theme CSS Variables and Styles
-:root {
-  --navbg-color: #1a1d22;
-  --navfg-color: whitesmoke;
-  --link-color: #503883;
-  --challenge-link-color: #333333;
-  --highlight-color: #f9f9f9;
-  --scoreboard-highlight-color: plum;
-  --default-btnbg-color: none;
-  --default-btnfg-color: #333;
-  --default-btnborder-color: #adadad;
-  --default-btnfghov-color: #333;
-  --default-btnbghov-color: #e6e6e6;
-  --default-btnborderhov-color: #adadad;
-  --primary-btnbg-color: #503883;
-  --primary-btnhov-color: #271753;
-  --panelbg-color: #fff;
-  --panelborder-color: #ddd;
-  --panel-primary-border-color: plum;
-  --panel-headbg-color: #f5f5f5;
-  --panel-headfg-color: #333333;
-  --panel-info-color: #fff;
-  --panel-infoborder-color: #bce8f1;
 
-  --alert-infobg-color: #d9edf7;
-  --alert-infofg-color: #31708f;
-  --alert-infoborder-color: #bce8f1;
-  --alert-warningbg-color: #fcf8e3;
-  --alert-warningfg-color: #8a6d3b;
-  --alert-warningborder-color: #faebcc;
-  --alert-dangerbg-color: #f2dede;
-  --alert-dangerfg-color: #a94442;
-  --alert-dangerborder-color: #ebccd1;
-  --alert-successbg-color: #dff0d8;
-  --alert-successfg-color: #3c763d;
-  --alert-successborder-color: #d6e9c6;
-  --close-color: #333333;
-
-  --vmfg-color: #333333;
-
-  --bg-color: white;
-  --fg-color: #333333;
+// Set default font family
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 }
 
-[data-theme="dark"] {
+code, pre, .highlight {
+  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+}
+
+// Dark mode as default
+:root {
   --navbg-color: #503883;
   --navfg-color: whitesmoke;
   --link-color: plum;
@@ -88,6 +56,49 @@
   --fg-color: whitesmoke;
 }
 
+[data-theme="light"] {
+  --navbg-color: #1a1d22;
+  --navfg-color: whitesmoke;
+  --link-color: #503883;
+  --challenge-link-color: #333333;
+  --highlight-color: #f9f9f9;
+  --scoreboard-highlight-color: plum;
+  --default-btnbg-color: none;
+  --default-btnfg-color: #333;
+  --default-btnborder-color: #adadad;
+  --default-btnfghov-color: #333;
+  --default-btnbghov-color: #e6e6e6;
+  --default-btnborderhov-color: #adadad;
+  --primary-btnbg-color: #503883;
+  --primary-btnhov-color: #271753;
+  --panelbg-color: #fff;
+  --panelborder-color: #ddd;
+  --panel-primary-border-color: plum;
+  --panel-headbg-color: #f5f5f5;
+  --panel-headfg-color: #333333;
+  --panel-info-color: #fff;
+  --panel-infoborder-color: #bce8f1;
+
+  --alert-infobg-color: #d9edf7;
+  --alert-infofg-color: #31708f;
+  --alert-infoborder-color: #bce8f1;
+  --alert-warningbg-color: #fcf8e3;
+  --alert-warningfg-color: #8a6d3b;
+  --alert-warningborder-color: #faebcc;
+  --alert-dangerbg-color: #f2dede;
+  --alert-dangerfg-color: #a94442;
+  --alert-dangerborder-color: #ebccd1;
+  --alert-successbg-color: #dff0d8;
+  --alert-successfg-color: #3c763d;
+  --alert-successborder-color: #d6e9c6;
+  --close-color: #333333;
+
+  --vmfg-color: #333333;
+
+  --bg-color: white;
+  --fg-color: #333333;
+}
+
 // Base styles
 body {
   background: var(--bg-color);

index.md

@@ -80,8 +80,8 @@ document.addEventListener('DOMContentLoaded', function() {
   const themeIcon = document.getElementById('theme-icon');
   const body = document.body;
   
-  // Check for saved theme preference or default to light mode
-  const currentTheme = localStorage.getItem('theme') || 'light';
+              // Check for saved theme preference or default to dark mode
+              const currentTheme = localStorage.getItem('theme') || 'dark';
   body.setAttribute('data-theme', currentTheme);
   updateThemeIcon(currentTheme);