feat: add style to webui

server/frontend/public/assets/js/chart.js

@@ -1,8 +1,11 @@
 function renderChart(points) {
   const canvas = document.getElementById("consumption-chart");
 
-  const labels = points.map(p => formatPeriod(p.period));
-  const data = points.map(p => p.delta_m3);
+  const labels = points.map((p) => formatPeriod(p.period));
+  const data = points.map((p) => p.delta_m3);
+
+  const style  = getComputedStyle(document.documentElement);
+  const accent = style.getPropertyValue('--color-chart').trim();
 
   let chart = new Chart(canvas, {
     type: "bar",
@@ -11,15 +14,29 @@ function renderChart(points) {
       datasets: [
         {
           label: "Consommation (m³)",
-          data
+          data,
+          backgroundColor: accent + 'cc',
+          borderColor: accent,
+          borderWidth: '1px'
         },
       ],
     },
     options: {
       responsive: true,
       scales: {
+        x: {
+          grid: { display: false },
+          ticks: {
+            color: style.getPropertyValue("--color-text-muted").trim()
+          },
+        },
         y: {
           beginAtZero: true,
+          grid: { color: style.getPropertyValue("--color-border").trim() },
+          ticks: {
+            color: style.getPropertyValue("--color-text-muted").trim(),
+            callback: (v) => v.toFixed(2)
+          },
         },
       },
     },