Amélioration avec des fonctions d'un vrai dashboard automotive et containerisation du projet pour faciliter le déploiement

2026-09-12 21:13:24 +02:00
parent d170f95c92
commit d8eb7f4375
31 changed files with 2233 additions and 65 deletions
@@ -0,0 +1,24 @@
+export const accents = { green: '#d2ef92', blue: '#8ac7ff', red: '#ff9e99' };
+export function palette(color, light = false) {
+  color = /^#[0-9a-f]{6}$/i.test(color) ? color : accents.green;
+  const rgb = [1, 3, 5].map(i => parseInt(color.slice(i, i + 2), 16));
+  const luminance = c => { const n = c / 255; return n <= .04045 ? n / 12.92 : ((n + .055) / 1.055) ** 2.4; };
+  const lum = values => values.map(luminance).reduce((n, v, i) => n + v * [.2126, .7152, .0722][i], 0);
+  // Maintain readable accent text on either background, even for arbitrary colors.
+  for (let i = 0; i < 40 && (light ? lum(rgb) > .17 : lum(rgb) < .36); i++) {
+    rgb.forEach((n, j) => rgb[j] = Math.round(light ? n * .9 : n + (255 - n) * .12));
+  }
+  return { accent: `#${rgb.map(n => n.toString(16).padStart(2, '0')).join('')}`, ink: light ? '#ffffff' : '#101313' };
+}
+export function applyTheme(storage) {
+  const light = storage.get('theme') === 'light';
+  const color = accents[storage.get('accent', 'green')] || storage.get('customColor', accents.green);
+  const values = palette(color, light);
+  document.body.classList.toggle('light', light);
+  document.body.classList.toggle('digital-dials', storage.get('dialStyle') === 'digital');
+  document.body.classList.toggle('luminous-dials', storage.get('dialStyle') === 'luminous');
+  document.querySelectorAll('.gauge > svg').forEach(svg => svg.setAttribute('viewBox', '12 10 276 340'));
+  document.body.style.setProperty('--accent', values.accent);
+  document.body.style.setProperty('--ink', values.ink);
+  document.dispatchEvent(new Event('caria-theme'));
+}