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.

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 %}