diff --git a/frontend/public/textbook/students/f25/derick-burke.md b/frontend/public/textbook/students/f25/derick-burke.md
new file mode 100644
index 0000000..b117cef
--- /dev/null
+++ b/frontend/public/textbook/students/f25/derick-burke.md
@@ -0,0 +1,4 @@
+Hi! I'm Derick. I am taking this course in Winter 2026.
+As required, I'm posting my midterm here!
+
+{{YouTube:https://youtu.be/hNnXt3UBN28 timestamps:["0:00"]}}
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 1dc2d67..d0dafb5 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -4,6 +4,7 @@ import {
   ExamDashboard,
   ExamInterface,
   TextbookPage,
+  ThemeToggle,
   loadAllQuestions,
   compiledContentService
 } from '@srfoster/textbook-lib';
@@ -58,18 +59,19 @@ function AppContent() {
             <p>Computer Information Systems Concepts</p>
           </div>
           <nav className="main-nav">
-            <Link 
-              to="/" 
+            <Link
+              to="/"
               className={`nav-link ${isTextbookPage ? 'active' : ''}`}
             >
               Textbook
             </Link>
-            <Link 
-              to="/exams" 
+            <Link
+              to="/exams"
               className={`nav-link ${isExamPage ? 'active' : ''}`}
             >
               Exams
             </Link>
+            <ThemeToggle />
           </nav>
         </div>
       </header>
diff --git a/textbook-lib/src/components/ConceptMap.css b/textbook-lib/src/components/ConceptMap.css
index 3ca0650..6737e70 100644
--- a/textbook-lib/src/components/ConceptMap.css
+++ b/textbook-lib/src/components/ConceptMap.css
@@ -3,13 +3,13 @@
   max-width: 1200px;
   margin: 0 auto;
   padding: 20px;
-  background: #f8f9fa;
+  background: var(--background-color);
   border-radius: 8px;
-  border: 1px solid #dee2e6;
+  border: 1px solid var(--border-color);
 }
 
 .concept-map h2 {
-  color: #2c3e50;
+  color: var(--text-primary);
   margin-bottom: 10px;
   font-size: 1.6rem;
   text-align: center;
@@ -17,7 +17,7 @@
 
 .concept-map-description {
   text-align: center;
-  color: #6c757d;
+  color: var(--text-secondary);
   margin-bottom: 20px;
   font-style: italic;
   font-size: 0.9rem;
@@ -29,13 +29,13 @@
   text-align: center;
   padding: 40px;
   font-size: 1.1rem;
-  color: #6c757d;
+  color: var(--text-secondary);
 }
 
 .concept-map-error {
-  color: #dc3545;
-  background: #f8d7da;
-  border: 1px solid #f5c6cb;
+  color: var(--error-color);
+  background: var(--surface-color);
+  border: 1px solid var(--error-color);
   border-radius: 4px;
 }
 
@@ -46,9 +46,9 @@
 }
 
 .concept-category {
-  background: white;
+  background: var(--surface-color);
   border-radius: 6px;
-  border: 1px solid #dee2e6;
+  border: 1px solid var(--border-color);
   overflow: hidden;
 }
 
@@ -57,7 +57,7 @@
   justify-content: space-between;
   align-items: center;
   padding: 12px 16px;
-  background: #f1f3f4;
+  background: var(--background-color);
   border: none;
   cursor: pointer;
   width: 100%;
@@ -67,7 +67,7 @@
 }
 
 .category-header:hover {
-  background: #e9ecef;
+  background: var(--border-color);
 }
 
 .category-header.expanded {
@@ -78,7 +78,7 @@
 .category-title {
   font-size: 1.1rem;
   font-weight: 600;
-  color: #2c3e50;
+  color: var(--text-primary);
 }
 
 .category-header.expanded .category-title {
@@ -88,7 +88,7 @@
 .expand-icon {
   font-size: 1.1rem;
   font-weight: bold;
-  color: #6c757d;
+  color: var(--text-secondary);
   transition: transform 0.2s ease;
 }
 
@@ -99,15 +99,15 @@
 
 .category-content {
   padding: 16px;
-  background: white;
+  background: var(--surface-color);
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 12px;
 }
 
 .concept-item {
-  background: #f8f9fa;
-  border: 1px solid #e9ecef;
+  background: var(--background-color);
+  border: 1px solid var(--border-color);
   border-radius: 6px;
   padding: 12px;
   transition: all 0.2s ease;
@@ -115,7 +115,7 @@
 }
 
 .concept-item:hover {
-  background: #e9ecef;
+  background: var(--border-color);
   transform: translateY(-1px);
   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
 }
@@ -139,7 +139,7 @@
 }
 
 .concept-name {
-  color: #2c3e50;
+  color: var(--text-primary);
   margin: 0;
   font-size: 0.95rem;
   font-weight: 600;
@@ -148,7 +148,7 @@
 }
 
 .concept-description {
-  color: #6c757d;
+  color: var(--text-secondary);
   font-style: italic;
   margin: 2px 0 0 0;
   font-size: 0.8rem;
@@ -165,19 +165,19 @@
   align-items: center;
   gap: 4px;
   padding: 3px 8px;
-  background: #e9ecef;
-  border: 1px solid #dee2e6;
+  background: var(--border-color);
+  border: 1px solid var(--border-color);
   border-radius: 12px;
   cursor: pointer;
   font-size: 0.75rem;
   font-weight: 500;
-  color: #495057;
+  color: var(--text-primary);
   transition: all 0.2s ease;
   text-decoration: none;
 }
 
 .questions-header:hover {
-  background: #dee2e6;
+  background: var(--secondary-color);
   transform: scale(1.02);
 }
 
@@ -207,8 +207,8 @@
 }
 
 .question-item {
-  background: white;
-  border: 1px solid #dee2e6;
+  background: var(--surface-color);
+  border: 1px solid var(--border-color);
   border-radius: 4px;
   padding: 6px 8px;
   transition: background-color 0.2s ease;
@@ -216,7 +216,7 @@
 }
 
 .question-item:hover {
-  background: #f8f9fa;
+  background: var(--background-color);
 }
 
 .question-header {
@@ -227,9 +227,9 @@
 
 .question-id {
   font-weight: bold;
-  color: #007bff;
+  color: var(--primary-color);
   font-size: 0.7rem;
-  background: #e3f2fd;
+  background: var(--background-color);
   padding: 1px 4px;
   border-radius: 2px;
   flex-shrink: 0;
@@ -238,7 +238,7 @@
 }
 
 .question-title {
-  color: #495057;
+  color: var(--text-secondary);
   font-size: 0.75rem;
   line-height: 1.3;
   flex: 1;
diff --git a/textbook-lib/src/components/ExamBrowser.css b/textbook-lib/src/components/ExamBrowser.css
index 34173a2..7f2b943 100644
--- a/textbook-lib/src/components/ExamBrowser.css
+++ b/textbook-lib/src/components/ExamBrowser.css
@@ -1,9 +1,9 @@
 .exam-browser {
   margin: 30px 0;
-  border: 2px solid #e0e0e0;
+  border: 2px solid var(--border-color);
   border-radius: 12px;
   overflow: hidden;
-  background: linear-gradient(to bottom, #f8f9fa, #ffffff);
+  background: linear-gradient(to bottom, var(--background-color), var(--surface-color));
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   position: relative;
 }
@@ -64,7 +64,7 @@
   width: 50%;
   height: 100vh;
   overflow-y: auto;
-  background: #ffffff;
+  background: var(--surface-color);
 }
 
 .exam-browser-transcript-container {
@@ -114,9 +114,9 @@
 }
 
 .exam-browser-controls {
-  background-color: #f8f9fa;
+  background-color: var(--background-color);
   padding: 20px;
-  border-top: 1px solid #e0e0e0;
+  border-top: 1px solid var(--border-color);
 }
 
 .exam-browser-timeline {
@@ -129,7 +129,7 @@
 .time-display {
   font-family: 'Courier New', monospace;
   font-size: 0.9em;
-  color: #495057;
+  color: var(--text-primary);
   font-weight: 600;
   min-width: 50px;
 }
@@ -137,7 +137,7 @@
 .progress-bar {
   flex: 1;
   height: 6px;
-  background-color: #dee2e6;
+  background-color: var(--border-color);
   border-radius: 3px;
   overflow: hidden;
   position: relative;
@@ -166,25 +166,25 @@
 
 .control-label {
   font-size: 0.9em;
-  color: #495057;
+  color: var(--text-primary);
   font-weight: 600;
 }
 
 .control-button {
   padding: 10px 16px;
-  background-color: white;
-  border: 2px solid #dee2e6;
+  background-color: var(--surface-color);
+  border: 2px solid var(--border-color);
   border-radius: 8px;
   cursor: pointer;
   transition: all 0.2s ease;
   font-family: inherit;
   font-size: 0.9em;
   font-weight: 600;
-  color: #495057;
+  color: var(--text-primary);
 }
 
 .control-button:hover {
-  background-color: #e3f2fd;
+  background-color: var(--background-color);
   border-color: #667eea;
   color: #667eea;
   transform: translateY(-1px);
@@ -223,27 +223,36 @@
   margin: 0;
 }
 
+[data-theme="dark"] .exam-browser-notes {
+  background-color: #451a03;
+  border-top-color: #92400e;
+}
+
 .exam-browser-notes p {
   margin: 0;
   color: #856404;
+}
+
+[data-theme="dark"] .exam-browser-notes p {
+  color: #fde68a;
   font-size: 0.9em;
   line-height: 1.5;
 }
 
 .exam-browser-error {
-  background-color: #fee;
-  border: 2px solid #fcc;
+  background-color: var(--surface-color);
+  border: 2px solid var(--error-color);
   border-radius: 8px;
   padding: 20px;
   margin: 30px 0;
-  color: #c33;
+  color: var(--error-color);
   text-align: center;
 }
 
 /* Transcript Section */
 .exam-browser-transcript {
-  background-color: #f8f9fa;
-  border-top: 1px solid #e0e0e0;
+  background-color: var(--background-color);
+  border-top: 1px solid var(--border-color);
   padding: 20px;
 }
 
@@ -269,7 +278,7 @@
 .transcript-header h4 {
   margin: 0;
   font-size: 1.2em;
-  color: #495057;
+  color: var(--text-primary);
 }
 
 .transcript-count {
@@ -284,16 +293,16 @@
 .transcript-grouping-control {
   margin-bottom: 15px;
   padding: 15px;
-  background-color: #f8f9fa;
+  background-color: var(--background-color);
   border-radius: 8px;
-  border: 1px solid #dee2e6;
+  border: 1px solid var(--border-color);
 }
 
 .transcript-grouping-control label {
   display: block;
   margin-bottom: 8px;
   font-weight: 600;
-  color: #495057;
+  color: var(--text-primary);
   font-size: 0.95em;
 }
 
@@ -343,8 +352,8 @@
 .transcript-content {
   max-height: 400px;
   overflow-y: auto;
-  background-color: white;
-  border: 1px solid #dee2e6;
+  background-color: var(--surface-color);
+  border: 1px solid var(--border-color);
   border-radius: 8px;
   padding: 10px;
 }
@@ -359,12 +368,17 @@
 }
 
 .transcript-item:hover {
-  background-color: #e3f2fd;
+  background-color: var(--background-color);
 }
 
 .transcript-item.active {
   background-color: #fff3cd;
   border-left: 3px solid #ffc107;
+}
+
+[data-theme="dark"] .transcript-item.active {
+  background-color: #451a03;
+  border-left-color: #92400e;
   padding-left: 5px;
 }
 
@@ -391,27 +405,27 @@
 
 .transcript-text {
   flex: 1;
-  color: #495057;
+  color: var(--text-primary);
   line-height: 1.6;
   font-size: 0.95em;
 }
 
 .transcript-loading {
-  background-color: white;
-  border: 2px solid #dee2e6;
+  background-color: var(--surface-color);
+  border: 2px solid var(--border-color);
   border-radius: 8px;
   padding: 30px;
   text-align: center;
-  color: #6c757d;
+  color: var(--text-secondary);
   font-size: 0.95em;
 }
 
 .transcript-error {
-  background-color: #fee;
-  border: 2px solid #fcc;
+  background-color: var(--surface-color);
+  border: 2px solid var(--error-color);
   border-radius: 8px;
   padding: 20px;
-  color: #c33;
+  color: var(--error-color);
   font-size: 0.9em;
 }
 
diff --git a/textbook-lib/src/components/ExamDashboard.css b/textbook-lib/src/components/ExamDashboard.css
index 6ae6c7f..d514b09 100644
--- a/textbook-lib/src/components/ExamDashboard.css
+++ b/textbook-lib/src/components/ExamDashboard.css
@@ -123,7 +123,7 @@
   position: relative;
   width: 50px;
   height: 24px;
-  background: #ccc;
+  background: var(--border-color);
   border-radius: 12px;
   transition: background 0.3s ease;
   cursor: pointer;
@@ -217,8 +217,17 @@
   transition: all 0.2s ease;
 }
 
+[data-theme="dark"] .chapter-preview-item {
+  background: #064e3b;
+  border-color: #065f46;
+}
+
 .chapter-preview-item:hover {
   background: #dcfce7;
+}
+
+[data-theme="dark"] .chapter-preview-item:hover {
+  background: #065f46;
   transform: translateY(-1px);
 }
 
diff --git a/textbook-lib/src/components/ExamInterface.css b/textbook-lib/src/components/ExamInterface.css
index 102ee17..61eacc2 100644
--- a/textbook-lib/src/components/ExamInterface.css
+++ b/textbook-lib/src/components/ExamInterface.css
@@ -97,8 +97,8 @@
   font-size: 0.8rem;
   font-weight: 500;
   border: 1px solid var(--primary-color);
-  background: white;
-  color: #000000;
+  background: var(--surface-color);
+  color: var(--text-primary);
   cursor: pointer;
   transition: all 0.2s ease;
   margin-left: auto;
@@ -119,11 +119,21 @@
   color: #0369a1;
 }
 
+[data-theme="dark"] .chapter-tag {
+  background: #1e3a5f;
+  color: #7dd3fc;
+}
+
 .question-type {
   background: #f0fdf4;
   color: #166534;
 }
 
+[data-theme="dark"] .question-type {
+  background: #064e3b;
+  color: #6ee7b7;
+}
+
 .question-text {
   font-size: 1.3rem;
   font-weight: 600;
@@ -155,8 +165,8 @@
 
 /* Code block styling within questions */
 .question-text pre {
-  background: #f8f9fa;
-  border: 1px solid #dee2e6;
+  background: var(--background-color);
+  border: 1px solid var(--border-color);
   border-radius: 4px;
   padding: 1rem;
   overflow-x: auto;
@@ -174,7 +184,7 @@
 }
 
 .answer-reveal {
-  background: #f0fdf4;
+  background: var(--answer-reveal-bg, #f0fdf4);
   border-left: 4px solid var(--success-color);
   border-radius: var(--border-radius);
   padding: 1rem;
@@ -192,8 +202,8 @@
 
 /* Code block styling within answers */
 .answer-reveal pre {
-  background: #ffffff;
-  border: 1px solid #d1fae5;
+  background: var(--surface-color);
+  border: 1px solid var(--border-color);
   border-radius: 4px;
   padding: 1rem;
   overflow-x: auto;
@@ -228,7 +238,7 @@
 .answer-videos {
   margin-top: 1.5rem;
   padding-top: 1.5rem;
-  border-top: 1px solid #d1fae5;
+  border-top: 1px solid var(--border-color);
 }
 
 .answer-videos strong {
@@ -261,8 +271,8 @@
 .mode-btn {
   padding: 0.5rem 1.5rem;
   border: 2px solid var(--primary-color);
-  background: white;
-  color: #000000;
+  background: var(--surface-color);
+  color: var(--text-primary);
   border-radius: var(--border-radius);
   cursor: pointer;
   font-weight: 500;
@@ -282,7 +292,7 @@
   border: 2px solid var(--border-color);
   border-radius: var(--border-radius);
   padding: 1rem;
-  background: white;
+  background: var(--surface-color);
 }
 
 .canvas-controls {
@@ -294,8 +304,8 @@
 .canvas-btn {
   padding: 0.5rem 1rem;
   border: 2px solid var(--primary-color);
-  background: white;
-  color: #000000;
+  background: var(--surface-color);
+  color: var(--text-primary);
   border-radius: var(--border-radius);
   cursor: pointer;
   font-size: 0.9rem;
@@ -320,7 +330,7 @@
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius);
   overflow: hidden;
-  background: white;
+  background: var(--surface-color);
 }
 
 .answer-input {
@@ -579,11 +589,19 @@
   border-left: 4px solid var(--warning-color);
 }
 
+[data-theme="dark"] .user-answer {
+  background: #422006;
+}
+
 .correct-answer {
   background: #f0fdf4;
   border-left: 4px solid var(--success-color);
 }
 
+[data-theme="dark"] .correct-answer {
+  background: #064e3b;
+}
+
 .user-answer strong, .correct-answer strong {
   display: block;
   margin-bottom: 0.5rem;
diff --git a/textbook-lib/src/components/ProTip.css b/textbook-lib/src/components/ProTip.css
index 35aac46..1c36101 100644
--- a/textbook-lib/src/components/ProTip.css
+++ b/textbook-lib/src/components/ProTip.css
@@ -70,3 +70,34 @@
 .protip-professor .protip-icon {
   font-size: 28px;
 }
+
+/* Dark mode overrides for ProTip semantic colors */
+[data-theme="dark"] .protip-tip {
+  border-left-color: #22d3ee;
+  background-color: #164e63;
+  color: #a5f3fc;
+}
+
+[data-theme="dark"] .protip-warning {
+  border-left-color: #fbbf24;
+  background-color: #451a03;
+  color: #fde68a;
+}
+
+[data-theme="dark"] .protip-info {
+  border-left-color: #60a5fa;
+  background-color: #1e3a5f;
+  color: #bfdbfe;
+}
+
+[data-theme="dark"] .protip-success {
+  border-left-color: #34d399;
+  background-color: #064e3b;
+  color: #a7f3d0;
+}
+
+[data-theme="dark"] .protip-note {
+  border-left-color: #94a3b8;
+  background-color: #1e293b;
+  color: #cbd5e1;
+}
diff --git a/textbook-lib/src/components/TextbookPage.css b/textbook-lib/src/components/TextbookPage.css
index 3db1a55..7a71763 100644
--- a/textbook-lib/src/components/TextbookPage.css
+++ b/textbook-lib/src/components/TextbookPage.css
@@ -206,7 +206,7 @@
   accent-color: #28a745;   /* bright green check */
   border: 2px solid #28a745; /* green border */
   border-radius: 4px;
-  background-color: #fff;
+  background-color: var(--surface-color);
   box-shadow: 0 2px 4px rgba(0,0,0,0.2);
   cursor: default;
   pointer-events: none;
@@ -215,12 +215,12 @@
 /* Strike-through completed tasks */
 .textbook-content li.task-list-item input[type="checkbox"]:checked + span {
   text-decoration: line-through;
-  color: #555;
+  color: var(--text-secondary);
 }
 
 /* Hover effect for list items */
 .textbook-content li.task-list-item:hover {
-  background-color: rgba(0, 0, 0, 0.02);
+  background-color: rgba(128, 128, 128, 0.05);
   border-radius: 4px;
   padding: 2px 4px;
 }
diff --git a/textbook-lib/src/components/ThemeToggle.jsx b/textbook-lib/src/components/ThemeToggle.jsx
new file mode 100644
index 0000000..5cdce8b
--- /dev/null
+++ b/textbook-lib/src/components/ThemeToggle.jsx
@@ -0,0 +1,25 @@
+import React, { useState, useEffect } from 'react';
+
+function ThemeToggle() {
+  const [dark, setDark] = useState(() => {
+    return localStorage.getItem('theme') === 'dark';
+  });
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
+    localStorage.setItem('theme', dark ? 'dark' : 'light');
+  }, [dark]);
+
+  return (
+    <button
+      className="theme-toggle"
+      onClick={() => setDark(d => !d)}
+      aria-label={dark ? 'Switch to light mode' : 'Switch to dark mode'}
+      title={dark ? 'Switch to light mode' : 'Switch to dark mode'}
+    >
+      {dark ? '\u2600\uFE0F' : '\u{1F319}'}
+    </button>
+  );
+}
+
+export default ThemeToggle;
diff --git a/textbook-lib/src/components/VocabList.css b/textbook-lib/src/components/VocabList.css
index 5e767bd..bc97178 100644
--- a/textbook-lib/src/components/VocabList.css
+++ b/textbook-lib/src/components/VocabList.css
@@ -6,14 +6,14 @@
 }
 
 .vocab-list h2 {
-  color: #2c3e50;
+  color: var(--text-primary);
   margin-bottom: 10px;
   border-bottom: 3px solid #3498db;
   padding-bottom: 10px;
 }
 
 .vocab-count {
-  color: #7f8c8d;
+  color: var(--text-secondary);
   font-size: 0.9em;
   margin-bottom: 20px;
   font-style: italic;
@@ -22,16 +22,16 @@
 .vocab-list.loading {
   text-align: center;
   padding: 40px;
-  color: #7f8c8d;
+  color: var(--text-secondary);
   font-style: italic;
 }
 
 .vocab-list.error {
   text-align: center;
   padding: 40px;
-  color: #e74c3c;
-  background-color: #fdf2f2;
-  border: 1px solid #f5b7b1;
+  color: var(--error-color);
+  background-color: var(--surface-color);
+  border: 1px solid var(--error-color);
   border-radius: 5px;
 }
 
@@ -42,9 +42,9 @@
 }
 
 .vocab-item {
-  border: 1px solid #e1e8ed;
+  border: 1px solid var(--border-color);
   border-radius: 8px;
-  background: white;
+  background: var(--surface-color);
   box-shadow: 0 1px 3px rgba(0,0,0,0.1);
   transition: box-shadow 0.2s ease;
 }
@@ -67,27 +67,27 @@
 }
 
 .vocab-header:hover {
-  background-color: #f8f9fa;
+  background-color: var(--background-color);
 }
 
 .vocab-header[aria-expanded="true"] {
-  background-color: #e3f2fd;
+  background-color: var(--background-color);
 }
 
 .vocab-word {
   font-weight: 600;
-  color: #2c3e50;
+  color: var(--text-primary);
   text-align: left;
 }
 
 .definition-count {
   font-size: 0.85em;
-  color: #7f8c8d;
+  color: var(--text-secondary);
   margin-left: 10px;
 }
 
 .vocab-icon {
-  color: #7f8c8d;
+  color: var(--text-secondary);
   font-size: 12px;
   transition: transform 0.2s ease;
   margin-left: auto;
@@ -98,13 +98,13 @@
 }
 
 .vocab-content {
-  border-top: 1px solid #e1e8ed;
+  border-top: 1px solid var(--border-color);
   padding: 0;
 }
 
 .vocab-definition {
   padding: 15px 20px;
-  border-bottom: 1px solid #f1f3f4;
+  border-bottom: 1px solid var(--border-color);
 }
 
 .vocab-definition:last-child {
@@ -112,7 +112,7 @@
 }
 
 .definition-text {
-  color: #34495e;
+  color: var(--text-primary);
   line-height: 1.6;
   margin-bottom: 10px;
 }
@@ -121,11 +121,11 @@
   display: flex;
   gap: 15px;
   font-size: 0.85em;
-  color: #7f8c8d;
+  color: var(--text-secondary);
 }
 
 .definition-level {
-  background-color: #ecf0f1;
+  background-color: var(--background-color);
   padding: 2px 8px;
   border-radius: 12px;
   font-weight: 500;
diff --git a/textbook-lib/src/components/YouTube.css b/textbook-lib/src/components/YouTube.css
index cac93d7..c1a79f8 100644
--- a/textbook-lib/src/components/YouTube.css
+++ b/textbook-lib/src/components/YouTube.css
@@ -12,18 +12,18 @@
 .youtube-caption {
   margin-top: 10px;
   font-style: italic;
-  color: #666;
+  color: var(--text-secondary);
   font-size: 0.9em;
   line-height: 1.4;
 }
 
 .youtube-error {
-  background-color: #fee;
-  border: 1px solid #fcc;
+  background-color: var(--surface-color);
+  border: 1px solid var(--error-color);
   border-radius: 4px;
   padding: 10px;
   margin: 20px 0;
-  color: #c33;
+  color: var(--error-color);
   text-align: center;
 }
 
@@ -31,16 +31,16 @@
 .youtube-timestamps {
   margin-top: 15px;
   text-align: left;
-  background-color: #f8f9fa;
+  background-color: var(--background-color);
   border-radius: 8px;
   padding: 15px;
-  border: 1px solid #e9ecef;
+  border: 1px solid var(--border-color);
 }
 
 .youtube-timestamps h4 {
   margin: 0 0 10px 0;
   font-size: 1em;
-  color: #495057;
+  color: var(--text-primary);
   font-weight: 600;
 }
 
@@ -55,8 +55,8 @@
   align-items: center;
   justify-content: center;
   padding: 8px 16px;
-  background-color: white;
-  border: 1px solid #dee2e6;
+  background-color: var(--surface-color);
+  border: 1px solid var(--border-color);
   border-radius: 4px;
   cursor: pointer;
   transition: all 0.2s ease;
@@ -66,8 +66,8 @@
 }
 
 .timestamp-button:hover {
-  background-color: #e3f2fd;
-  border-color: #2196f3;
+  background-color: var(--background-color);
+  border-color: var(--primary-color);
   transform: translateY(-1px);
 }
 
@@ -78,7 +78,7 @@
 .timestamp-time {
   font-family: 'Courier New', monospace;
   font-weight: bold;
-  color: #1976d2;
+  color: var(--primary-color);
   font-size: 0.9em;
 }
 
diff --git a/textbook-lib/src/index.js b/textbook-lib/src/index.js
index dbaf742..07d1507 100644
--- a/textbook-lib/src/index.js
+++ b/textbook-lib/src/index.js
@@ -10,6 +10,7 @@ export { default as WikiPage } from './components/WikiPage.jsx';
 export { default as YouTube } from './components/YouTube.jsx';
 export { default as ProTip } from './components/ProTip.jsx';
 export { default as AsAProfessor } from './components/AsAProfessor.jsx';
+export { default as ThemeToggle } from './components/ThemeToggle.jsx';
 
 // Services
 export { loadAllQuestions } from './services/questionLoader.js';
diff --git a/textbook-lib/src/styles/App.css b/textbook-lib/src/styles/App.css
index 7f905f7..265cb40 100644
--- a/textbook-lib/src/styles/App.css
+++ b/textbook-lib/src/styles/App.css
@@ -16,6 +16,22 @@
   --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 }
 
+[data-theme="dark"] {
+  --primary-color: #60a5fa;
+  --secondary-color: #94a3b8;
+  --success-color: #34d399;
+  --warning-color: #fbbf24;
+  --error-color: #f87171;
+  --background-color: #0f172a;
+  --surface-color: #1e293b;
+  --text-primary: #e2e8f0;
+  --text-secondary: #94a3b8;
+  --border-color: #334155;
+  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
+  --answer-reveal-bg: #064e3b;
+}
+
 * {
   box-sizing: border-box;
   margin: 0;
@@ -191,3 +207,42 @@ input:focus, textarea:focus, select:focus {
 .p-4 { padding: 1rem; }
 .rounded { border-radius: var(--border-radius); }
 .shadow { box-shadow: var(--shadow); }
+
+/* Theme Toggle */
+.theme-toggle {
+  background: rgba(255, 255, 255, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  color: white;
+  padding: 0.4rem 0.75rem;
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  font-size: 1.1rem;
+  line-height: 1;
+  transition: background 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.theme-toggle:hover {
+  background: rgba(255, 255, 255, 0.25);
+  transform: none;
+}
+
+/* Dark mode overrides for hardcoded colors */
+[data-theme="dark"] button:hover:not(:disabled) {
+  background: #3b82f6;
+}
+
+[data-theme="dark"] input,
+[data-theme="dark"] textarea,
+[data-theme="dark"] select {
+  background-color: var(--surface-color);
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] input:focus,
+[data-theme="dark"] textarea:focus,
+[data-theme="dark"] select:focus {
+  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
+}
diff --git a/textbook-lib/src/styles/index.css b/textbook-lib/src/styles/index.css
index 40fcd32..5b2690b 100644
--- a/textbook-lib/src/styles/index.css
+++ b/textbook-lib/src/styles/index.css
@@ -24,9 +24,9 @@
   line-height: 1.5;
   font-weight: 400;
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  color-scheme: light;
+  color: var(--text-primary);
+  background-color: var(--background-color);
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -75,15 +75,10 @@ button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+[data-theme="dark"] a {
+  color: #818cf8;
+}
+
+[data-theme="dark"] a:hover {
+  color: #a5b4fc;
 }