Darkmode styling

frontend/src/styles/components/_diagnostics.scss

@@ -8,7 +8,7 @@
 }
 
 .diagnostics-section {
-  background-color: var(--color-bg);
+  background-color: #ffffff;
   border-radius: var(--border-radius);
   padding: var(--spacing-md);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);

frontend/src/styles/components/_sidebar.scss

@@ -4,7 +4,7 @@
 .sidebar {
   width: 260px;
   background: var(--color-sidebar);
-  color: #fffefe;
+  color: var(--sidebar-font);
   min-height: 100%;
   padding: var(--spacing-md);
   display: flex;
@@ -15,7 +15,7 @@
   ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); flex: 1; }
 
   a, .menu-toggle {
-    color: #ffffff;
+    color: var(--sidebar-font);
     text-decoration: none;
     display: block;
     padding: 8px 12px;
@@ -41,7 +41,7 @@
 
   .sidebar-button {
     background: rgba(255, 93, 43, 0.527);
-    color: #ffffff;
+    color: var(--sidebar-font);
     border: 1px solid rgba(255, 255, 255, 0.801);
     padding: 8px 12px;
     border-radius: 4px;