From 51de6b1d8fdba4c54c416cd51c7c55fd47753549 Mon Sep 17 00:00:00 2001
From: Simone Mosciatti <smosciatti@rippling.com>
Date: Sun, 17 May 2026 14:20:38 -0700
Subject: [PATCH] Fix: add dark mode support for teacher views (submissions,
 matrix, form)

- Add .bg-white and .card-header.bg-light dark mode overrides to main.css
- Add dark mode media queries to inline styles in matrix.html, submissions.html, form.html
- Fix hardcoded light colors that broke dark mode rendering
---
 src/homeworks/templates/homeworks/form.html   | 14 ++++
 src/homeworks/templates/homeworks/matrix.html | 72 +++++++++++++++++++
 .../templates/homeworks/submissions.html      |  6 ++
 static/css/main.css                           |  9 +++
 4 files changed, 101 insertions(+)

diff --git a/src/homeworks/templates/homeworks/form.html b/src/homeworks/templates/homeworks/form.html
index 5888ba7..406f4c3 100644
--- a/src/homeworks/templates/homeworks/form.html
+++ b/src/homeworks/templates/homeworks/form.html
@@ -48,6 +48,20 @@
   #publish-at-wrapper {
     transition: opacity 0.2s ease;
   }
+
+  @media (prefers-color-scheme: dark) {
+    .section-form {
+      background-color: #2d2d2d;
+      border-color: #404040;
+    }
+    .widget-form {
+      background-color: #1a3a2a;
+      border-color: #2d5a3d;
+    }
+    .field-hint {
+      color: #a0b0c0;
+    }
+  }
 </style>
 {% endblock %}
 
diff --git a/src/homeworks/templates/homeworks/matrix.html b/src/homeworks/templates/homeworks/matrix.html
index a65fce5..bfd2d80 100644
--- a/src/homeworks/templates/homeworks/matrix.html
+++ b/src/homeworks/templates/homeworks/matrix.html
@@ -436,6 +436,78 @@ <h6 class="mb-3">Legend:</h6>
         min-width: 120px;
     }
 }
+
+@media (prefers-color-scheme: dark) {
+    .matrix-container {
+        border-color: #404040;
+    }
+
+    .matrix-table thead {
+        background-color: #2d2d2d;
+    }
+
+    .matrix-table thead th {
+        background-color: #2d2d2d;
+        border-bottom-color: #404040;
+    }
+
+    .sticky-cell {
+        background-color: #2d2d2d;
+    }
+
+    .matrix-table thead .sticky-cell {
+        background-color: #363636;
+    }
+
+    .student-cell {
+        border-right-color: #404040;
+    }
+
+    .student-name {
+        color: #e0e0e0;
+    }
+
+    .summary-header {
+        background-color: #363636 !important;
+    }
+
+    .summary-cell {
+        background-color: #2d2d2d;
+        border-left-color: #404040;
+    }
+
+    .status-submitted {
+        background-color: #1a4d2a !important;
+        border-color: #2d7b3d !important;
+    }
+
+    .status-in-progress {
+        background-color: #4d3a1a !important;
+        border-color: #7b5a2d !important;
+    }
+
+    .status-not-started {
+        background-color: #2d2d2d !important;
+        border-color: #404040 !important;
+    }
+
+    .status-overdue {
+        background-color: #4d1a1a !important;
+        border-color: #7b2d2d !important;
+    }
+
+    .legend-box {
+        border-color: #404040;
+    }
+
+    .student-row:hover {
+        background-color: #363636;
+    }
+
+    .student-row:hover .sticky-cell {
+        background-color: #404040;
+    }
+}
 </style>
 
 <script>
diff --git a/src/homeworks/templates/homeworks/submissions.html b/src/homeworks/templates/homeworks/submissions.html
index 237de2e..85bd2fe 100644
--- a/src/homeworks/templates/homeworks/submissions.html
+++ b/src/homeworks/templates/homeworks/submissions.html
@@ -348,5 +348,11 @@ <h5><i class="bi bi-info-circle"></i> No Students Found</h5>
     padding-top: 0.5rem;
     margin-top: 0.5rem;
 }
+
+@media (prefers-color-scheme: dark) {
+    .conversations-in-section {
+        border-top-color: #404040;
+    }
+}
 </style>
 {% endblock %}
diff --git a/static/css/main.css b/static/css/main.css
index df0b045..3503c8f 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -46,11 +46,20 @@ body {
         border-bottom-color: #404040;
     }
 
+    .card-header.bg-light {
+        background-color: #363636 !important;
+    }
+
     .bg-light {
         background-color: #2d2d2d !important;
         color: #e0e0e0 !important;
     }
 
+    .bg-white {
+        background-color: #2d2d2d !important;
+        color: #e0e0e0;
+    }
+
     /* Forms */
     .form-control,
     .form-select {