feat: ajout des badges thèmes rapides dans le modal CSS

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/ui/css-modal.js

@@ -1,6 +1,34 @@
 const CSS_TABS = ['general', 'police', 'contenu', 'avance'];
 let activeTab = CSS_TABS[0];
 
+const QUICK_THEME_KEY = 'pena_quick_theme';
+
+const QUICK_THEMES = {
+  dark: `.content { background: #1e1e2e; color: #cdd6f4; }
+.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { color: #cdd6f4; }
+.content p, .content ul li, .content ol li { color: #cdd6f4; }
+.content a { color: #89b4fa; }
+.content a:visited { color: #cba6f7; }
+.content code { background: #313244; color: #cba6f7; }
+.content pre { background: #313244; }
+.content blockquote { border-color: #6c7086; color: #a6adc8; }
+.content table td, .content table th { color: #cdd6f4; }`,
+
+  sepia: `.content { background: #f4ecd8; }
+.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { color: #5c4a1e; }
+.content p, .content ul li, .content ol li { color: #5c4a1e; }
+.content a { color: #7a5c2e; }
+.content code { background: #e8d5b0; color: #5c4a1e; }
+.content pre { background: #e8d5b0; }`,
+
+  'large-text': `.content { font-size: 18px; }
+.content p { line-height: 1.8; }`,
+
+  emerald: `.content a:hover { color: #10b981; }
+.content table th { border-bottom-color: #10b981; }
+.content table td { border-bottom-color: rgba(16, 185, 129, 0.25); }`,
+};
+
 function cssKey(tab) { return `pena_css_${tab}`; }
 
 function loadTabCss(tab) { return localStorage.getItem(cssKey(tab)) ?? ''; }
@@ -17,11 +45,22 @@ function applyCustomCss() {
     styleEl.id = 'pena-custom-style';
     document.head.appendChild(styleEl);
   }
-  styleEl.textContent = CSS_TABS.map(t => loadTabCss(t)).filter(Boolean).join('\n');
+  const tabCss = CSS_TABS.map(t => loadTabCss(t)).filter(Boolean).join('\n');
+  const activeTheme = localStorage.getItem(QUICK_THEME_KEY);
+  const themeCss = activeTheme ? (QUICK_THEMES[activeTheme] ?? '') : '';
+  styleEl.textContent = [tabCss, themeCss].filter(Boolean).join('\n');
+}
+
+function syncThemeBadges() {
+  const activeTheme = localStorage.getItem(QUICK_THEME_KEY);
+  document.querySelectorAll('.css-modal__theme-badge').forEach(btn => {
+    btn.classList.toggle('active', btn.dataset.theme === activeTheme);
+  });
 }
 
 export function initCssModal() {
   applyCustomCss();
+  syncThemeBadges();
 
   const cssModalOverlay = document.getElementById('css-modal-overlay');
   const cssEditor = document.getElementById('css-editor');
@@ -60,7 +99,20 @@ export function initCssModal() {
 
   document.getElementById('btn-css-reset').addEventListener('click', () => {
     CSS_TABS.forEach(t => localStorage.removeItem(cssKey(t)));
+    localStorage.removeItem(QUICK_THEME_KEY);
     cssEditor.value = '';
     applyCustomCss();
+    syncThemeBadges();
+  });
+
+  document.querySelectorAll('.css-modal__theme-badge').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const theme = btn.dataset.theme;
+      const current = localStorage.getItem(QUICK_THEME_KEY);
+      if (current === theme) localStorage.removeItem(QUICK_THEME_KEY);
+      else localStorage.setItem(QUICK_THEME_KEY, theme);
+      applyCustomCss();
+      syncThemeBadges();
+    });
   });
 }