feat(mdviewer): dark/light theme toggle, typography, toolbar collapse

- Add theme toggle button (sun/moon) in md viewer embedded toolbar,
  visible in both edit and reader modes
- Theme persisted via PreferencesManager preference (mdViewerTheme)
- Communication: iframe sends mdviewrThemeToggle → MarkdownSync persists
  and sends MDVIEWR_SET_THEME back to apply
- Content max-width changed to 90ch for paper-like readability
- Responsive padding: 70px on wider viewports, 24px on narrow
- Collapse all toolbar format groups below 590px panel width
- Update CLAUDE.md and CLAUDE-markdown-viewer.md to document md viewer's
  own i18n system (src-mdviewer/src/locales/en.json)

Author: abose

CLAUDE.md

@@ -20,6 +20,7 @@
 - For parameterized strings use `StringUtils.format(Strings.KEY, arg0, arg1)` with `{0}`, `{1}` placeholders.
 - Keys use UPPER_SNAKE_CASE grouped by feature prefix (e.g. `AI_CHAT_*`).
 - Only `src/nls/root/strings.js` (English) needs manual edits — other locales are auto-translated by GitHub Actions.
+- **Exception — Markdown viewer iframe** (`src-mdviewer/`): Has its own i18n system. Strings go in `src-mdviewer/src/locales/en.json` (root), not `src/nls/`. Other locale files in that folder are auto-translated by GitHub Actions. Use `t("key")` / `tp("key", { param })` from `src-mdviewer/src/core/i18n.js`.
 - Never compare `$(el).text()` against English strings for logic — use data attributes or CSS classes instead.
 
 ## Phoenix MCP (Desktop App Testing)

src-mdviewer/CLAUDE-markdown-viewer.md

@@ -21,11 +21,18 @@ Test Runner Window
 - `src-mdviewer/src/bridge.js` — postMessage bridge between Phoenix and md iframe. Handles file switching, content sync, keyboard shortcuts, edit mode.
 - `src-mdviewer/src/core/doc-cache.js` — Document DOM cache with LRU eviction for file switching.
 - `src-mdviewer/src/components/editor.js` — Contenteditable WYSIWYG editing, Turndown HTML→Markdown conversion.
-- `src-mdviewer/src/components/embedded-toolbar.js` — Reader/edit toggle, cursor sync, format buttons.
+- `src-mdviewer/src/components/embedded-toolbar.js` — Reader/edit toggle, cursor sync, theme toggle, format buttons.
 - `src-mdviewer/src/components/format-bar.js` — Floating format bar on text selection (bold, italic, underline, link).
 - `src-mdviewer/src/components/link-popover.js` — Link popover for editing/removing links in edit mode.
 - `src-mdviewer/src/components/viewer.js` — Reader mode click handling, link interception, copy buttons.
-- `src/extensionsIntegrated/Phoenix-live-preview/MarkdownSync.js` — Phoenix-side sync: CM↔iframe content, cursor, scroll, selection.
+- `src/extensionsIntegrated/Phoenix-live-preview/MarkdownSync.js` — Phoenix-side sync: CM↔iframe content, cursor, scroll, selection, theme.
+
+### Translations / i18n
+- The md viewer iframe has its **own** i18n system separate from Phoenix's `src/nls/` strings.
+- Root strings (English) are in `src-mdviewer/src/locales/en.json` — edit this file for new/changed strings.
+- Other locale files in `src-mdviewer/src/locales/` are **auto-translated by GitHub Actions** — do not edit them manually.
+- Use `t("key.subkey")` and `tp("key", { param })` from `src-mdviewer/src/core/i18n.js` for string lookups.
+- Phoenix-side strings (e.g. preference descriptions) still go in `src/nls/root/strings.js` as usual.
 
 ## Communication: postMessage (reliable in both directions)
 

src-mdviewer/src/bridge.js

@@ -806,11 +806,13 @@ function handleReloadFile(data) {
 
 // --- Theme, edit mode, locale ---
 
-function handleSetTheme(_data) {
-    // Force light theme for a paper-like appearance regardless of editor theme.
-    // The theme infrastructure is preserved for future use.
-    // Theme is set in index.html (data-theme="light") so no action needed here.
-    // Avoid setting attributes/styles to prevent reflows that reset scroll position.
+function handleSetTheme(data) {
+    const { theme } = data;
+    // Skip if already applied to avoid reflows that can reset scroll position
+    if (document.documentElement.getAttribute("data-theme") === theme) return;
+    document.documentElement.setAttribute("data-theme", theme);
+    document.documentElement.style.colorScheme = theme === "dark" ? "dark" : "light";
+    setState({ theme });
 }
 
 function handleSetEditMode(data) {

src-mdviewer/src/components/embedded-toolbar.js

@@ -32,7 +32,9 @@ import {
     Link2Off,
     Printer,
     Image as ImageIcon,
-    Upload
+    Upload,
+    Sun,
+    Moon
 } from "lucide";
 import { on, emit } from "../core/events.js";
 import { getState, setState } from "../core/state.js";
@@ -45,11 +47,11 @@ let collapseLevel = 0; // 0=expanded, 1=blocks, 2=blocks+lists, 3=all
 
 // Width thresholds for progressive collapse
 const THRESHOLD_BLOCKS = 640;  // collapse block elements + image first
-const THRESHOLD_LISTS = 520;   // then lists
-const THRESHOLD_TEXT = 500;    // finally text formatting (all dropdowns collapsed)
+const THRESHOLD_LISTS = 590;   // then lists
+const THRESHOLD_TEXT = 590;    // finally text formatting (all dropdowns collapsed)
 
 const allIcons = { Bold, Italic, Strikethrough, Underline, Code, Link, List, ListOrdered,
-    ListChecks, Quote, Minus, Table, FileCode, ChevronDown, Type, MoreHorizontal, Pencil, BookOpen, Link2, Link2Off, Printer, Image: ImageIcon, Upload };
+    ListChecks, Quote, Minus, Table, FileCode, ChevronDown, Type, MoreHorizontal, Pencil, BookOpen, Link2, Link2Off, Printer, Image: ImageIcon, Upload, Sun, Moon };
 
 export function initEmbeddedToolbar() {
     toolbar = document.getElementById("toolbar");
@@ -58,6 +60,7 @@ export function initEmbeddedToolbar() {
     render();
 
     on("state:editMode", () => render());
+    on("state:theme", () => render());
     on("editor:selection-state", updateFormatState);
     on("state:locale", () => render());
 }
@@ -80,8 +83,12 @@ function render() {
 }
 
 function renderReadMode() {
+    const isDark = getState().theme === "dark";
     toolbar.innerHTML = `<div class="embedded-toolbar">
         <div class="toolbar-spacer"></div>
+        <button class="toolbar-btn theme-toggle-btn" id="emb-theme-toggle" data-tooltip="${t("toolbar.theme") || "Toggle theme"}">
+            <i data-lucide="${isDark ? "sun" : "moon"}"></i>
+        </button>
         <button class="toolbar-btn print-btn" id="emb-print-btn" data-tooltip="${t("toolbar.print") || "Print"}">
             <i data-lucide="printer"></i>
         </button>
@@ -96,9 +103,9 @@ function renderReadMode() {
     </div>`;
 
     createIcons({ icons: allIcons, attrs: { class: "" } });
-    // Remove data-lucide from replaced SVGs to prevent warnings on subsequent createIcons calls
     toolbar.querySelectorAll("svg[data-lucide]").forEach(svg => svg.removeAttribute("data-lucide"));
 
+    wireThemeToggle();
     wireCursorSyncButton();
     wirePrintButton();
 
@@ -192,9 +199,13 @@ function renderEditMode(level) {
             ${imageSection}
         </div>`;
 
+    const isDark = getState().theme === "dark";
     toolbar.innerHTML = `<div class="embedded-toolbar">
         ${formatRow}
         <div class="toolbar-spacer"></div>
+        <button class="toolbar-btn theme-toggle-btn" id="emb-theme-toggle" data-tooltip="${t("toolbar.theme") || "Toggle theme"}">
+            <i data-lucide="${isDark ? "sun" : "moon"}"></i>
+        </button>
         <button class="toolbar-btn print-btn" id="emb-print-btn" data-tooltip="${t("toolbar.print") || "Print"}">
             <i data-lucide="printer"></i>
         </button>
@@ -209,12 +220,12 @@ function renderEditMode(level) {
     </div>`;
 
     createIcons({ icons: allIcons, attrs: { class: "" } });
-    // Remove data-lucide from replaced SVGs to prevent warnings on subsequent createIcons calls
     toolbar.querySelectorAll("svg[data-lucide]").forEach(svg => svg.removeAttribute("data-lucide"));
 
     wireFormatButtons();
     wireBlockTypeSelect();
     wireDropdowns();
+    wireThemeToggle();
     wireCursorSyncButton();
     wirePrintButton();
     wireDoneButton();
@@ -307,6 +318,22 @@ function wireCursorSyncButton() {
     }
 }
 
+function wireThemeToggle() {
+    const toggleBtn = document.getElementById("emb-theme-toggle");
+    if (toggleBtn) {
+        toggleBtn.addEventListener("click", () => {
+            const current = getState().theme || "light";
+            const newTheme = current === "light" ? "dark" : "light";
+            // Send to parent (Phoenix) for persistence
+            window.parent.postMessage({
+                type: "MDVIEWR_EVENT",
+                eventName: "mdviewrThemeToggle",
+                theme: newTheme
+            }, "*");
+        });
+    }
+}
+
 function wirePrintButton() {
     const printBtn = document.getElementById("emb-print-btn");
     if (printBtn) {

src-mdviewer/src/locales/en.json

@@ -1,7 +1,7 @@
 {
   "toolbar": {
     "open": "Open File",
-    "theme": "Toggle Theme",
+    "theme": "Toggle Dark/Light Theme",
     "toc": "Table of Contents",
     "search": "Search",
     "focus": "Focus Mode",

src/extensionsIntegrated/Phoenix-live-preview/MarkdownSync.js

@@ -132,6 +132,13 @@ define(function (require, exports, module) {
             case "mdviewrCursorSyncToggle":
                 _cursorSyncEnabled = !!data.enabled;
                 break;
+            case "mdviewrThemeToggle":
+                sendThemeOverride(data.theme);
+                // Persist via StateManager (accessed through main.js callback)
+                if (_onThemeToggle) {
+                    _onThemeToggle(data.theme);
+                }
+                break;
             case "mdviewrImageUploadRequest":
                 _handleImageUploadFromIframe(data);
                 break;
@@ -409,6 +416,10 @@ define(function (require, exports, module) {
         iframeWindow.postMessage(msg, "*");
     }
 
+    // User's explicit theme choice (null = use editor theme)
+    let _themeOverride = null;
+    let _onThemeToggle = null;
+
     function _sendTheme() {
         if (!_active || !_iframeReady) {
             return;
@@ -418,14 +429,24 @@ define(function (require, exports, module) {
             return;
         }
 
-        const currentTheme = ThemeManager.getCurrentTheme();
-        const isDark = currentTheme && currentTheme.dark;
+        let theme;
+        if (_themeOverride) {
+            theme = _themeOverride;
+        } else {
+            const currentTheme = ThemeManager.getCurrentTheme();
+            theme = (currentTheme && currentTheme.dark) ? "dark" : "light";
+        }
         iframeWindow.postMessage({
             type: "MDVIEWR_SET_THEME",
-            theme: isDark ? "dark" : "light"
+            theme: theme
         }, "*");
     }
 
+    function sendThemeOverride(theme) {
+        _themeOverride = theme;
+        _sendTheme();
+    }
+
     function _sendLocale() {
         if (!_active || !_iframeReady) {
             return;
@@ -1098,4 +1119,6 @@ define(function (require, exports, module) {
     exports.setEditMode = setEditMode;
     exports.setIframeReadyHandler = setIframeReadyHandler;
     exports.setCursorSyncEnabled = setCursorSyncEnabled;
+    exports.sendThemeOverride = sendThemeOverride;
+    exports.setThemeToggleHandler = function(handler) { _onThemeToggle = handler; };
 });

src/extensionsIntegrated/Phoenix-live-preview/main.js

@@ -83,6 +83,10 @@ define(function (require, exports, module) {
 
     const StateManager = PreferencesManager.stateManager;
     const STATE_CUSTOM_SERVER_BANNER_ACK = "customServerBannerDone";
+    const PREF_MD_THEME = "mdViewerTheme";
+    PreferencesManager.definePreference(PREF_MD_THEME, "string", "light", {
+        description: Strings.MD_VIEWER_THEME_DESCRIPTION
+    });
     let customServerModalBar;
 
     const isBrowser = !Phoenix.isNativeApp;
@@ -788,6 +792,11 @@ define(function (require, exports, module) {
         $modeBtn = $panel.find("#livePreviewModeBtn");
         $previewBtn = $panel.find("#previewModeLivePreviewButton");
 
+        // Markdown theme toggle — persist user choice
+        MarkdownSync.setThemeToggleHandler((theme) => {
+            PreferencesManager.set(PREF_MD_THEME, theme);
+        });
+
         $panel.find(".live-preview-settings-banner-btn").on("click", ()=>{
             CommandManager.execute(Commands.FILE_LIVE_FILE_PREVIEW_SETTINGS);
             Metrics.countEvent(Metrics.EVENT_TYPE.LIVE_PREVIEW, "settingsBtnBanner", "click");
@@ -919,6 +928,9 @@ define(function (require, exports, module) {
 
         _isMdviewrActive = true;
         MarkdownSync.activate(currentDoc, $iframe, baseURL);
+        // Apply persisted theme preference
+        const savedTheme = PreferencesManager.get(PREF_MD_THEME) || "light";
+        MarkdownSync.sendThemeOverride(savedTheme);
         // Sync preview mode and edit mode for reuse case where iframe is already ready
         _updateLPControlsForMdviewer();
 

src/nls/root/strings.js

@@ -161,6 +161,7 @@ define({
     "LIVE_DEV_OPEN_ERROR_TITLE": "Error Opening Live Preview in {0}",
     "LIVE_DEV_OPEN_ERROR_MESSAGE": "Make sure that {0} browser is installed and try again.",
     "LIVE_DEV_CLICK_TO_PIN_UNPIN": "Pin or Unpin Preview Page",
+    "MD_VIEWER_THEME_DESCRIPTION": "Theme for the Markdown viewer (light or dark)",
     "LIVE_DEV_STATUS_TIP_SYNC_ERROR": "Live Preview (not updating due to syntax error)",
     "LIVE_DEV_SETTINGS": "Live Preview Settings\u2026",
     "LIVE_DEV_SETTINGS_BANNER": "Set up a custom server to live preview `<b>{0}</b>` and other server-rendered files (PHP, JSP, etc.)",