diff --git a/Dockerfile b/Dockerfile index d9f203b..410af54 100644 --- a/Dockerfile +++ b/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 LC_ALL C.UTF-8 +ENV LANG=C.UTF-8 +ENV LC_ALL=C.UTF-8 -ENV PYTHONUNBUFFERED 1 -ENV PATH "/venv/bin:$PATH" +ENV PYTHONUNBUFFERED=1 +ENV PATH="/venv/bin:$PATH" RUN apk add --no-cache --update python3 curl diff --git a/static/css/main.css b/static/css/main.css index b1de8db..84c6cd7 100644 --- a/static/css/main.css +++ b/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, diff --git a/templates/index.html b/templates/index.html index e4efde6..1cd7bd8 100644 --- a/templates/index.html +++ b/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); + } + }); {% endblock %}