add night theme

app.py

@@ -916,6 +916,13 @@ def create_timeline_template():
             color: #333;
             display: flex;
             flex-direction: column;
+            transition: all 0.3s ease;
+        }
+
+        /* Dark mode body */
+        [data-theme="dark"] body {
+            background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
+            color: #f9fafb;
         }
 
         .header {
@@ -928,6 +935,14 @@ def create_timeline_template():
             top: 0;
             z-index: 100;
             margin: 0 0 0.3rem 0;
+            transition: all 0.3s ease;
+        }
+
+        /* Dark mode styles */
+        [data-theme="dark"] .header {
+            background: rgba(17, 24, 39, 0.9);
+            border-bottom: 1px solid rgba(55, 65, 81, 0.5);
+            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
         }
 
         .header h1 {
@@ -935,12 +950,76 @@ def create_timeline_template():
             font-weight: 700;
             color: #2d3748;
             margin-bottom: 0.1rem;
+            transition: color 0.3s ease;
         }
 
         .header p {
             color: #666;
             font-size: 0.8rem;
             margin: 0;
+            transition: color 0.3s ease;
+        }
+
+        /* Dark mode header text */
+        [data-theme="dark"] .header h1 {
+            color: #f9fafb;
+        }
+
+        [data-theme="dark"] .header p {
+            color: #d1d5db;
+        }
+
+        /* Header layout */
+        .header-content {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .header-text {
+            flex: 1;
+        }
+
+        /* Theme toggle button */
+        .theme-toggle {
+            background: rgba(255, 255, 255, 0.9);
+            border: 2px solid #e2e8f0;
+            border-radius: 50%;
+            width: 48px;
+            height: 48px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-size: 1.2rem;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            backdrop-filter: blur(10px);
+        }
+
+        .theme-toggle:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+            border-color: #d97706;
+        }
+
+        .theme-toggle:active {
+            transform: translateY(0);
+        }
+
+        .theme-icon {
+            transition: transform 0.3s ease;
+        }
+
+        /* Dark mode theme toggle */
+        [data-theme="dark"] .theme-toggle {
+            background: rgba(17, 24, 39, 0.9);
+            border-color: #4b5563;
+            color: #f9fafb;
+        }
+
+        [data-theme="dark"] .theme-toggle:hover {
+            border-color: #f59e0b;
         }
 
         .controls-wrapper {
@@ -968,11 +1047,26 @@ def create_timeline_template():
             box-shadow: 0 2px 8px rgba(0,0,0,0.06);
         }
 
+        /* Dark mode controls toggle */
+        [data-theme="dark"] .controls-toggle {
+            background: #374151;
+            border: 1px solid #4b5563;
+            color: #f9fafb;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+        }
+
         .controls-toggle:hover {
             transform: translateY(-1px);
             box-shadow: 0 4px 14px rgba(0,0,0,0.1);
         }
 
+        /* Dark mode controls toggle hover */
+        [data-theme="dark"] .controls-toggle:hover {
+            background: #4b5563;
+            border-color: #6b7280;
+            box-shadow: 0 4px 14px rgba(0,0,0,0.4);
+        }
+
         .controls {
             background: rgba(255, 255, 255, 0.9);
             backdrop-filter: blur(10px);
@@ -984,14 +1078,21 @@ def create_timeline_template():
             align-items: start;
             flex-wrap: nowrap;
             overflow: hidden;
-            transition: max-height 0.25s ease, opacity 0.2s ease;
+            transition: max-height 0.25s ease, opacity 0.2s ease, background 0.3s ease, box-shadow 0.3s ease;
             position: relative;
             padding-left: 2.4rem; /* space for the left toggle button */
-            max-height: none; /* will be set dynamically */
+            max-height: 74px; /* default collapsed height */
+        }
+
+        /* Dark mode controls */
+        [data-theme="dark"] .controls {
+            background: rgba(17, 24, 39, 0.9);
+            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
         }
 
         .controls.collapsed {
             opacity: 1;
+            max-height: 74px !important;
         }
 
         /* Blur fade to hint there is more content when collapsed */
@@ -1006,6 +1107,11 @@ def create_timeline_template():
             pointer-events: none;
         }
 
+        /* Dark mode blur fade */
+        [data-theme="dark"] .controls.collapsed::after {
+            background: linear-gradient(to bottom, rgba(17,24,39,0), rgba(17,24,39,0.94) 60%, rgba(17,24,39,1));
+        }
+
         .input-group {
             display: flex;
             flex-direction: column;
@@ -1017,6 +1123,12 @@ def create_timeline_template():
             font-weight: 500;
             color: #4a5568;
             font-size: 0.7rem;
+            transition: color 0.3s ease;
+        }
+
+        /* Dark mode labels */
+        [data-theme="dark"] .input-group label {
+            color: #d1d5db;
         }
 
         .input-group input {
@@ -1028,6 +1140,18 @@ def create_timeline_template():
             background: white;
         }
 
+        /* Dark mode input elements */
+        [data-theme="dark"] .input-group input {
+            background: #374151;
+            border-color: #4b5563;
+            color: #f9fafb;
+        }
+
+        [data-theme="dark"] .input-group input:focus {
+            border-color: #f59e0b;
+            box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
+        }
+
         .input-group input:focus {
             outline: none;
             border-color: #d97706;
@@ -1095,6 +1219,12 @@ def create_timeline_template():
             overflow: hidden;
         }
 
+        /* Dark mode modality checkboxes */
+        [data-theme="dark"] .modality-checkbox {
+            background: rgba(17, 24, 39, 0.9);
+            border: 1px solid rgba(55, 65, 81, 0.5);
+        }
+
         .modality-checkbox::before {
             content: '';
             position: absolute;
@@ -1121,6 +1251,12 @@ def create_timeline_template():
             border-color: currentColor;
         }
 
+        /* Dark mode checked modality checkbox cards */
+        [data-theme="dark"] .modality-checkbox.checked {
+            background: rgba(31, 41, 55, 0.95);
+            border-color: currentColor;
+        }
+
         .modality-checkbox.checked::before {
             opacity: 0.08;
         }
@@ -1138,11 +1274,23 @@ def create_timeline_template():
             flex-shrink: 0;
         }
 
+        /* Dark mode unchecked checkboxes */
+        [data-theme="dark"] .modality-checkbox input[type="checkbox"] {
+            background: #374151;
+            border-color: var(--modality-color, #8B5CF6);
+        }
+
         .modality-checkbox input[type="checkbox"]:checked {
             background: var(--modality-color, #8B5CF6);
             border-color: var(--modality-color, #8B5CF6);
         }
 
+        /* Dark mode checked checkboxes */
+        [data-theme="dark"] .modality-checkbox input[type="checkbox"]:checked {
+            background: var(--modality-color, #8B5CF6);
+            border-color: var(--modality-color, #8B5CF6);
+        }
+
         .modality-checkbox input[type="checkbox"]:checked::after {
             content: '✓';
             position: absolute;
@@ -1161,6 +1309,12 @@ def create_timeline_template():
             user-select: none;
             color: #374151;
             font-weight: 600;
+            transition: color 0.3s ease;
+        }
+
+        /* Dark mode modality checkbox labels */
+        [data-theme="dark"] .modality-checkbox label {
+            color: #f9fafb;
         }
 
         /* Task filter styles (mirroring modality styles) */
@@ -1180,6 +1334,12 @@ def create_timeline_template():
             overflow: hidden;
         }
 
+        /* Dark mode task checkboxes */
+        [data-theme="dark"] .task-checkbox {
+            background: rgba(17, 24, 39, 0.9);
+            border: 1px solid rgba(55, 65, 81, 0.5);
+        }
+
         .task-checkbox::before {
             content: '';
             position: absolute;
@@ -1206,6 +1366,12 @@ def create_timeline_template():
             border-color: currentColor;
         }
 
+        /* Dark mode checked task checkbox cards */
+        [data-theme="dark"] .task-checkbox.checked {
+            background: rgba(31, 41, 55, 0.95);
+            border-color: currentColor;
+        }
+
         .task-checkbox.checked::before {
             opacity: 0.08;
         }
@@ -1222,11 +1388,23 @@ def create_timeline_template():
             transition: all 0.2s ease;
         }
 
+        /* Dark mode unchecked task checkboxes */
+        [data-theme="dark"] .task-checkbox input[type="checkbox"] {
+            background: #374151;
+            border-color: var(--task-color, #6366f1);
+        }
+
         .task-checkbox input[type="checkbox"]:checked {
             background: var(--task-color, #6366f1);
             border-color: var(--task-color, #6366f1);
         }
 
+        /* Dark mode checked task checkboxes */
+        [data-theme="dark"] .task-checkbox input[type="checkbox"]:checked {
+            background: var(--task-color, #6366f1);
+            border-color: var(--task-color, #6366f1);
+        }
+
         .task-checkbox input[type="checkbox"]:checked::after {
             content: '✓';
             position: absolute;
@@ -1245,6 +1423,12 @@ def create_timeline_template():
             user-select: none;
             color: #374151;
             font-weight: 600;
+            transition: color 0.3s ease;
+        }
+
+        /* Dark mode task checkbox labels */
+        [data-theme="dark"] .task-checkbox label {
+            color: #f9fafb;
         }
 
         .modality-checkbox input[type="checkbox"]:not(:checked) {
@@ -1252,6 +1436,12 @@ def create_timeline_template():
             border-color: var(--modality-color, #8B5CF6);
         }
 
+        /* Dark mode unchecked checkboxes override */
+        [data-theme="dark"] .modality-checkbox input[type="checkbox"]:not(:checked) {
+            background: #374151;
+            border-color: var(--modality-color, #8B5CF6);
+        }
+
         .btn {
             padding: 0.5rem 1rem;
             border: none;
@@ -1278,6 +1468,19 @@ def create_timeline_template():
             background: #f7fafc;
             color: #4a5568;
             border: 2px solid #e2e8f0;
+            transition: all 0.3s ease;
+        }
+
+        /* Dark mode secondary buttons */
+        [data-theme="dark"] .btn-secondary {
+            background: #374151;
+            color: #f9fafb;
+            border: 2px solid #4b5563;
+        }
+
+        [data-theme="dark"] .btn-secondary:hover {
+            background: #4b5563;
+            border-color: #6b7280;
         }
 
         .timeline-container {
@@ -1292,6 +1495,13 @@ def create_timeline_template():
             display: flex;
             flex-direction: column;
             height: calc(100vh - 110px);
+            transition: all 0.3s ease;
+        }
+
+        /* Dark mode timeline container */
+        [data-theme="dark"] .timeline-container {
+            background: rgba(17, 24, 39, 0.95);
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
         }
 
         .timeline-wrapper {
@@ -1347,6 +1557,13 @@ def create_timeline_template():
             z-index: 10;
         }
 
+        /* Dark mode navigation arrows */
+        [data-theme="dark"] .nav-arrow {
+            background: rgba(17, 24, 39, 0.9);
+            color: #f59e0b;
+            border: 2px solid rgba(245, 158, 11, 0.2);
+        }
+
         .nav-arrow:hover {
             background: rgba(217, 119, 6, 0.1);
             border-color: #d97706;
@@ -1354,6 +1571,13 @@ def create_timeline_template():
             box-shadow: 0 4px 16px rgba(217, 119, 6, 0.3);
         }
 
+        /* Dark mode navigation arrow hover */
+        [data-theme="dark"] .nav-arrow:hover {
+            background: rgba(245, 158, 11, 0.1);
+            border-color: #f59e0b;
+            box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
+        }
+
         .nav-arrow.left {
             left: 10px;
         }
@@ -1395,6 +1619,13 @@ def create_timeline_template():
             user-select: none;
         }
 
+        /* Dark mode zoom buttons */
+        [data-theme="dark"] .zoom-btn {
+            background: rgba(17, 24, 39, 0.9);
+            border: 2px solid rgba(245, 158, 11, 0.2);
+            color: #f59e0b;
+        }
+
         .zoom-btn:hover {
             background: rgba(217, 119, 6, 0.1);
             border-color: #d97706;
@@ -1402,6 +1633,13 @@ def create_timeline_template():
             box-shadow: 0 4px 16px rgba(217, 119, 6, 0.3);
         }
 
+        /* Dark mode zoom button hover */
+        [data-theme="dark"] .zoom-btn:hover {
+            background: rgba(245, 158, 11, 0.1);
+            border-color: #f59e0b;
+            box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
+        }
+
         .zoom-btn:active {
             transform: scale(0.95);
         }
@@ -1414,6 +1652,14 @@ def create_timeline_template():
             color: #d97706;
             font-weight: 500;
             border: 1px solid rgba(217, 119, 6, 0.2);
+            transition: all 0.3s ease;
+        }
+
+        /* Dark mode zoom indicator */
+        [data-theme="dark"] .zoom-indicator {
+            background: rgba(17, 24, 39, 0.95);
+            color: #f59e0b;
+            border: 1px solid rgba(245, 158, 11, 0.2);
         }
 
         .timeline-line {
@@ -1459,6 +1705,13 @@ def create_timeline_template():
             opacity: 0.8;
             pointer-events: none;
             z-index: 1; /* In background, below everything */
+            transition: all 0.3s ease;
+        }
+
+        /* Dark mode date markers */
+        [data-theme="dark"] .date-marker {
+            background: #6b7280;
+            opacity: 0.9;
         }
 
         .date-label {
@@ -1477,6 +1730,15 @@ def create_timeline_template():
             white-space: nowrap;
             z-index: 2; /* Just above the dotted line but below everything else */
             backdrop-filter: blur(4px);
+            transition: all 0.3s ease;
+        }
+
+        /* Dark mode date labels */
+        [data-theme="dark"] .date-label {
+            color: #d1d5db;
+            background: rgba(17, 24, 39, 0.8);
+            border: 1px solid rgba(75, 85, 99, 0.4);
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
         }
 
         .date-marker.year {
@@ -1485,6 +1747,12 @@ def create_timeline_template():
             width: 3px;
         }
 
+        /* Dark mode year markers */
+        [data-theme="dark"] .date-marker.year {
+            background: #9ca3af;
+            opacity: 1.0;
+        }
+
         .date-marker.year .date-label {
             font-weight: 600;
             color: #4b5563;
@@ -1493,6 +1761,13 @@ def create_timeline_template():
             border-color: #9ca3af;
         }
 
+        /* Dark mode year date labels */
+        [data-theme="dark"] .date-marker.year .date-label {
+            color: #f9fafb;
+            background: rgba(17, 24, 39, 0.9);
+            border-color: #6b7280;
+        }
+
         .date-marker.quarter {
             opacity: 0.7;
         }
@@ -1501,6 +1776,15 @@ def create_timeline_template():
             opacity: 0.8;
         }
 
+        /* Dark mode quarter and month markers */
+        [data-theme="dark"] .date-marker.quarter {
+            opacity: 0.8;
+        }
+
+        [data-theme="dark"] .date-marker.month {
+            opacity: 0.9;
+        }
+
         .timeline-dot {
             width: 18px;
             height: 18px;
@@ -1542,6 +1826,14 @@ def create_timeline_template():
             cursor: pointer;
         }
 
+        /* Dark mode timeline labels */
+        [data-theme="dark"] .timeline-label {
+            background: #374151;
+            border: 1px solid #4b5563;
+            color: #f9fafb;
+            box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
+        }
+
         .timeline-label:not(.expanded):hover {
             background: rgba(255, 255, 255, 0.98);
             box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15),
@@ -1549,6 +1841,14 @@ def create_timeline_template():
             border-color: var(--modality-color, #8B5CF6);
         }
 
+        /* Dark mode timeline label hover */
+        [data-theme="dark"] .timeline-label:not(.expanded):hover {
+            background: rgba(55, 65, 81, 0.98);
+            box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4),
+                        0 0 4px var(--modality-color, #8B5CF6);
+            border-color: var(--modality-color, #8B5CF6);
+        }
+
         /* Expanded card styles */
         .timeline-label.expanded {
             max-width: 500px !important;
@@ -1588,6 +1888,13 @@ def create_timeline_template():
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
+            transition: color 0.3s ease;
+        }
+
+        /* Dark mode model title */
+        [data-theme="dark"] .timeline-label .model-title {
+            color: #f9fafb;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         }
 
         .timeline-label .model-description {
@@ -1597,10 +1904,15 @@ def create_timeline_template():
             margin-bottom: 0.5rem;
             max-height: 0;
             overflow: hidden;
-            transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease;
             position: relative;
         }
 
+        /* Dark mode model description */
+        [data-theme="dark"] .timeline-label .model-description {
+            color: #d1d5db;
+        }
+
         .timeline-label.expanded .model-description {
             max-height: 200px !important;
             height: 200px !important;
@@ -1637,6 +1949,14 @@ def create_timeline_template():
             z-index: 10;
         }
 
+        /* Dark mode description fade */
+        [data-theme="dark"] .timeline-label .description-fade {
+            background: linear-gradient(to bottom,
+                rgba(55, 65, 81, 0) 0%,
+                rgba(55, 65, 81, 0.9) 50%,
+                rgba(55, 65, 81, 1) 100%);
+        }
+
         .timeline-label.expanded .description-fade {
             opacity: 1;
         }
@@ -1648,6 +1968,14 @@ def create_timeline_template():
             font-weight: 600;
             margin: 0.8em 0 0.4em 0;
             color: #1f2937;
+            transition: color 0.3s ease;
+        }
+
+        /* Dark mode markdown headers */
+        [data-theme="dark"] .timeline-label .model-description h1,
+        [data-theme="dark"] .timeline-label .model-description h2,
+        [data-theme="dark"] .timeline-label .model-description h3 {
+            color: #f9fafb;
         }
 
         .timeline-label .model-description h1 { font-size: 0.85rem; }
@@ -1664,17 +1992,30 @@ def create_timeline_template():
             border-radius: 3px;
             font-family: 'Consolas', 'Monaco', monospace;
             font-size: 0.65rem;
+            transition: all 0.3s ease;
+        }
+
+        /* Dark mode code */
+        [data-theme="dark"] .timeline-label .model-description code {
+            background: #374151;
+            color: #f9fafb;
         }
 
         .timeline-label .model-description strong {
             font-weight: 600;
             color: #1f2937;
+            transition: color 0.3s ease;
         }
 
         .timeline-label .model-description em {
             font-style: italic;
         }
 
+        /* Dark mode strong and em */
+        [data-theme="dark"] .timeline-label .model-description strong {
+            color: #f9fafb;
+        }
+
         .timeline-label .model-description ul,
         .timeline-label .model-description ol {
             margin: 0.5em 0;
@@ -1711,6 +2052,11 @@ def create_timeline_template():
             text-align: center;
         }
 
+        /* Dark mode learn more button */
+        [data-theme="dark"] .timeline-label .learn-more {
+            background: rgba(55, 65, 81, 0.8);
+        }
+
         .timeline-label.expanded .learn-more {
             display: inline-block;
         }
@@ -1747,6 +2093,13 @@ def create_timeline_template():
             background: rgba(248, 250, 252, 0.8);
             border-radius: 8px;
             border: 1px solid rgba(226, 232, 240, 0.5);
+            transition: all 0.3s ease;
+        }
+
+        /* Dark mode model tasks */
+        [data-theme="dark"] .model-tasks {
+            background: rgba(31, 41, 55, 0.8);
+            border: 1px solid rgba(55, 65, 81, 0.5);
         }
 
         .tasks-label {
@@ -1754,6 +2107,12 @@ def create_timeline_template():
             font-weight: 600;
             color: #4a5568;
             margin-bottom: 0.3rem;
+            transition: color 0.3s ease;
+        }
+
+        /* Dark mode tasks label */
+        [data-theme="dark"] .tasks-label {
+            color: #d1d5db;
         }
 
         .tasks-list {
@@ -1845,6 +2204,12 @@ def create_timeline_template():
             color: #9ca3af;
             margin-top: 0.3rem;
             font-weight: 500;
+            transition: color 0.3s ease;
+        }
+
+        /* Dark mode timeline date */
+        [data-theme="dark"] .timeline-date {
+            color: #9ca3af;
         }
 
         .date-controls {
@@ -1857,6 +2222,14 @@ def create_timeline_template():
             border-radius: 12px;
             box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
             border: 1px solid rgba(255, 255, 255, 0.5);
+            transition: all 0.3s ease;
+        }
+
+        /* Dark mode date controls */
+        [data-theme="dark"] .date-controls {
+            background: rgba(17, 24, 39, 0.95);
+            border: 1px solid rgba(55, 65, 81, 0.5);
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
         }
 
         .date-input-group {
@@ -1871,6 +2244,12 @@ def create_timeline_template():
             color: #4a5568;
             font-weight: 600;
             white-space: nowrap;
+            transition: color 0.3s ease;
+        }
+
+        /* Dark mode date labels */
+        [data-theme="dark"] .date-input-group label {
+            color: #d1d5db;
         }
 
         .date-input-group input {
@@ -1886,6 +2265,22 @@ def create_timeline_template():
             color: #374151;
         }
 
+        /* Dark mode date inputs */
+        [data-theme="dark"] .date-input-group input {
+            background: #374151;
+            border-color: #4b5563;
+            color: #f9fafb;
+        }
+
+        [data-theme="dark"] .date-input-group input:hover {
+            border-color: #6b7280;
+        }
+
+        [data-theme="dark"] .date-input-group input:focus {
+            border-color: #f59e0b;
+            box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
+        }
+
         .date-input-group input:hover {
             border-color: #cbd5e0;
             transform: translateY(-1px);
@@ -1917,6 +2312,13 @@ def create_timeline_template():
             flex: 1;
             min-width: 140px;
             text-align: center;
+            transition: all 0.3s ease;
+        }
+
+        /* Dark mode stat cards */
+        [data-theme="dark"] .stat-card {
+            background: rgba(17, 24, 39, 0.9);
+            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
         }
 
         .stat-number {
@@ -1930,6 +2332,12 @@ def create_timeline_template():
             color: #666;
             font-size: 0.7rem;
             margin-top: 0.15rem;
+            transition: color 0.3s ease;
+        }
+
+        /* Dark mode stat labels */
+        [data-theme="dark"] .stat-label {
+            color: #9ca3af;
         }
 
         .loading {
@@ -1939,6 +2347,12 @@ def create_timeline_template():
             height: 200px;
             font-size: 1.1rem;
             color: #666;
+            transition: color 0.3s ease;
+        }
+
+        /* Dark mode loading */
+        [data-theme="dark"] .loading {
+            color: #9ca3af;
         }
 
         .loading::after {
@@ -1964,13 +2378,27 @@ def create_timeline_template():
             background: #fed7d7;
             border-radius: 8px;
             margin: 2rem;
+            transition: all 0.3s ease;
+        }
+
+        /* Dark mode error */
+        [data-theme="dark"] .error {
+            color: #fca5a5;
+            background: #7f1d1d;
         }
     </style>
 </head>
 <body>
     <div class="header">
-        <h1>🤗 Transformers Models Timeline</h1>
-        <p>Interactive timeline to explore models supported by the Hugging Face Transformers library!</p>
+        <div class="header-content">
+            <div class="header-text">
+                <h1>🤗 Transformers Models Timeline</h1>
+                <p>Interactive timeline to explore models supported by the Hugging Face Transformers library!</p>
+            </div>
+            <button id="themeToggle" class="theme-toggle" title="Toggle dark/light mode">
+                <span class="theme-icon">����</span>
+            </button>
+        </div>
     </div>
 
     <div class="controls-wrapper">
@@ -2063,6 +2491,53 @@ def create_timeline_template():
         const minZoom = 0.3; // Minimum zoom (30%)
         const maxZoom = 3.0; // Maximum zoom (300%)
 
+        // Theme management
+        let currentTheme = 'light';
+
+        // Theme detection and switching functions
+        function detectSystemTheme() {
+            return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        }
+
+        function loadTheme() {
+            // Check localStorage first, then system preference
+            const savedTheme = localStorage.getItem('theme');
+            const systemTheme = detectSystemTheme();
+            currentTheme = savedTheme || systemTheme;
+            applyTheme(currentTheme);
+        }
+
+        function applyTheme(theme) {
+            currentTheme = theme;
+            document.documentElement.setAttribute('data-theme', theme);
+
+            // Update theme toggle icon
+            const themeIcon = document.querySelector('.theme-icon');
+            if (themeIcon) {
+                themeIcon.textContent = theme === 'dark' ? '☀️' : '🌙';
+            }
+
+            // Save to localStorage
+            localStorage.setItem('theme', theme);
+        }
+
+        function toggleTheme() {
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            applyTheme(newTheme);
+        }
+
+        // Listen for system theme changes
+        function setupThemeListener() {
+            const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+            mediaQuery.addEventListener('change', (e) => {
+                // Only auto-switch if user hasn't manually set a preference
+                if (!localStorage.getItem('theme')) {
+                    const newTheme = e.matches ? 'dark' : 'light';
+                    applyTheme(newTheme);
+                }
+            });
+        }
+
         async function loadTimeline() {
             const timeline = document.getElementById('timeline');
             timeline.innerHTML = '<div class="loading">Loading timeline...</div>';
@@ -2320,6 +2795,7 @@ def create_timeline_template():
                     label.dataset.tasks = JSON.stringify(model.tasks);
                 }
 
+
                 // Add click handler for expansion
                 label.addEventListener('click', (e) => {
                     e.stopPropagation();
@@ -2368,6 +2844,8 @@ def create_timeline_template():
                         const storedTasks = label.dataset.tasks ? JSON.parse(label.dataset.tasks) : [];
                         const formattedDescription = markdownToHtml(label.dataset.description);
 
+
+
                         // Format tasks for display with task-specific colors
                         const tasksHtml = storedTasks && storedTasks.length > 0 ?
                             `<div class="model-tasks">
@@ -3011,6 +3489,16 @@ def create_timeline_template():
         });
 
         document.addEventListener('DOMContentLoaded', async () => {
+            // Initialize theme
+            loadTheme();
+            setupThemeListener();
+
+            // Add theme toggle event listener
+            const themeToggle = document.getElementById('themeToggle');
+            if (themeToggle) {
+                themeToggle.addEventListener('click', toggleTheme);
+            }
+
             await loadModalities();
             await loadTasks();
             loadTimeline();
@@ -3061,19 +3549,22 @@ def create_timeline_template():
             const btn = document.getElementById('toggleFilters');
             if (!panel || !btn) return;
 
-            // Restore persisted state, default to collapsed
-            const saved = localStorage.getItem('filtersCollapsed');
-            if (saved === 'false') {
-                // Set natural max-height to allow animation on first collapse
-                panel.style.maxHeight = panel.scrollHeight + 'px';
-                btn.textContent = '▾';
-            } else {
-                // set partial height (~2 rows) when collapsed (default state)
-                const partial = 74; // pixels to show when collapsed
-                panel.style.maxHeight = partial + 'px';
-                panel.classList.add('collapsed');
-                btn.textContent = '▸';
-            }
+            // Ensure panel starts collapsed by default
+            panel.classList.add('collapsed');
+            panel.style.maxHeight = '74px';
+            btn.textContent = '▸';
+
+            // Restore persisted state after a short delay to ensure DOM is ready
+            setTimeout(() => {
+                const saved = localStorage.getItem('filtersCollapsed');
+                if (saved === 'false') {
+                    // Expand to full content height
+                    panel.classList.remove('collapsed');
+                    panel.style.maxHeight = panel.scrollHeight + 'px';
+                    btn.textContent = '▾';
+                }
+                // If saved is 'true' or null, keep collapsed (default state)
+            }, 50);
         }
 
         function toggleFilters() {