Refactor Dockerfile and enhance CSS for improved theme support

- Updated Dockerfile to standardize environment variable syntax and improve readability.
- Added new CSS variables for chart grid color and enhanced dark theme contrast for CPU chart statistics.
- Modified index.html to utilize new CSS variables for better theme adaptability and improved chart rendering.

Dockerfile

@@ -7,7 +7,7 @@ RUN apk update && \
     build-base python3-dev dos2unix
 
 RUN python3 -m venv /venv
-ENV PATH "/venv/bin:$PATH"
+ENV PATH="/venv/bin:$PATH"
 COPY ./requirements.txt /
 RUN --mount=type=cache,target=/root/.cache/pip \
     pip install -r /requirements.txt
@@ -19,11 +19,11 @@ RUN dos2unix /docker-entrypoint.sh && \
 
 FROM alpine:3.21
 
-ENV LANG C.UTF-8
+ENV LANG=C.UTF-8
-ENV LC_ALL C.UTF-8
+ENV LC_ALL=C.UTF-8
 
-ENV PYTHONUNBUFFERED 1
+ENV PYTHONUNBUFFERED=1
-ENV PATH "/venv/bin:$PATH"
+ENV PATH="/venv/bin:$PATH"
 
 RUN apk add --no-cache --update python3 curl
 

static/css/main.css

@@ -38,6 +38,7 @@
   --border: 1px;
   --depth: 1;
   --noise: 0;
+  --chart-grid-color: color-mix(in oklch, var(--color-base-content) 22%, transparent);
 }
 
 @plugin "daisyui/theme" {
@@ -74,6 +75,7 @@
   --border: 1px;
   --depth: 1;
   --noise: 0;
+  --chart-grid-color: color-mix(in oklch, var(--color-base-content) 22%, transparent);
 }
 
 /* VTB gradient (both themes) */
@@ -142,6 +144,14 @@
   background-color: color-mix(in oklch, var(--color-base-content) 12%, transparent);
 }
 
+/* Dark theme: better contrast for CPU chart stats (Mean, ±0.5σ) */
+[data-theme=dark] section[aria-label="CPU distribution chart"] .text-success {
+  color: oklch(85% 0.16 163);
+}
+[data-theme=dark] section[aria-label="CPU distribution chart"] .text-error\/60 {
+  color: oklch(82% 0.18 13);
+}
+
 /* Accessibility: ensure focus ring is visible on key controls */
 .btn:focus-visible,
 .select:focus-within,

templates/index.html

@@ -662,6 +662,8 @@
             warning: getCSSVar('--color-warning'),
             error: getCSSVar('--color-error')
         };
+        const textColor = getCSSVar('--color-base-content');
+        const gridColor = getCSSVar('--chart-grid-color') || textColor;
         
         cpuDistributionChart = new Chart(ctx, {
             type: 'bar',
@@ -728,15 +730,18 @@
                             boxWidth: 14,
                             boxHeight: 14,
                             padding: 12,
-                            color: 'inherit',
+                            color: textColor,
                             generateLabels: function(chart) {
                                 const datasets = chart.data.datasets;
+                                const labelColor = getCSSVar('--color-base-content');
                                 return datasets.map(function(ds, i) {
                                     return {
                                         text: ds.label,
                                         fillStyle: ds.borderColor,
                                         strokeStyle: ds.borderColor,
                                         lineWidth: 1,
+                                        fontColor: labelColor,
+                                        color: labelColor,
                                         hidden: !chart.isDatasetVisible(i),
                                         datasetIndex: i
                                     };
@@ -782,8 +787,9 @@
                     y: {
                         beginAtZero: true,
                         max: 100,
-                        grid: { drawBorder: false },
+                        grid: { drawBorder: false, color: gridColor },
                         ticks: {
+                            color: textColor,
                             callback: value => value + '%'
                         }
                     },
@@ -835,6 +841,15 @@
             }
         }
     });
+
+    document.addEventListener('themechange', function() {
+        if (cpuDistributionChart) {
+            const auditId = document.getElementById('auditSelector').value;
+            cpuDistributionChart.destroy();
+            cpuDistributionChart = null;
+            if (auditId) updateCPUCharts(auditId);
+        }
+    });
 </script>
 {% endblock %}