feat: barre d'outils de lecture epinglee, coloration syntaxique des fichiers de code et avatars predefinis (#115, #117, BUG-078)

frontend/js/ui.js

@@ -137,14 +137,26 @@ export const RightSidebarManager = {
 // ---------------------------------------------------------------------------
 // Theme
 // ---------------------------------------------------------------------------
+const _THEME_MODES = ["dark", "light", "high-contrast", "sepia"];
+
 export function initTheme() {
-  const saved = localStorage.getItem("obsigate-theme") || "dark";
-  applyTheme(saved);
+  // The theme engine (themes.js) owns the CSS variables and the theme *key*;
+  // the <html data-theme> attribute must carry the *mode* (dark/light/…). Read
+  // the persisted mode here so the first paint and the highlight.js stylesheet
+  // are right before the async theme init runs (BUG-078).
+  let mode = "dark";
+  try { mode = localStorage.getItem("obsigate-theme-mode") || "dark"; } catch (e) { /* ignore */ }
+  applyTheme(mode);
 }
 
 export function applyTheme(theme) {
-  document.documentElement.setAttribute("data-theme", theme);
-  localStorage.setItem("obsigate-theme", theme);
+  let mode = theme;
+  if (_THEME_MODES.indexOf(mode) === -1) {
+    // Callers may pass a theme key (legacy): fall back to the persisted mode.
+    try { mode = localStorage.getItem("obsigate-theme-mode") || "dark"; } catch (e) { mode = "dark"; }
+  }
+  const isDark = mode === "dark";
+  document.documentElement.setAttribute("data-theme", mode);
 
   // Update theme button icon and label
   const themeBtn = document.getElementById("theme-toggle");
@@ -152,23 +164,23 @@ export function applyTheme(theme) {
   if (themeBtn && themeLabel) {
     const icon = themeBtn.querySelector("i");
     if (icon) {
-      icon.setAttribute("data-lucide", theme === "dark" ? "moon" : "sun");
+      icon.setAttribute("data-lucide", isDark ? "moon" : "sun");
     }
-    themeLabel.textContent = theme === "dark" ? t('theme.dark') : t('theme.light');
+    themeLabel.textContent = isDark ? t('theme.dark') : t('theme.light');
     safeCreateIcons();
   }
 
-  // Swap highlight.js theme
+  // Swap highlight.js theme — keyed on the mode, not the theme key (BUG-078).
   const darkSheet = document.getElementById("hljs-theme-dark");
   const lightSheet = document.getElementById("hljs-theme-light");
   if (darkSheet && lightSheet) {
-    darkSheet.disabled = theme !== "dark";
-    lightSheet.disabled = theme !== "light";
+    darkSheet.disabled = !isDark;
+    lightSheet.disabled = isDark;
   }
 
   // Update Mermaid theme for newly rendered diagrams
   import('./mermaid-viewer.js').then(function(m) {
-    m.updateMermaidTheme(theme === 'dark');
+    m.updateMermaidTheme(isDark);
   }).catch(function() {});
 }