Darkmode styling

frontend/src/styles/_variables.scss

@@ -7,16 +7,21 @@
   --spacing-md: 16px;
   --border-radius: 6px;
   --rundbgbackgroundcolor: #a0a0a0;
+  --sidebar-font: #fffefe;
+  --color: #ffffff;
+
 }
 
 [data-theme='dark'] {
   --color-bg: #000000;
-  --color-sidebar: #570000;
+  --color-sidebar: #b7d300;
-  --color-accent: #2563eb;
+  --color-accent: #eb2525;
-  --color-muted: #6b7280;
+  --color-muted: #999999;
   --spacing-sm: 8px;
   --spacing-md: 16px;
   --border-radius: 6px;
-  --rundbgbackgroundcolor: #a0a0a0;
+  --rundbgbackgroundcolor: #505050;
-
+  --sidebar-font: #000000;
+  --color: #000000;
+  
 }

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;

frontend/src/styles/main.scss

@@ -99,7 +99,7 @@ body {
   }
 
   a {
-    color: #000000;
+    color: var (--color);
     text-align: center;
     border-style: dashed;
   }