Attempt dark mode

Author: patmendoza6745

_includes/dark-mode-toggle.html

@@ -0,0 +1,49 @@
+<!-- Dark Mode Toggle -->
+<div class="dark-mode-toggle-container">
+  <button id="dark-mode-toggle" class="dark-mode-toggle" aria-label="Toggle dark mode">
+    <span class="toggle-icon">🌙</span>
+  </button>
+</div>
+
+<script>
+// Dark mode functionality
+(function() {
+  const toggle = document.getElementById('dark-mode-toggle');
+  const body = document.body;
+  const icon = toggle.querySelector('.toggle-icon');
+  
+  // Check for saved theme preference or default to light mode
+  const savedTheme = localStorage.getItem('crup-theme') || 'light';
+  
+  function setTheme(theme) {
+    if (theme === 'dark') {
+      body.setAttribute('data-theme', 'dark');
+      icon.textContent = '☀️';
+      localStorage.setItem('crup-theme', 'dark');
+    } else {
+      body.setAttribute('data-theme', 'light');
+      icon.textContent = '🌙';
+      localStorage.setItem('crup-theme', 'light');
+    }
+  }
+  
+  // Apply saved theme on page load
+  setTheme(savedTheme);
+  
+  // Toggle theme on button click
+  toggle.addEventListener('click', function() {
+    const currentTheme = body.getAttribute('data-theme');
+    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+    setTheme(newTheme);
+  });
+  
+  // Listen for system theme changes
+  if (window.matchMedia) {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
+      if (!localStorage.getItem('crup-theme')) {
+        setTheme(e.matches ? 'dark' : 'light');
+      }
+    });
+  }
+})();
+</script>

_layouts/person.html

@@ -1,3 +1,5 @@
+{% include dark-mode-toggle.html %}
+
 <div class="person">
   {%- if page.photo -%}
   <img class="person-image" src="{{ site.baseurl }}{{ page.subpath }}{{ page.photo }}" alt="{{ page.name }} profile photo">

_sass/color_schemes/wider.scss

@@ -1,35 +1,71 @@
 // wider.scss is already setting the content width
 $content-width: 75rem;
 
+// CSS Variables for light/dark themes
+:root {
+  // Light theme variables
+  --bg-color: #fafdff;
+  --text-color: black;
+  --primary-color: #397DFF;
+  --primary-hover: #245dcc;
+  --border-color: #e1e4e8;
+  --table-header-bg: #e4ecfa;
+  --table-stripe-bg: #f3f8fe;
+  --table-border: #c6d5f9;
+  --table-row-border: #e4ecfa;
+  --blockquote-bg: #f0f6fe;
+  --hr-color: #e4ecfa;
+  --card-bg: #ffffff;
+  --card-shadow: rgba(0, 0, 0, 0.1);
+}
+
+[data-theme="dark"] {
+  // Dark theme variables
+  --bg-color: #0d1117;
+  --text-color: #f0f6fc;
+  --primary-color: #58a6ff;
+  --primary-hover: #79c0ff;
+  --border-color: #30363d;
+  --table-header-bg: #161b22;
+  --table-stripe-bg: #0d1117;
+  --table-border: #21262d;
+  --table-row-border: #21262d;
+  --blockquote-bg: #161b22;
+  --hr-color: #21262d;
+  --card-bg: #161b22;
+  --card-shadow: rgba(0, 0, 0, 0.3);
+}
+
 // Global styles
 
 body {
   margin: 0 auto;
   font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
   font-size: 1.1rem;
-  background: #fafdff;
-  color: black;
+  background: var(--bg-color);
+  color: var(--text-color);
+  transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 // Links
 a,
 a:visited {
-  color: #397DFF !important;   // force blue for all links
+  color: var(--primary-color) !important;
   text-decoration: underline;
   font-weight: 500;
   transition: color 0.15s;
 }
 
 a:hover,
 a:focus {
-  color: #245dcc !important;   // force dark blue for hover/focus
+  color: var(--primary-hover) !important;
   text-decoration: underline;
 }
 
 
 // Headings
 h1, h2, h3, h4, h5, h6 {
-  color: #397DFF;
+  color: var(--primary-color);
   font-weight: 700;
   margin-top: 2.2rem;
   margin-bottom: 1.2rem;
@@ -42,7 +78,7 @@ h1, h2, h3, h4, h5, h6 {
 
 h2 {
   font-size: 1.75rem;
-  border-bottom: 1px solid #e0ebfa;
+  border-bottom: 1px solid var(--border-color);
   padding-bottom: 0.2rem;
 }
 
@@ -57,7 +93,7 @@ h4, h5, h6 {
 
 // Bold text
 strong, b {
-  color: #397DFF;
+  color: var(--primary-color);
   font-weight: 700;
 }
 
@@ -66,30 +102,31 @@ table {
   width: 100%;
   border-collapse: collapse;
   margin: 2rem 0;
-  background: #fff;
+  background: var(--card-bg);
   font-size: 1rem;
+  transition: background-color 0.3s ease;
 }
 
 thead th {
-  background: #e4ecfa;
-  color: #397DFF;
+  background: var(--table-header-bg);
+  color: var(--primary-color);
   font-weight: 700;
-  border-bottom: 2px solid #c6d5f9;
+  border-bottom: 2px solid var(--table-border);
   padding: 0.7rem;
 }
 
 tbody td {
-  border-bottom: 1px solid #e4ecfa;
+  border-bottom: 1px solid var(--table-row-border);
   padding: 0.7rem;
   vertical-align: top;
 }
 
 tbody tr:nth-child(even) {
-  background: #f3f8fe;
+  background: var(--table-stripe-bg);
 }
 
 .label {
-    background: #397DFF;
+    background: var(--primary-color);
     color: #fff !important; // ensures text stays white
     border-radius: 1.3em;
     padding: 0.22em 1.1em;
@@ -114,17 +151,18 @@ img {
 }
 
 blockquote {
-  border-left: 4px solid #397DFF;
-  background: #f0f6fe;
+  border-left: 4px solid var(--primary-color);
+  background: var(--blockquote-bg);
   padding: 0.6em 1em;
   margin: 1.5em 0;
-  color: #397DFF;
+  color: var(--primary-color);
   font-style: italic;
+  transition: background-color 0.3s ease;
 }
 
 hr {
   border: none;
-  border-top: 2px solid #e4ecfa;
+  border-top: 2px solid var(--hr-color);
   margin: 3rem 0;
 }
 

_sass/custom/custom.scss

@@ -10,13 +10,13 @@
   flex-basis: 45%;
   padding: 0.75rem;
   margin-bottom: 0.75rem;
-  border: 1px solid #e1e4e8;
+  border: 1px solid var(--border-color);
   border-radius: 8px;
-  background-color: #ffffff;
-  transition: box-shadow 0.2s ease;
+  background-color: var(--card-bg);
+  transition: box-shadow 0.2s ease, background-color 0.3s ease, border-color 0.3s ease;
 
   &:hover {
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 8px var(--card-shadow);
   }
 
   .person-image {
@@ -32,21 +32,22 @@
     margin: 0.25rem 0;
     font-size: 1rem;
     font-weight: 600;
-    color: #24292e;
+    color: var(--text-color);
 
     a {
-      color: #0366d6;
+      color: var(--primary-color);
       text-decoration: none;
 
       &:hover {
         text-decoration: underline;
+        color: var(--primary-hover);
       }
     }
   }
 
   .person-role {
     font-weight: 500;
-    color: #0366d6;
+    color: var(--primary-color);
     margin: 0.25rem 0;
     font-size: 0.9rem;
   }
@@ -89,6 +90,43 @@
   }
 }
 
+/* Dark Mode Toggle Styles */
+.dark-mode-toggle-container {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 1000;
+}
 
-
-
+.dark-mode-toggle {
+  background: var(--card-bg);
+  border: 2px solid var(--border-color);
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 8px var(--card-shadow);
+  color: var(--text-color);
+  font-size: 1.2rem;
+  
+  &:hover {
+    transform: scale(1.1);
+    box-shadow: 0 4px 12px var(--card-shadow);
+  }
+  
+  &:active {
+    transform: scale(0.95);
+  }
+  
+  .toggle-icon {
+    transition: transform 0.3s ease;
+  }
+  
+  &:hover .toggle-icon {
+    transform: rotate(15deg);
+  }
+}

docs/facilitators.md

@@ -4,6 +4,7 @@ nav_order: 4
 layout: home
 ---
 
+{% include dark-mode-toggle.html %}
 
 <style>
 .role {
@@ -17,14 +18,14 @@ layout: home
   flex-basis: 45%;
   padding: 0.75rem;
   margin-bottom: 0.75rem;
-  border: 1px solid #e1e4e8;
+  border: 1px solid var(--border-color);
   border-radius: 8px;
-  background-color: #ffffff;
-  transition: box-shadow 0.2s ease;
+  background-color: var(--card-bg);
+  transition: box-shadow 0.2s ease, background-color 0.3s ease, border-color 0.3s ease;
 }
 
 .person:hover {
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 8px var(--card-shadow);
 }
 
 .person-image {
@@ -40,21 +41,22 @@ layout: home
   margin: 0.25rem 0;
   font-size: 1rem;
   font-weight: 600;
-  color: #397DFF;
+  color: var(--primary-color);
 }
 
 .person-name a {
-  color: #397DFF;
+  color: var(--primary-color);
   text-decoration: none;
 }
 
 .person-name a:hover {
   text-decoration: underline;
+  color: var(--primary-hover);
 }
 
 .person-role {
   font-weight: 500;
-  color: #397DFF;
+  color: var(--primary-color);
   margin: 0.25rem 0;
   font-size: 0.9rem;
 }

docs/resources.md

@@ -4,6 +4,8 @@ nav_order: 3
 layout: home
 ---
 
+{% include dark-mode-toggle.html %}
+
 # <span style="color: #397DFF; font-weight: 350">Additional Resources</span>
 
 This page contains additional resources for each lecture to help you dive deeper into the topics covered.

docs/syllabus.md

@@ -4,6 +4,8 @@ nav_order: 2
 layout: home
 ---
 
+{% include dark-mode-toggle.html %}
+
 # <span style="color: #397DFF; font-weight: 350">Syllabus</span>
 
 ## <span style="color: #397DFF">Course Format</span>

index.md

@@ -4,6 +4,8 @@ nav_order: 1
 layout: home
 ---
 
+{% include dark-mode-toggle.html %}
+
 # <span style="color: #397DFF; font-weight: 490;">CRUP Fall 2025</span>
 
 Welcome to **Codebase's Ramp Up Program (CRUP)**! We will dive into **Software Engineering, Machine Learning, and AI** through hands-on work in **Python, Java,** and **SQL**, and frameworks like **PyTorch, scikit-learn, and more!**.