czon 0.4.2 → 0.4.3

package/dist/ssg/ContentPage.js

@@ -31,7 +31,21 @@ const ContentPage = props => {
             react_1.default.createElement("title", null, title),
             react_1.default.createElement("meta", { name: "description", content: `tags: ${tags.join(', ')}` }),
             react_1.default.createElement("script", { src: "https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4", defer: true }),
-            react_1.default.createElement("style", null, style_1.style)),
+            react_1.default.createElement("style", null, style_1.style),
+            react_1.default.createElement("script", { dangerouslySetInnerHTML: {
+                    __html: `
+          (function() {
+            const saved = localStorage.getItem('theme');
+            const theme = saved || 'auto';
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            const isDark = theme === 'auto' ? prefersDark : theme === 'dark';
+            document.documentElement.setAttribute('data-theme', theme);
+            if (isDark) {
+              document.documentElement.classList.add('dark');
+            }
+          })();
+        `,
+                } })),
         react_1.default.createElement("body", null,
             react_1.default.createElement(PageLayout_1.PageLayout, { header: react_1.default.createElement(CZONHeader_1.CZONHeader, { ctx: props.ctx, lang: props.lang, file: props.file }), navigator: react_1.default.createElement("nav", { className: "sidebar hidden md:block" },
                     react_1.default.createElement(Navigator_1.Navigator, { ctx: props.ctx, file: props.file, lang: props.lang })), main: react_1.default.createElement("main", { className: "content" },
@@ -64,11 +78,10 @@ const ContentPage = props => {
         `),
             react_1.default.createElement("script", { id: "mermaid-lib", src: "https://cdn.jsdelivr.net/npm/mermaid@11.4.0/dist/mermaid.min.js", defer: true }),
             react_1.default.createElement("script", null, `
-        document.getElementById('mermaid-lib').addEventListener('load', () => {
-            console.log('Mermaid loaded');
+        function runMermaid() {
             mermaid.initialize({
               startOnLoad: true,
-              theme: 'default',
+              theme: document.documentElement.classList.contains('dark') ? 'dark' : 'default',
               securityLevel: 'strict',
               flowchart: {
                 useMaxWidth: true,
@@ -87,6 +100,13 @@ const ContentPage = props => {
                 barGap: 4,
               },
             });
+            mermaid.run().catch(err => {
+              console.error('Mermaid render error:', err);
+            });
+        }
+        document.getElementById('mermaid-lib').addEventListener('load', () => {
+            console.log('Mermaid loaded');
+            runMermaid();
         });
         `),
             react_1.default.createElement("script", null, `
@@ -113,7 +133,11 @@ const ContentPage = props => {
           // 延迟一点，确保首屏渲染完成
           setTimeout(() => {
             loadCSS("https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css", 'katex-css');
-            loadCSS("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github.min.css", 'hljs-css');
+            const isDark = document.documentElement.classList.contains('dark');
+            const hljsTheme = isDark
+              ? "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css"
+              : "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github.min.css";
+            loadCSS(hljsTheme, 'hljs-css');
           }, 300);
         }
         

package/dist/ssg/IndexPage.js

@@ -28,7 +28,21 @@ const IndexPage = props => {
                 props.lang),
             react_1.default.createElement("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0" }),
             react_1.default.createElement("meta", { name: "description", content: `Index page for language ${props.lang}` }),
-            react_1.default.createElement("style", null, style_1.style)),
+            react_1.default.createElement("style", null, style_1.style),
+            react_1.default.createElement("script", { dangerouslySetInnerHTML: {
+                    __html: `
+          (function() {
+            const saved = localStorage.getItem('theme');
+            const theme = saved || 'auto';
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            const isDark = theme === 'auto' ? prefersDark : theme === 'dark';
+            document.documentElement.setAttribute('data-theme', theme);
+            if (isDark) {
+              document.documentElement.classList.add('dark');
+            }
+          })();
+        `,
+                } })),
         react_1.default.createElement("body", null,
             react_1.default.createElement(PageLayout_1.PageLayout, { header: react_1.default.createElement(CZONHeader_1.CZONHeader, { ctx: props.ctx, lang: props.lang }), navigator: undefined, main: react_1.default.createElement("div", { className: "p-6 max-w-3xl mx-auto" },
                     react_1.default.createElement("div", null,

package/dist/ssg/RedirectPage.js

@@ -14,7 +14,21 @@ const RedirectPage = props => {
             react_1.default.createElement("meta", { httpEquiv: "X-UA-Compatible", content: "IE=edge" }),
             react_1.default.createElement("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0" }),
             react_1.default.createElement("meta", { httpEquiv: "refresh", content: `0; url=${toURL}` }),
-            react_1.default.createElement("title", null, "Redirecting...")),
+            react_1.default.createElement("title", null, "Redirecting..."),
+            react_1.default.createElement("script", { dangerouslySetInnerHTML: {
+                    __html: `
+          (function() {
+            const saved = localStorage.getItem('theme');
+            const theme = saved || 'auto';
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            const isDark = theme === 'auto' ? prefersDark : theme === 'dark';
+            document.documentElement.setAttribute('data-theme', theme);
+            if (isDark) {
+              document.documentElement.classList.add('dark');
+            }
+          })();
+        `,
+                } })),
         react_1.default.createElement("body", null,
             react_1.default.createElement("p", null,
                 "Redirecting to ",

package/dist/ssg/RootPage.js

@@ -25,7 +25,21 @@ const RootPage = props => {
             react_1.default.createElement("title", null, "CZON Multilingual Site Navigator"),
             react_1.default.createElement("meta", { name: "description", content: "Select your preferred language to explore our content." }),
             props.ctx.site.options.langs.map(lang => (react_1.default.createElement("link", { rel: "alternate", hrefLang: lang, href: `${lang}/index.html` }))),
-            react_1.default.createElement("link", { rel: "alternate", hrefLang: "x-default", href: `${props.ctx.site.options.langs[0]}/index.html` })),
+            react_1.default.createElement("link", { rel: "alternate", hrefLang: "x-default", href: `${props.ctx.site.options.langs[0]}/index.html` }),
+            react_1.default.createElement("script", { dangerouslySetInnerHTML: {
+                    __html: `
+          (function() {
+            const saved = localStorage.getItem('theme');
+            const theme = saved || 'auto';
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            const isDark = theme === 'auto' ? prefersDark : theme === 'dark';
+            document.documentElement.setAttribute('data-theme', theme);
+            if (isDark) {
+              document.documentElement.classList.add('dark');
+            }
+          })();
+        `,
+                } })),
         react_1.default.createElement("body", null,
             react_1.default.createElement("h1", null, "Welcome to CZON Multilingual Site"),
             react_1.default.createElement("p", null, "Please select your preferred language if automatic redirection does not work:"),

package/dist/ssg/components/CZONHeader.js

@@ -5,12 +5,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CZONHeader = void 0;
 const react_1 = __importDefault(require("react"));
+const DarkModeSwitch_1 = require("./DarkModeSwitch");
 const LanguageSwitch_1 = require("./LanguageSwitch");
 const CZONHeader = props => {
     return (react_1.default.createElement("header", { className: "czon-header py-4 border-b flex justify-between items-center px-6" },
         react_1.default.createElement("h1", { className: "text-2xl font-bold" },
             react_1.default.createElement("a", { href: "index.html" }, "CZON")),
-        props.lang && (react_1.default.createElement(LanguageSwitch_1.LanguageSwitch, { ctx: props.ctx, lang: props.lang, file: props.file }))));
+        react_1.default.createElement("div", { className: "flex items-center gap-4" },
+            react_1.default.createElement(DarkModeSwitch_1.DarkModeSwitch, null),
+            props.lang && react_1.default.createElement(LanguageSwitch_1.LanguageSwitch, { ctx: props.ctx, lang: props.lang, file: props.file }))));
 };
 exports.CZONHeader = CZONHeader;
 //# sourceMappingURL=CZONHeader.js.map

package/dist/ssg/components/DarkModeSwitch.js

@@ -0,0 +1,149 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DarkModeSwitch = void 0;
+const react_1 = __importDefault(require("react"));
+const style = `
+.dark-mode-switch-container {
+  position: relative;
+  display: inline-block;
+}
+
+.dark-mode-switch-trigger {
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.dark-mode-switch-trigger:hover {
+  box-shadow: 0 2px 4px var(--shadow-color);
+  background: var(--tag-bg);
+}
+
+.dark-mode-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  transition: all 0.2s ease;
+}
+
+[data-theme="light"] .icon-sun { display: block; }
+[data-theme="light"] .icon-moon { display: none; }
+[data-theme="light"] .icon-auto { display: none; }
+
+[data-theme="dark"] .icon-sun { display: none; }
+[data-theme="dark"] .icon-moon { display: block; }
+[data-theme="dark"] .icon-auto { display: none; }
+
+[data-theme="auto"] .icon-sun { display: none; }
+[data-theme="auto"] .icon-moon { display: none; }
+[data-theme="auto"] .icon-auto { display: block; }
+`;
+const DarkModeSwitch = () => {
+    return (react_1.default.createElement("div", { className: "dark-mode-switch-container relative inline-block" },
+        react_1.default.createElement("style", null, style),
+        react_1.default.createElement("input", { id: "theme-toggle", type: "checkbox", className: "hidden", "aria-hidden": "true" }),
+        react_1.default.createElement("label", { htmlFor: "theme-toggle", className: "dark-mode-switch-trigger p-2 rounded-full flex items-center justify-center transition-colors", "aria-label": "Toggle theme", role: "button", tabIndex: 0 },
+            react_1.default.createElement("svg", { className: "dark-mode-icon icon-sun", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
+                react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" })),
+            react_1.default.createElement("svg", { className: "dark-mode-icon icon-moon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
+                react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" })),
+            react_1.default.createElement("svg", { className: "dark-mode-icon icon-auto", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
+                react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" }))),
+        react_1.default.createElement("script", null, `
+(function() {
+  const STORAGE_KEY = 'theme';
+  const toggle = document.getElementById('theme-toggle');
+  const html = document.documentElement;
+  const label = document.querySelector('label[for="theme-toggle"]');
+
+  function updateHljsTheme(isDark) {
+    const link = document.getElementById('hljs-css');
+    if (link) {
+      const url = isDark
+        ? "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css"
+        : "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github.min.css";
+      link.href = url;
+    }
+  }
+
+  function updateMermaidTheme(isDark) {
+    if (typeof mermaid !== 'undefined') {
+      document.querySelectorAll('.mermaid').forEach(el => {
+        const pre = el;
+        const content = pre.getAttribute('data-mermaid-content');
+        if (content) {
+          pre.style.visibility = 'visible';
+          pre.textContent = decodeURIComponent(content);
+          delete pre.dataset.processed;
+        }
+      });
+      runMermaid();
+    }
+  }
+  window.updateMermaidTheme = updateMermaidTheme;
+
+  function applyTheme(theme) {
+    localStorage.setItem(STORAGE_KEY, theme);
+    html.setAttribute('data-theme', theme);
+    
+    let isDark;
+    if (theme === 'auto') {
+      isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    } else {
+      isDark = theme === 'dark';
+    }
+    
+    if (isDark) {
+      html.classList.add('dark');
+      if (toggle) toggle.checked = true;
+    } else {
+      html.classList.remove('dark');
+      if (toggle) toggle.checked = false;
+    }
+    
+    updateHljsTheme(isDark);
+    updateMermaidTheme(isDark);
+  }
+
+  function cycleTheme() {
+    const current = html.getAttribute('data-theme') || 'auto';
+    const next = current === 'light' ? 'dark' : current === 'dark' ? 'auto' : 'light';
+    applyTheme(next);
+  }
+
+  function initTheme() {
+    const saved = localStorage.getItem(STORAGE_KEY);
+    const theme = saved || 'auto';
+    applyTheme(theme);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initTheme);
+  } else {
+    initTheme();
+  }
+
+  document.addEventListener('click', function(e) {
+    if (label && label.contains(e.target)) {
+      e.preventDefault();
+      cycleTheme();
+    }
+  });
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
+    if (html.getAttribute('data-theme') === 'auto') {
+      if (e.matches) {
+        html.classList.add('dark');
+      } else {
+        html.classList.remove('dark');
+      }
+      updateHljsTheme(e.matches);
+      updateMermaidTheme(e.matches);
+    }
+  });
+})();
+      `)));
+};
+exports.DarkModeSwitch = DarkModeSwitch;
+//# sourceMappingURL=DarkModeSwitch.js.map

package/dist/ssg/components/LanguageSwitch.js

@@ -16,15 +16,20 @@ const style = `
 
 .language-switch-trigger {
   transition: all 0.2s ease;
+  background: var(--ls-bg-primary);
+  border-color: var(--ls-border-color);
+  color: var(--ls-text-primary);
 }
 
 .language-switch-trigger:hover {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  background: var(--ls-bg-hover);
 }
 
 .language-switch-icon {
   transition: transform 0.2s ease;
   max-width: 1rem;
+  color: var(--ls-text-secondary);
 }
 
 .language-switch-dropdown {
@@ -53,18 +58,62 @@ const style = `
 
 .language-switch-option {
   transition: all 0.15s ease;
+  background: var(--ls-bg-primary);
+  color: var(--ls-text-secondary);
 }
 
 .language-switch-option:hover {
   transform: translateY(-1px);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  background: var(--ls-bg-hover);
+}
+
+.language-switch-option.active {
+  background: var(--ls-bg-active);
+  color: var(--ls-text-active);
 }
 
 .language-switch-option:focus {
   outline: 2px solid #3b82f6;
   outline-offset: 2px;
 }
+
+.language-switch-info {
+  border-color: var(--ls-border-color);
+}
+
+.language-switch-count {
+  color: var(--ls-text-muted);
+}
+
+html.dark .language-switch-trigger {
+  background: var(--bg-secondary);
+  border-color: var(--border-color);
+  color: var(--text-primary);
+}
+
+html.dark .language-switch-trigger:hover {
+  background: var(--border-color);
+}
+
+html.dark .language-switch-dropdown {
+  background: var(--bg-secondary);
+  border-color: var(--border-color);
+}
+
+html.dark .language-switch-option:hover {
+  background: var(--border-color);
+}
+
+html.dark .language-switch-option.active {
+  background: var(--border-color);
+  color: var(--text-primary);
+}
 `;
+const triggerClasses = 'language-switch-trigger px-4 py-2 border rounded-md flex items-center gap-2 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors';
+const dropdownClasses = 'language-switch-dropdown absolute top-full mt-1 w-96 md:w-2xl lg:w-3xl max-h-96 overflow-y-auto border rounded-md shadow-lg z-50';
+const optionActiveClasses = 'language-switch-option active font-semibold';
+const optionInactiveClasses = 'language-switch-option';
 const LanguageSwitch = props => {
     // 获取当前语言名称
     const currentLangName = languages_1.LANGUAGE_NAMES[props.lang] || props.lang;
@@ -78,25 +127,22 @@ const LanguageSwitch = props => {
     return (react_1.default.createElement("div", { className: "language-switch-container relative inline-block" },
         react_1.default.createElement("style", null, style),
         react_1.default.createElement("input", { id: "language-switch-toggle", type: "checkbox", className: "hidden", "aria-hidden": "true" }),
-        react_1.default.createElement("label", { htmlFor: "language-switch-toggle", className: "language-switch-trigger px-4 py-2 border border-gray-300 rounded-md flex items-center gap-2 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors", "aria-label": `Language switcher. Current language: ${currentLangName}`, "aria-haspopup": "true", "aria-expanded": "false", "aria-controls": "language-dropdown" },
+        react_1.default.createElement("label", { htmlFor: "language-switch-toggle", className: triggerClasses, "aria-label": `Language switcher. Current language: ${currentLangName}`, "aria-haspopup": "true", "aria-expanded": "false", "aria-controls": "language-dropdown" },
             react_1.default.createElement("span", { className: "text-sm font-medium" }, currentLangName),
             react_1.default.createElement("svg", { className: "language-switch-icon w-4 h-4 transition-transform", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true" },
                 react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }))),
-        react_1.default.createElement("div", { id: "language-dropdown", className: "language-switch-dropdown absolute top-full mt-1 w-96 md:w-2xl lg:w-3xl max-h-96 overflow-y-auto bg-white border border-gray-300 rounded-md shadow-lg z-50", role: "menu", "aria-label": "Available languages" },
+        react_1.default.createElement("div", { id: "language-dropdown", className: dropdownClasses, role: "menu", "aria-label": "Available languages" },
             react_1.default.createElement("div", { className: "p-4" },
                 react_1.default.createElement("div", { className: "language-switch-grid grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-2" }, languages.map(lang => {
                     const langName = languages_1.LANGUAGE_NAMES[lang] || lang;
                     const isActive = lang === props.lang;
                     return (react_1.default.createElement("a", { key: lang, href: getLanguageLink(lang), className: `
-                    language-switch-option block px-3 py-2 rounded text-sm text-center
-                    ${isActive
-                            ? 'bg-blue-100 text-blue-700 font-semibold'
-                            : 'text-gray-700 hover:bg-gray-100'}
+                    ${isActive ? optionActiveClasses : optionInactiveClasses} block px-3 py-2 rounded text-center
                     transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500
                   `, role: "menuitem", "aria-current": isActive ? 'page' : undefined, lang: lang }, langName));
                 })),
-                react_1.default.createElement("div", { className: "language-switch-info mt-3 pt-3 border-t border-gray-200" },
-                    react_1.default.createElement("p", { className: "language-switch-count text-xs text-gray-500 text-center" },
+                react_1.default.createElement("div", { className: "language-switch-info mt-3 pt-3 border-t" },
+                    react_1.default.createElement("p", { className: "language-switch-count text-xs text-center" },
                         languages.length,
                         " languages available"))))));
 };

package/dist/ssg/style.js

@@ -2,27 +2,65 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = void 0;
 exports.style = `
+@custom-variant dark (&:where(.dark, .dark *));
+
+:root {
+  --bg-primary: #ffffff;
+  --bg-secondary: #f8f9fa;
+  --text-primary: #333333;
+  --text-secondary: #6c757d;
+  --border-color: #e9ecef;
+  --code-bg: #f8f9fa;
+  --link-color: #007bff;
+  --sidebar-bg: #ffffff;
+  --tag-bg: #e9ecef;
+  --tag-text: #495057;
+  --shadow-color: rgba(0, 0, 0, 0.1);
+  --primary-color: #007bff;
+  --text-on-primary: #ffffff;
+}
 
-      html, body {
-        margin: 0;
-        padding: 0;
-        width: 100%;
-        height: 100%;
-      }
+html.dark {
+  --bg-primary: #1a1a1a;
+  --bg-secondary: #262626;
+  --text-primary: #e5e5e5;
+  --text-secondary: #a3a3a3;
+  --border-color: #404040;
+  --code-bg: #333333;
+  --link-color: #60a5fa;
+  --sidebar-bg: #262626;
+  --tag-bg: #404040;
+  --tag-text: #d4d4d4;
+  --shadow-color: rgba(0, 0, 0, 0.5);
+  --primary-color: #3b82f6;
+  --text-on-primary: #ffffff;
+}
 
-      html[lang='ar-SA'] {
-        direction: rtl;
-      }
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
 
-      body {
-        color: #333;
-        background: #f8f9fa;
-      }
+html[lang='ar-SA'] {
+  direction: rtl;
+}
+
+html.dark body {
+  color: var(--text-primary);
+  background: var(--bg-secondary);
+}
+
+html:not(.dark) body {
+  color: var(--text-primary);
+  background: var(--bg-secondary);
+}
 
       .sidebar {
         width: 280px;
-        background: #fff;
-        border-right: 1px solid #e9ecef;
+        background: var(--sidebar-bg);
+        border-right: 1px solid var(--border-color);
         padding: 2rem 1rem;
         overflow-y: auto;
 
@@ -32,17 +70,17 @@ exports.style = `
       .sidebar-header {
         margin-bottom: 2rem;
         padding-bottom: 1rem;
-        border-bottom: 1px solid #e9ecef;
+        border-bottom: 1px solid var(--border-color);
       }
 
       .sidebar-header h1 {
         font-size: 1.5rem;
         font-weight: 600;
-        color: #212529;
+        color: var(--text-primary);
       }
 
       .sidebar-header p {
-        color: #6c757d;
+        color: var(--text-secondary);
         font-size: 0.875rem;
         margin-top: 0.5rem;
       }
@@ -54,20 +92,20 @@ exports.style = `
       .nav-link {
         display: block;
         padding: 0.5rem 1rem;
-        color: #495057;
+        color: var(--text-secondary);
         text-decoration: none;
         border-radius: 4px;
         transition: all 0.2s;
       }
 
       .nav-link:hover {
-        background: #e9ecef;
-        color: #212529;
+        background: var(--border-color);
+        color: var(--text-primary);
       }
 
       .nav-link.active {
-        background: #007bff;
-        color: white;
+        background: var(--primary-color);
+        color: var(--text-on-primary);
       }
 
       .nav-submenu {
@@ -77,11 +115,11 @@ exports.style = `
       }
 
       blockquote {
-        border-left: 4px solid #007bff;
+        border-left: 4px solid var(--link-color);
         padding: 0.5rem 1rem;
         margin: 1rem 0;
-        background: #f8f9fa;
-        color: #495057;
+        background: var(--code-bg);
+        color: var(--text-primary);
       }
 
       .content {
@@ -94,18 +132,18 @@ exports.style = `
       .content-header {
         margin-bottom: 2rem;
         padding-bottom: 1rem;
-        border-bottom: 1px solid #e9ecef;
+        border-bottom: 1px solid var(--border-color);
       }
 
       .content-header h1 {
         font-size: 2.5rem;
         font-weight: 700;
-        color: #212529;
+        color: var(--text-primary);
         margin-bottom: 0.5rem;
       }
 
       .content-header .meta {
-        color: #6c757d;
+        color: var(--text-secondary);
         font-size: 0.875rem;
       }
 
@@ -117,19 +155,19 @@ exports.style = `
       .content-body h1 {
         font-size: 2rem;
         margin: 2rem 0 1rem;
-        color: #212529;
+        color: var(--text-primary);
       }
 
       .content-body h2 {
         font-size: 1.75rem;
         margin: 1.75rem 0 0.875rem;
-        color: #343a40;
+        color: var(--text-primary);
       }
 
       .content-body h3 {
         font-size: 1.5rem;
         margin: 1.5rem 0 0.75rem;
-        color: #495057;
+        color: var(--text-primary);
       }
 
       .content-body p {
@@ -146,23 +184,24 @@ exports.style = `
       }
 
       .content-body blockquote {
-        border-left: 4px solid #007bff;
+        border-left: 4px solid var(--link-color);
         padding: 0.5rem 1rem;
         margin: 1rem 0;
-        background: #f8f9fa;
-        color: #495057;
+        background: var(--code-bg);
+        color: var(--text-primary);
       }
 
       .content-body code {
-        background: #f8f9fa;
+        background: var(--code-bg);
         padding: 0.2rem 0.4rem;
         border-radius: 3px;
         font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
         font-size: 0.875em;
+        color: var(--text-primary);
       }
 
       .content-body pre {
-        background: #f8f9fa;
+        background: var(--code-bg);
         padding: 1rem;
         border-radius: 6px;
         overflow-x: auto;
@@ -182,13 +221,13 @@ exports.style = `
 
       .content-body th,
       .content-body td {
-        border: 1px solid #dee2e6;
+        border: 1px solid var(--border-color);
         padding: 0.75rem;
         text-align: left;
       }
 
       .content-body th {
-        background: #f8f9fa;
+        background: var(--code-bg);
         font-weight: 600;
       }
 
@@ -199,8 +238,12 @@ exports.style = `
         margin: 1rem 0;
       }
 
+      html.dark .content-body img {
+        filter: brightness(0.85) contrast(1.1);
+      }
+
       a {
-        color: #007bff;
+        color: var(--link-color);
         text-decoration: none;
       }
 
@@ -211,8 +254,8 @@ exports.style = `
       .footer {
         margin-top: 3rem;
         padding-top: 2rem;
-        border-top: 1px solid #e9ecef;
-        color: #6c757d;
+        border-top: 1px solid var(--border-color);
+        color: var(--text-secondary);
         font-size: 0.875rem;
         text-align: center;
       }
@@ -227,8 +270,8 @@ exports.style = `
       }
 
       .tag-item {
-        background: #e9ecef;
-        color: #495057;
+        background: var(--tag-bg);
+        color: var(--tag-text);
         padding: 0.25rem 0.5rem;
         border-radius: 4px;
         font-size: 0.875rem;
@@ -241,7 +284,7 @@ exports.style = `
           height: auto;
           position: static;
           border-right: none;
-          border-bottom: 1px solid #e9ecef;
+          border-bottom: 1px solid var(--border-color);
         }
 
         .content {
@@ -253,15 +296,15 @@ exports.style = `
       /* Mermaid diagram styles */
       .mermaid-diagram {
         margin: 1.5rem 0;
-        border: 1px solid #e9ecef;
+        border: 1px solid var(--border-color);
         border-radius: 6px;
         overflow: hidden;
-        background: #fff;
+        background: var(--bg-primary);
       }
 
       .mermaid-placeholder {
         padding: 2rem;
-        background: #f8f9fa;
+        background: var(--code-bg);
         min-height: 200px;
         display: flex;
         align-items: center;
@@ -270,15 +313,15 @@ exports.style = `
       }
 
       .mermaid-loading {
-        color: #6c757d;
+        color: var(--text-secondary);
         font-style: italic;
         font-size: 0.875rem;
       }
 
       .mermaid-error {
-        color: #dc3545;
+        color: #f87171;
         padding: 1rem;
-        background: #f8d7da;
+        background: rgba(248, 113, 113, 0.1);
         border-radius: 4px;
         font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
         font-size: 0.875rem;

package/dist/utils/convertMarkdownToHtml.js

@@ -40,7 +40,7 @@ const convertMarkdownToHtml = (mdContent) => {
             const chartId = 'mermaid-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
             return `
 <div class="mermaid-diagram" data-mermaid-id="${chartId}">
-  <pre class="mermaid">${escapeHtml(codeText)}</pre>
+  <pre class="mermaid" data-mermaid-content="${encodeURIComponent(codeText)}">${escapeHtml(codeText)}</pre>
 </div>
 `;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "czon",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "CZone - AI enhanced Markdown content engine",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",