multilingualprogramming
diff --git a/‎public/app.mjs‎
Lines changed: 22 additions & 1 deletion b/‎public/app.mjs‎
Lines changed: 22 additions & 1 deletion
diff --git a/‎public/apropos.html‎
Lines changed: 14 additions & 3 deletions b/‎public/apropos.html‎
Lines changed: 14 additions & 3 deletions
diff --git a/‎public/index.html‎
Lines changed: 10 additions & 0 deletions b/‎public/index.html‎
Lines changed: 10 additions & 0 deletions
@@ -475,6 +475,27 @@ function resizeCanvas(config) {
   canvas.height = config.hauteur * cell;
 }
 
+function canvasBackgroundFor(configuration) {
+  const cssBackground = getComputedStyle(document.documentElement).getPropertyValue("--bg").trim();
+  const theme = document.documentElement.dataset.theme || "dark";
+  const configuredBackground = configuration.rendu.fond;
+  if (!configuredBackground) return cssBackground || "#05070d";
+  if (theme === "light") {
+    const darkPresetBackgrounds = new Set([
+      "#020b12",
+      "#04080a",
+      "#05070d",
+      "#06050a",
+      "#07110a",
+      "#07111a",
+    ]);
+    if (darkPresetBackgrounds.has(String(configuredBackground).toLowerCase())) {
+      return cssBackground || "#ffffff";
+    }
+  }
+  return configuredBackground;
+}
+
 function render() {
   if (!state.universe) return;
   const { configuration, lignes, sorties } = state.universe;
@@ -483,7 +504,7 @@ function render() {
     featureModules.perturb.onConfigApplied(configuration);
   }
   const cell = Number(configuration.rendu.taille_cellule || 5);
-  ctx.fillStyle = configuration.rendu.fond || "#05070d";
+  ctx.fillStyle = canvasBackgroundFor(configuration);
   ctx.fillRect(0, 0, canvas.width, canvas.height);
   const gridHeight = lignes.length;
   const gridWidth = lignes.length > 0 ? lignes[0].length : 1;
 
@@ -7,6 +7,14 @@
     <title>À propos — Automaginarium</title>
     <meta name="description"
       content="Découvrez Automaginarium, un laboratoire configurable d'automates cellulaires en Multilingual français." />
+    <script>
+      (() => {
+        const storedTheme = localStorage.getItem("automaginarium-theme");
+        const theme = storedTheme || (matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+        document.documentElement.dataset.theme = theme;
+        document.documentElement.style.colorScheme = theme;
+      })();
+    </script>
     <link rel="stylesheet" href="style.css" />
     <style>
       body {
@@ -86,7 +94,7 @@
 
       .tech-card {
         padding: 20px;
-        background: rgba(var(--panel), 0.5);
+        background: rgb(var(--panel-rgb) / 0.5);
         border: 1px solid var(--line);
         border-radius: 8px;
         -webkit-backdrop-filter: blur(10px);
@@ -145,7 +153,7 @@
       .attribution {
         margin-top: 48px;
         padding: 24px;
-        background: rgba(var(--panel), 0.3);
+        background: rgb(var(--panel-rgb) / 0.3);
         border-left: 3px solid var(--accent);
         border-radius: 4px;
         font-size: 0.9rem;
@@ -161,6 +169,7 @@
         <h1 id="app-title">Automaginarium</h1>
       </div>
       <nav class="header-links">
+        <button type="button" class="ghost-btn theme-toggle" data-theme-toggle>Mode sombre</button>
         <a href="index.html" title="Retour à l'application">Application</a>
         <a href="https://github.com/multilingualprogramming/Automaginarium" title="GitHub" target="_blank"
           rel="noopener noreferrer">GitHub</a>
@@ -296,6 +305,8 @@ <h2>Documentation</h2>
         <a href="index.html">Retour à l'Application</a>
       </div>
     </main>
+    <script src="theme.js"></script>
   </body>
 
-</html>
+</html>
+
@@ -8,6 +8,14 @@
       name="description"
       content="Laboratoire configurable d'automates cellulaires en Multilingual fran&ccedil;ais."
     />
+    <script>
+      (() => {
+        const storedTheme = localStorage.getItem("automaginarium-theme");
+        const theme = storedTheme || (matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+        document.documentElement.dataset.theme = theme;
+        document.documentElement.style.colorScheme = theme;
+      })();
+    </script>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
@@ -21,6 +29,7 @@ <h1 id="app-title">Automaginarium</h1>
         <span id="hero-status-text">Synchronisation live</span>
       </div>
       <nav class="header-links">
+        <button type="button" class="ghost-btn theme-toggle" data-theme-toggle>Mode sombre</button>
         <a href="apropos.html" title="À propos">À propos</a>
         <a href="https://github.com/multilingualprogramming/Automaginarium" title="GitHub" target="_blank" rel="noopener noreferrer">GitHub</a>
       </nav>
@@ -434,6 +443,7 @@ <h2 id="gallery-title">Univers remarquables</h2>
       </section>
     </main>
 
+    <script src="theme.js"></script>
     <script src="automate-core.js"></script>
     <script type="module" src="app.mjs"></script>
   </body>