odoro 1.0.2 → 1.0.3

package/README.md

@@ -14,15 +14,15 @@ package is what it installs.
 
 | Command          | What it does                                              |
 | ---------------- | --------------------------------------------------------- |
-| `odoro dev`      | Development server with hot module replacement.            |
-| `odoro build`    | Production build into `dist/`.                             |
-| `odoro preview`  | Serves `dist/` the way a static host would.                |
-| `odoro create`   | Scaffolds a project — same thing as `npm create odoro`.    |
-| `odoro init`     | Writes `odoro.json` so `odoro add` knows where to write.   |
-| `odoro add <id>` | Copies a registry component into your project.             |
-| `odoro list`     | Prints the registry catalogue.                             |
-| `odoro diff`     | Compares what is installed with what the registry serves.  |
-| `odoro doctor`   | Checks that the project is in a fit state.                 |
+| `odoro dev`      | Development server with hot module replacement.           |
+| `odoro build`    | Production build into `dist/`.                            |
+| `odoro preview`  | Serves `dist/` the way a static host would.               |
+| `odoro create`   | Scaffolds a project — same thing as `npm create odoro`.   |
+| `odoro init`     | Writes `odoro.json` so `odoro add` knows where to write.  |
+| `odoro add <id>` | Copies a registry component into your project.            |
+| `odoro list`     | Prints the registry catalogue.                            |
+| `odoro diff`     | Compares what is installed with what the registry serves. |
+| `odoro doctor`   | Checks that the project is in a fit state.                |
 
 Run `odoro --help` for the full list, including the database commands.
 

package/dist/build-KI7IEVRJ.js

@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+export { buildProject, reportBuild } from './chunk-FJYUQALD.js';
+import './chunk-2EE5QUCW.js';
+import './chunk-JMEHF3KN.js';

package/dist/{chunk-R6PMAMXA.js → chunk-2EE5QUCW.js}

@@ -34,7 +34,9 @@ async function fournisseurDe(root) {
       // `generate` enumere les classes du palier courant. Absent d'un paquet
       // plus ancien : le champ reste alors indefini, et le developpement
       // retombe sur la feuille telle qu'elle est livree.
-      ...typeof generate === "function" ? { classesConnues: () => new Set(generate("core").classNames) } : {}
+      ...typeof generate === "function" ? {
+        classesConnues: () => new Set(generate("core").classNames)
+      } : {}
     };
   } catch {
     return void 0;
@@ -720,6 +722,11 @@ async function applyReactRefresh(code, file) {
     // La carte de source produite par la compilation precedente est reprise et
     // fusionnee : sans cela, les numeros de ligne du debogueur designeraient le
     // code instrumente plutot que la source.
+    //
+    // `true` demande a Babel de lire la carte inline du code recu. Il l'accepte
+    // — verifie : la source reprise est bien le fichier d'origine — mais les
+    // types de la 7.x ne decrivent que la forme objet. L'annotation est
+    // incomplete, pas la valeur.
     inputSourceMap: true,
     sourceMaps: "inline",
     // `skipEnvCheck` leve un garde-fou destine aux configurations globales,
@@ -934,7 +941,9 @@ async function startDevServer(config) {
   const fournisseur = await fournisseurDe(config.root);
   const utilitaires = fournisseur?.classesConnues === void 0 ? void 0 : fournisseur.renderUtilitairesPour(fournisseur.classesConnues());
   if (utilitaires !== void 0) {
-    info(`utilitaires de developpement : ${String(Math.round(utilitaires.length / 1024))} Ko`);
+    info(
+      `utilitaires de developpement : ${String(Math.round(utilitaires.length / 1024))} Ko`
+    );
   }
   const entries = extractEntries(await readFile(indexFile, "utf8"), config.root);
   const specifiers = await scanDependencies(config, entries);
@@ -1005,7 +1014,11 @@ async function startDevServer(config) {
   };
   const serveHtml = async (response) => {
     const html = await readFile(indexFile, "utf8");
-    send(response, injectClient(html, utilitaires !== void 0), MIME[".html"]);
+    send(
+      response,
+      injectClient(html, utilitaires !== void 0),
+      MIME[".html"]
+    );
   };
   const forward = (incoming, response, target) => {
     const url2 = new URL(incoming.url ?? "/", target);

package/dist/{chunk-CJIUP7A3.js → chunk-FJYUQALD.js}

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { extractEntries, applyAlias, isBareSpecifier, fournisseurDe } from './chunk-R6PMAMXA.js';
+import { extractEntries, applyAlias, isBareSpecifier, fournisseurDe } from './chunk-2EE5QUCW.js';
 import { info, colors, size, success, duration } from './chunk-JMEHF3KN.js';
 import { existsSync } from 'fs';
 import { readFile, rm, mkdir, writeFile, cp, stat } from 'fs/promises';

package/dist/cli.js

@@ -131,7 +131,7 @@ function rootFrom(flags, positional) {
 async function run(argv) {
   const { command, positional, flags } = parseArgs(argv);
   if (flags["version"] === true) {
-    const manifest = await import('./package-VMTZDORI.js');
+    const manifest = await import('./package-2JOBLFXE.js');
     console.log(manifest.default.version);
     return 0;
   }
@@ -142,7 +142,7 @@ async function run(argv) {
   switch (command) {
     case "create":
     case "new": {
-      const { createCommand } = await import('./create-GD6O2TPL.js');
+      const { createCommand } = await import('./create-VUSKHXBN.js');
       const options = {};
       if (positional[0] !== void 0) options.name = positional[0];
       if (typeof flags["template"] === "string") options.template = flags["template"];
@@ -156,13 +156,13 @@ async function run(argv) {
       return createCommand(options);
     }
     case "dev": {
-      const { startDevServer } = await import('./server-ATGFRVSW.js');
+      const { startDevServer } = await import('./server-DXOQAPVX.js');
       const config = await loadConfig(rootFrom(flags, positional), overridesFrom(flags));
       await startDevServer(config);
       return new Promise(() => void 0);
     }
     case "build": {
-      const { buildProject, reportBuild } = await import('./build-GIPMPYJ3.js');
+      const { buildProject, reportBuild } = await import('./build-KI7IEVRJ.js');
       const config = await loadConfig(rootFrom(flags, positional), overridesFrom(flags));
       const output = await buildProject(config);
       reportBuild(output, process.cwd());

package/dist/{create-GD6O2TPL.js → create-VUSKHXBN.js}

@@ -444,9 +444,7 @@ async function createCommand(options) {
     })
   ));
   if (!templates.includes(template)) {
-    prompts.cancel(
-      `Unknown template: "${template}". Available: ${templates.join(", ")}.`
-    );
+    prompts.cancel(`Unknown template: "${template}". Available: ${templates.join(", ")}.`);
     return 1;
   }
   const modules = await askModules(options);
@@ -485,7 +483,9 @@ async function createCommand(options) {
   if (overwrite !== void 0) scaffoldOptions.overwrite = overwrite;
   scaffoldOptions.modules = modules;
   const { files } = await scaffold(scaffoldOptions);
-  spinner2.stop(`${String(files.length)} files written to ${colors.cyan(basename(target))}`);
+  spinner2.stop(
+    `${String(files.length)} files written to ${colors.cyan(basename(target))}`
+  );
   if (withGit && !existsSync(resolve(target, ".git"))) {
     try {
       execSync("git init -q", { cwd: target, stdio: "ignore" });

package/dist/index.js

@@ -2,6 +2,6 @@
 export { startPreviewServer } from './chunk-34ES2ICQ.js';
 export { defineConfig, loadConfig } from './chunk-DL3NPC4H.js';
 import './chunk-T6RLHSCW.js';
-export { buildProject, reportBuild } from './chunk-CJIUP7A3.js';
-export { ModuleGraph, depFileName, detectSelfAccepting, optimizeDeps, scanDependencies, startDevServer } from './chunk-R6PMAMXA.js';
+export { buildProject, reportBuild } from './chunk-FJYUQALD.js';
+export { ModuleGraph, depFileName, detectSelfAccepting, optimizeDeps, scanDependencies, startDevServer } from './chunk-2EE5QUCW.js';
 import './chunk-JMEHF3KN.js';

package/dist/{package-VMTZDORI.js → package-2JOBLFXE.js}

@@ -2,7 +2,7 @@
 // package.json
 var package_default = {
   name: "odoro",
-  version: "1.0.2",
+  version: "1.0.3",
   type: "module",
   license: "UNLICENSED",
   author: "BouBouw",
@@ -44,13 +44,14 @@ var package_default = {
     prepublishOnly: "pnpm run build"
   },
   dependencies: {
-    "@babel/core": "^8.0.1",
+    "@babel/core": "^7.29.7",
     "@clack/prompts": "^0.11.0",
     esbuild: "^0.28.2",
     picocolors: "^1.1.1",
     "react-refresh": "^0.18.0"
   },
   devDependencies: {
+    "@types/babel__core": "^7.20.5",
     "@types/node": "^22.18.8",
     tsup: "^8.5.0",
     typescript: "^5.9.3",

package/dist/{server-ATGFRVSW.js → server-DXOQAPVX.js}

@@ -1,3 +1,3 @@
 #!/usr/bin/env node
-export { extractEntries, injectClient, startDevServer } from './chunk-R6PMAMXA.js';
+export { extractEntries, injectClient, startDevServer } from './chunk-2EE5QUCW.js';
 import './chunk-JMEHF3KN.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "odoro",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "type": "module",
   "license": "UNLICENSED",
   "author": "BouBouw",
@@ -35,13 +35,14 @@
     }
   },
   "dependencies": {
-    "@babel/core": "^8.0.1",
+    "@babel/core": "^7.29.7",
     "@clack/prompts": "^0.11.0",
     "esbuild": "^0.28.2",
     "picocolors": "^1.1.1",
     "react-refresh": "^0.18.0"
   },
   "devDependencies": {
+    "@types/babel__core": "^7.20.5",
     "@types/node": "^22.18.8",
     "tsup": "^8.5.0",
     "typescript": "^5.9.3",

package/templates/react-ts/_variantes/sans-libs/src/App.tsx

@@ -14,7 +14,7 @@
  * @module
  */
 
-import { useState, type ReactElement } from 'react'
+import { useEffect, useState, type ReactElement } from 'react'
 
 import { Fond } from '@/fond'
 
@@ -57,19 +57,128 @@ function Barre(): ReactElement {
           <span className="marque-mot">ODORO</span>
         </span>
 
-        <a
-          href="https://odoro.dev"
-          target="_blank"
-          rel="noreferrer"
-          className="gelule gelule-lien"
-        >
-          odoro.dev
-        </a>
+        <div className="barre-fin">
+          <a
+            href="https://odoro.dev"
+            target="_blank"
+            rel="noreferrer"
+            className="gelule gelule-lien"
+          >
+            odoro.dev
+          </a>
+          <BasculeTheme />
+        </div>
       </div>
     </header>
   )
 }
 
+/* -------------------------------------------------------------------------- */
+/*  Theme                                                                      */
+/* -------------------------------------------------------------------------- */
+
+/** Les trois etats de la bascule. */
+type Theme = 'systeme' | 'clair' | 'sombre'
+
+/** Ou le choix est memorise. Le script de `index.html` lit la meme cle. */
+const CLE_THEME = 'odoro-theme'
+
+/** L'ordre du cycle, au clic. */
+const CYCLE: readonly Theme[] = ['systeme', 'clair', 'sombre']
+
+/**
+ * Pose le theme sur la racine du document.
+ *
+ * `systeme` retire l'attribut plutot que d'en poser un troisieme : la feuille
+ * de style ecoute `data-theme`, et son absence rend la main a la preference du
+ * navigateur.
+ */
+function poserTheme(theme: Theme): void {
+  if (theme === 'systeme') delete document.documentElement.dataset.theme
+  else document.documentElement.dataset.theme = theme === 'clair' ? 'light' : 'dark'
+}
+
+/** Le theme memorise, ou `systeme`. */
+function themeMemorise(): Theme {
+  try {
+    const valeur = localStorage.getItem(CLE_THEME)
+    if (valeur === 'light') return 'clair'
+    if (valeur === 'dark') return 'sombre'
+    return 'systeme'
+  } catch {
+    // Stockage refuse — fenetre privee, cookies bloques. Le theme du systeme
+    // reste une reponse valable.
+    return 'systeme'
+  }
+}
+
+/** Les trois pictogrammes, dessines dans le flux. */
+function Pictogramme({ theme }: { readonly theme: Theme }): ReactElement {
+  const commun = {
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: 1.8,
+    strokeLinecap: 'round' as const,
+    strokeLinejoin: 'round' as const,
+    'aria-hidden': true,
+    style: { width: '1.15rem', height: '1.15rem' },
+  }
+
+  if (theme === 'clair') {
+    return (
+      <svg {...commun}>
+        <circle cx="12" cy="12" r="4" />
+        <path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" />
+      </svg>
+    )
+  }
+
+  if (theme === 'sombre') {
+    return (
+      <svg {...commun}>
+        <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z" />
+      </svg>
+    )
+  }
+
+  return (
+    <svg {...commun}>
+      <rect x="2" y="4" width="20" height="13" rx="2" />
+      <path d="M8 21h8M12 17v4" />
+    </svg>
+  )
+}
+
+/** La bascule de theme : systeme, clair, sombre. */
+function BasculeTheme(): ReactElement {
+  const [theme, setTheme] = useState<Theme>(() => themeMemorise())
+
+  useEffect(() => {
+    poserTheme(theme)
+    try {
+      if (theme === 'systeme') localStorage.removeItem(CLE_THEME)
+      else localStorage.setItem(CLE_THEME, theme === 'clair' ? 'light' : 'dark')
+    } catch {
+      // Le theme reste applique pour la session, meme sans stockage.
+    }
+  }, [theme])
+
+  return (
+    <button
+      type="button"
+      aria-label={`Theme : ${theme}`}
+      title={`Theme : ${theme}`}
+      className="gelule bascule"
+      onClick={() => {
+        setTheme((actuel) => CYCLE[(CYCLE.indexOf(actuel) + 1) % CYCLE.length] ?? 'systeme')
+      }}
+    >
+      <Pictogramme theme={theme} />
+    </button>
+  )
+}
+
 /* -------------------------------------------------------------------------- */
 /*  Sections                                                                   */
 /* -------------------------------------------------------------------------- */
@@ -249,10 +358,12 @@ function Cloture(): ReactElement {
 /** Racine de l'application. */
 export function App(): ReactElement {
   return (
-    <div className="app-shell">
+    // Le fond est pose ici et non dans le contenu : ancre plus bas, il
+    // commencait sous la barre et laissait une bande plus sombre derriere elle.
+    <div className="app-shell app-shell-fond">
+      <Fond />
       <Barre />
       <main className="principal">
-        <Fond />
         <Hero />
         <Piliers />
         <Cloture />

package/templates/react-ts/_variantes/sans-libs/src/styles.css

@@ -21,11 +21,14 @@
   color-scheme: light dark;
 }
 
-/* La preference du systeme, faute d'un selecteur de theme : c'est ce que les
-   jetons apporteraient, et l'absence de bibliotheque ne doit pas se payer d'un
-   fond blanc au milieu de la nuit. */
+/* Les valeurs du theme sombre, ecrites une fois et reprises deux fois.
+
+   La bascule pose `data-theme` sur la racine ; sans attribut, la preference du
+   navigateur decide. Les deux regles sont donc necessaires : la seconde sans la
+   premiere ignorerait le choix du visiteur, la premiere sans la seconde
+   rendrait un fond blanc au milieu de la nuit. */
 @media (prefers-color-scheme: dark) {
-  :root {
+  :root:not([data-theme='light']) {
     --fond: #09090b;
     --encre: #fafafa;
     --doux: #a1a1aa;
@@ -34,6 +37,25 @@
   }
 }
 
+:root[data-theme='dark'] {
+  --fond: #09090b;
+  --encre: #fafafa;
+  --doux: #a1a1aa;
+  --filet: #27272a;
+  --surface: #18181b;
+}
+
+/* Le choix explicite est dit au navigateur : sans cela, `light-dark()`, les
+   controles natifs et les barres de defilement continuent de suivre un systeme
+   en nuit alors que le visiteur a demande le clair. */
+:root[data-theme='light'] {
+  color-scheme: light;
+}
+
+:root[data-theme='dark'] {
+  color-scheme: dark;
+}
+
 * {
   box-sizing: border-box;
 }
@@ -93,12 +115,30 @@ pre {
   text-decoration: none;
 }
 
-.gelule-lien {
+.barre-fin {
   margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.gelule-lien {
   color: var(--doux);
   font-size: 0.875rem;
 }
 
+.bascule {
+  width: 3.5rem;
+  justify-content: center;
+  padding: 0;
+  color: var(--doux);
+  cursor: pointer;
+}
+
+.bascule:hover {
+  color: var(--encre);
+}
+
 .gelule-lien:hover {
   color: var(--encre);
 }
@@ -125,6 +165,10 @@ pre {
 
 /* ----- Coquille ----------------------------------------------------------- */
 
+.app-shell-fond {
+  position: relative;
+}
+
 .principal {
   position: relative;
 }

package/templates/react-ts/_variantes/sans-routeur/src/App.tsx

@@ -21,7 +21,7 @@
 
 import { Reveal, Stagger } from '@odoro-cli/libs/motion'
 import { buttonClasses } from '@odoro-cli/libs/ui'
-import { useState, type CSSProperties, type ReactElement } from 'react'
+import { useEffect, useState, type CSSProperties, type ReactElement } from 'react'
 
 import { Fond } from '@/fond'
 
@@ -87,20 +87,137 @@ function Barre(): ReactElement {
           </span>
         </span>
 
-        <a
-          href="https://odoro.dev"
-          target="_blank"
-          rel="noreferrer"
-          className="o-ml-auto o-inline-flex o-h-14 o-shrink-0 o-items-center o-rounded-full o-border-w-1 o-px-5 o-text-sm o-no-underline o-backdrop-blur-xl o-text-zinc-600 dark:o-text-zinc-300 hover:o-text-zinc-950 dark:hover:o-text-white"
-          style={GELULE}
-        >
-          odoro.dev
-        </a>
+        <div className="o-ml-auto o-flex o-items-center o-gap-3">
+          <a
+            href="https://odoro.dev"
+            target="_blank"
+            rel="noreferrer"
+            className="o-inline-flex o-h-14 o-shrink-0 o-items-center o-rounded-full o-border-w-1 o-px-5 o-text-sm o-no-underline o-backdrop-blur-xl o-text-zinc-600 dark:o-text-zinc-300 hover:o-text-zinc-950 dark:hover:o-text-white"
+            style={GELULE}
+          >
+            odoro.dev
+          </a>
+          <BasculeTheme />
+        </div>
       </div>
     </header>
   )
 }
 
+/* -------------------------------------------------------------------------- */
+/*  Theme                                                                      */
+/* -------------------------------------------------------------------------- */
+
+/** Les trois etats de la bascule. */
+type Theme = 'systeme' | 'clair' | 'sombre'
+
+/** Ou le choix est memorise. Le script de `index.html` lit la meme cle. */
+const CLE_THEME = 'odoro-theme'
+
+/** L'ordre du cycle, au clic. */
+const CYCLE: readonly Theme[] = ['systeme', 'clair', 'sombre']
+
+/**
+ * Pose le theme sur la racine du document.
+ *
+ * `systeme` retire l'attribut plutot que d'en poser un troisieme : la feuille
+ * de style ecoute `data-theme`, et son absence rend la main a la preference du
+ * navigateur. C'est ce qui permet a une page laissee en « systeme » de suivre
+ * le passage en nuit sans etre rouverte.
+ */
+function poserTheme(theme: Theme): void {
+  if (theme === 'systeme') delete document.documentElement.dataset.theme
+  else document.documentElement.dataset.theme = theme === 'clair' ? 'light' : 'dark'
+}
+
+/** Le theme memorise, ou `systeme`. */
+function themeMemorise(): Theme {
+  try {
+    const valeur = localStorage.getItem(CLE_THEME)
+    if (valeur === 'light') return 'clair'
+    if (valeur === 'dark') return 'sombre'
+    return 'systeme'
+  } catch {
+    // Stockage refuse — fenetre privee, cookies bloques. Le theme du systeme
+    // reste une reponse valable ; echouer ici priverait la page de son rendu.
+    return 'systeme'
+  }
+}
+
+/** Les trois pictogrammes, dessines plutot qu'importes : les icones sont optionnelles. */
+function Pictogramme({ theme }: { readonly theme: Theme }): ReactElement {
+  const commun = {
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: 1.8,
+    strokeLinecap: 'round' as const,
+    strokeLinejoin: 'round' as const,
+    'aria-hidden': true,
+    style: { width: '1.15rem', height: '1.15rem' },
+  }
+
+  if (theme === 'clair') {
+    return (
+      <svg {...commun}>
+        <circle cx="12" cy="12" r="4" />
+        <path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" />
+      </svg>
+    )
+  }
+
+  if (theme === 'sombre') {
+    return (
+      <svg {...commun}>
+        <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z" />
+      </svg>
+    )
+  }
+
+  return (
+    <svg {...commun}>
+      <rect x="2" y="4" width="20" height="13" rx="2" />
+      <path d="M8 21h8M12 17v4" />
+    </svg>
+  )
+}
+
+/**
+ * La bascule de theme.
+ *
+ * Trois etats et non deux : « systeme » est un choix a part entiere, et le
+ * retirer obligerait un visiteur a re-choisir a chaque changement de sa
+ * preference.
+ */
+function BasculeTheme(): ReactElement {
+  const [theme, setTheme] = useState<Theme>(() => themeMemorise())
+
+  useEffect(() => {
+    poserTheme(theme)
+    try {
+      if (theme === 'systeme') localStorage.removeItem(CLE_THEME)
+      else localStorage.setItem(CLE_THEME, theme === 'clair' ? 'light' : 'dark')
+    } catch {
+      // Le theme reste applique pour la session, meme sans stockage.
+    }
+  }, [theme])
+
+  return (
+    <button
+      type="button"
+      aria-label={`Theme : ${theme}`}
+      title={`Theme : ${theme}`}
+      onClick={() => {
+        setTheme((actuel) => CYCLE[(CYCLE.indexOf(actuel) + 1) % CYCLE.length] ?? 'systeme')
+      }}
+      className="o-inline-flex o-size-14 o-shrink-0 o-cursor-pointer o-items-center o-justify-center o-rounded-full o-border-w-1 o-backdrop-blur-xl o-text-zinc-600 dark:o-text-zinc-300 hover:o-text-zinc-950 dark:hover:o-text-white"
+      style={GELULE}
+    >
+      <Pictogramme theme={theme} />
+    </button>
+  )
+}
+
 /* -------------------------------------------------------------------------- */
 /*  Sections                                                                   */
 /* -------------------------------------------------------------------------- */
@@ -312,10 +429,13 @@ function Cloture(): ReactElement {
 /** Racine de l'application. */
 export function App(): ReactElement {
   return (
-    <div className="app-shell">
+    // `relative` porte le fond, pose ici et non dans le contenu : ancre plus
+    // bas, il commencait sous la barre et laissait une bande plus sombre
+    // derriere elle en haut de page.
+    <div className="app-shell o-relative">
+      <Fond />
       <Barre />
       <main className="o-relative">
-        <Fond />
         <Hero />
         <Piliers />
         <Cloture />

package/templates/react-ts/index.html

@@ -4,7 +4,18 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="theme-color" content="#3b82f6" />
     <title>Odoro</title>
+    <script>
+      // Applique le theme memorise avant la premiere peinture. Le faire depuis
+      // React arriverait trop tard : un visiteur en theme force verrait un
+      // eclair de l'autre theme, le temps que le script se charge.
+      try {
+        var theme = localStorage.getItem('odoro-theme')
+        if (theme === 'light' || theme === 'dark')
+          document.documentElement.dataset.theme = theme
+      } catch (error) {}
+    </script>
   </head>
   <body>
     <div id="root"></div>