@bytechain.cn/colamd 1.5.0

package/src/renderer/themes/base.css

@@ -0,0 +1,509 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html, body {
+  height: 100%;
+  overflow: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
+  background: var(--bg-color);
+  color: var(--text-color);
+}
+
+#titlebar {
+  -webkit-app-region: drag;
+  height: 52px;
+  flex-shrink: 0;
+  position: relative;
+}
+
+#agent-dot {
+  position: absolute;
+  top: 22px;
+  right: 16px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--text-muted);
+  opacity: 0.3;
+  -webkit-app-region: no-drag;
+  transition: background 0.3s ease, opacity 0.3s ease;
+}
+
+#slides-btn {
+  position: absolute;
+  top: 14px;
+  right: 32px;
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 13px;
+  cursor: pointer;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  -webkit-app-region: no-drag;
+  transition: background 0.15s, color 0.15s;
+}
+
+#slides-btn:hover {
+  background: var(--accent-soft, rgba(241,117,45,0.12));
+  color: #F1752D;
+}
+
+#slides-btn.visible {
+  display: flex;
+}
+
+#agent-dot.active {
+  background: #e8913a;
+  opacity: 1;
+  animation: agent-breathe 2s ease-in-out infinite;
+}
+
+#agent-dot.cooldown {
+  background: #3dba5c;
+  opacity: 1;
+  animation: none;
+}
+
+@keyframes agent-breathe {
+  0%, 100% { opacity: 0.45; transform: scale(0.95); }
+  50% { opacity: 1; transform: scale(1.05); }
+}
+
+#editor {
+  height: calc(100vh - 52px);
+  overflow-y: auto;
+  padding: 0 40px 40px;
+}
+
+#source-editor {
+  display: none;
+  height: calc(100vh - 52px);
+  width: 100%;
+  padding: 40px;
+  box-sizing: border-box;
+  border: none;
+  outline: none;
+  resize: none;
+  background: var(--bg-color);
+  color: var(--text-color);
+  font-family: 'SF Mono', 'Fira Code', Menlo, Monaco, monospace;
+  font-size: 14px;
+  line-height: 1.7;
+  tab-size: 2;
+}
+
+#source-editor.visible {
+  display: block;
+}
+
+#editor.hidden {
+  display: none;
+}
+
+#editor .ProseMirror {
+  outline: none;
+  max-width: 780px;
+  margin: 0 auto;
+  min-height: calc(100vh - 92px);
+  font-size: 16px;
+  line-height: 1.75;
+  color: var(--text-color);
+}
+
+#editor .ProseMirror > * + * {
+  margin-top: 0.75em;
+}
+
+/* Typography */
+#editor .ProseMirror h1 {
+  font-size: 2em;
+  font-weight: 700;
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+  line-height: 1.25;
+  padding-bottom: 0.3em;
+  border-bottom: 1px solid var(--border-color);
+}
+
+#editor .ProseMirror h2 {
+  font-size: 1.5em;
+  font-weight: 600;
+  margin-top: 1.25em;
+  margin-bottom: 0.5em;
+  line-height: 1.3;
+  padding-bottom: 0.25em;
+  border-bottom: 1px solid var(--border-color);
+}
+
+#editor .ProseMirror h3 {
+  font-size: 1.25em;
+  font-weight: 600;
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+}
+
+#editor .ProseMirror h4,
+#editor .ProseMirror h5,
+#editor .ProseMirror h6 {
+  font-weight: 600;
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+}
+
+#editor .ProseMirror p {
+  margin: 0.5em 0;
+}
+
+#editor .ProseMirror a {
+  color: var(--link-color);
+  text-decoration: none;
+}
+
+#editor .ProseMirror a:hover {
+  text-decoration: underline;
+}
+
+#editor .ProseMirror strong {
+  font-weight: 600;
+}
+
+/* Code */
+#editor .ProseMirror code {
+  background: var(--code-bg);
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 0.875em;
+  font-family: 'SF Mono', 'Fira Code', Menlo, monospace;
+}
+
+#editor .ProseMirror pre {
+  background: var(--code-block-bg);
+  color: var(--code-block-text, var(--text-color));
+  padding: 16px;
+  border-radius: 6px;
+  overflow-x: auto;
+  margin: 1em 0;
+}
+
+#editor .ProseMirror pre code {
+  background: none;
+  padding: 0;
+  font-size: 0.875em;
+  line-height: 1.6;
+}
+
+/* Blockquote */
+#editor .ProseMirror blockquote {
+  border-left: 4px solid var(--blockquote-border);
+  padding-left: 16px;
+  margin: 1em 0;
+  color: var(--text-muted);
+}
+
+/* Lists */
+#editor .ProseMirror ul,
+#editor .ProseMirror ol {
+  padding-left: 24px;
+  margin: 0.5em 0;
+}
+
+#editor .ProseMirror li {
+  margin: 0.25em 0;
+}
+
+#editor .ProseMirror li > p {
+  margin: 0;
+}
+
+/* Table */
+#editor .ProseMirror table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 1em 0;
+}
+
+#editor .ProseMirror th,
+#editor .ProseMirror td {
+  border: 1px solid var(--border-color);
+  padding: 8px 12px;
+  text-align: left;
+}
+
+#editor .ProseMirror th {
+  background: var(--table-header-bg);
+  font-weight: 600;
+}
+
+/* HR */
+#editor .ProseMirror hr {
+  border: none;
+  border-top: 2px solid var(--border-color);
+  margin: 2em 0;
+}
+
+/* Image */
+#editor .ProseMirror img {
+  max-width: 100%;
+  border-radius: 4px;
+}
+
+#editor .ProseMirror ::selection {
+  background: var(--selection-bg);
+}
+
+/* ======= THEMES ======= */
+
+body, body.theme-light {
+  --bg-color: #ffffff;
+  --text-color: #24292f;
+  --text-muted: #656d76;
+  --border-color: #d0d7de;
+  --link-color: #0969da;
+  --code-bg: rgba(175, 184, 193, 0.2);
+  --code-block-bg: #f6f8fa;
+  --blockquote-border: #d0d7de;
+  --table-header-bg: #f6f8fa;
+  --selection-bg: rgba(9, 105, 218, 0.15);
+}
+
+body.theme-dark {
+  --bg-color: #0d1117;
+  --text-color: #e6edf3;
+  --text-muted: #8b949e;
+  --border-color: #30363d;
+  --link-color: #58a6ff;
+  --code-bg: rgba(110, 118, 129, 0.3);
+  --code-block-bg: #161b22;
+  --blockquote-border: #30363d;
+  --table-header-bg: #161b22;
+  --selection-bg: rgba(88, 166, 255, 0.2);
+}
+
+body.theme-elegant {
+  --bg-color: #f0edea;
+  --text-color: #2c2c2c;
+  --text-muted: #777;
+  --border-color: #d8d3ce;
+  --link-color: #c44b2b;
+  --code-bg: #e0d8cf;
+  --code-block-bg: #e8e2db;
+  --code-block-text: #3d3530;
+  --blockquote-border: #c44b2b;
+  --blockquote-bg: #eae6e1;
+  --table-header-bg: #eae6e1;
+  --table-border: #d8d3ce;
+  --selection-bg: rgba(196, 75, 43, 0.2);
+}
+
+body.theme-elegant #editor .ProseMirror {
+  font-family: 'LXGW WenKai', 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', Georgia, serif;
+  line-height: 1.9;
+}
+
+body.theme-elegant #editor .ProseMirror strong {
+  color: #c44b2b;
+}
+
+body.theme-elegant #editor .ProseMirror code {
+  color: #c44b2b;
+}
+
+body.theme-elegant #editor .ProseMirror pre {
+  color: var(--code-block-text);
+}
+
+body.theme-elegant #editor .ProseMirror pre code {
+  color: inherit;
+}
+
+body.theme-elegant #editor .ProseMirror blockquote {
+  background: var(--blockquote-bg);
+  padding: 15px 20px 15px 25px;
+}
+
+body.theme-elegant #editor .ProseMirror table th {
+  border-bottom: 2px solid #c44b2b;
+}
+
+body.theme-elegant #editor .ProseMirror table td {
+  border-left: none;
+  border-right: none;
+}
+
+body.theme-newsprint {
+  --bg-color: #f5f2eb;
+  --text-color: #1a1a1a;
+  --text-muted: #666;
+  --border-color: #d4d0c8;
+  --link-color: #2c5f8a;
+  --code-bg: rgba(0, 0, 0, 0.05);
+  --code-block-bg: #eae6de;
+  --blockquote-border: #999;
+  --table-header-bg: #eae6de;
+  --selection-bg: rgba(44, 95, 138, 0.15);
+}
+
+body.theme-newsprint #editor .ProseMirror {
+  font-family: 'PT Serif', Georgia, serif;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border-color);
+  border-radius: 3px;
+}
+
+/* Math blocks */
+.math-inline {
+  display: inline;
+  padding: 2px 4px;
+  border-radius: 3px;
+  background: var(--code-bg);
+  cursor: default;
+}
+
+.math-inline .katex {
+  font-size: 1.1em;
+}
+
+.math-block {
+  display: block;
+  padding: 0.875em;
+  margin: 1em 0;
+  border-radius: 6px;
+  background: var(--code-block-bg);
+  text-align: center;
+  overflow-x: auto;
+}
+
+.math-block .katex {
+  font-size: 1.2em;
+}
+
+/* Dark theme: KaTeX color overrides */
+body.theme-dark .math-inline,
+body.theme-dark .math-block {
+  color: var(--text-color);
+}
+
+body.theme-dark .katex {
+  color: var(--text-color);
+}
+
+body.theme-dark .katex .mord,
+body.theme-dark .katex .mbin,
+body.theme-dark .katex .mrel,
+body.theme-dark .katex .mopen,
+body.theme-dark .katex .mclose,
+body.theme-dark .katex .mpunct,
+body.theme-dark .katex .minner {
+  color: var(--text-color);
+}
+
+/* KaTeX scrollbar in block math for dark theme */
+body.theme-dark .math-block::-webkit-scrollbar-thumb {
+  background: #30363d;
+}
+
+body.theme-elegant .math-block::-webkit-scrollbar-thumb {
+  background: #c4bbb0;
+}
+
+/* Elegant theme: KaTeX color overrides */
+body.theme-elegant .math-inline,
+body.theme-elegant .math-block {
+  color: var(--text-color);
+}
+
+body.theme-elegant .katex {
+  color: #3d3530;
+}
+
+body.theme-elegant .katex .mord,
+body.theme-elegant .katex .mbin,
+body.theme-elegant .katex .mrel,
+body.theme-elegant .katex .mopen,
+body.theme-elegant .katex .mclose,
+body.theme-elegant .katex .mpunct,
+body.theme-elegant .katex .minner {
+  color: #3d3530;
+}
+
+/* Plugin raw mode — editable inputs */
+.math-inline-raw {
+  width: auto;
+  min-width: 60px;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  padding: 2px 6px;
+  font-size: 0.875em;
+  font-family: 'SF Mono', 'Fira Code', Menlo, monospace;
+  color: var(--text-color);
+  background: var(--code-bg);
+  outline: none;
+}
+.math-inline-raw:focus {
+  border-color: var(--link-color);
+}
+
+textarea.math-block-raw {
+  width: 100%;
+  min-height: 60px;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  padding: 14px;
+  font-size: 0.875em;
+  font-family: 'SF Mono', 'Fira Code', Menlo, monospace;
+  color: var(--code-block-text, var(--text-color));
+  background: var(--code-block-bg);
+  outline: none;
+  resize: vertical;
+  line-height: 1.6;
+  white-space: pre-wrap;
+}
+textarea.math-block-raw:focus {
+  border-color: var(--link-color);
+}
+
+/* Inline context menu for PNG export */
+#cola-context-menu {
+  position: fixed;
+  display: none;
+  z-index: 99999;
+  background: var(--bg-color);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  padding: 4px;
+  min-width: 180px;
+}
+
+.cola-menu-item {
+  padding: 6px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--text-color);
+  white-space: nowrap;
+}
+
+.cola-menu-item:hover {
+  background: var(--accent-soft, rgba(241, 117, 45, 0.12));
+  color: #F1752D;
+}

package/src/renderer/themes/theme-manager.ts

@@ -0,0 +1,40 @@
+const themes: Record<string, string> = {
+  light: 'theme-light',
+  dark: 'theme-dark',
+  elegant: 'theme-elegant',
+  newsprint: 'theme-newsprint'
+}
+
+let customStyleEl: HTMLStyleElement | null = null
+
+export function applyTheme(name: string, customCSS?: string): void {
+  const body = document.body
+
+  // Remove all theme classes
+  Object.values(themes).forEach(cls => body.classList.remove(cls))
+  body.classList.remove('theme-custom')
+
+  // Remove custom theme style
+  if (customStyleEl) {
+    customStyleEl.remove()
+    customStyleEl = null
+  }
+
+  if (customCSS || name.startsWith('custom:')) {
+    if (customCSS) {
+      customStyleEl = document.createElement('style')
+      customStyleEl.textContent = customCSS
+      document.head.appendChild(customStyleEl)
+    }
+    body.classList.add('theme-custom')
+  } else if (themes[name]) {
+    body.classList.add(themes[name])
+  }
+
+  // Persist theme choice
+  localStorage.setItem('colamd-theme', name)
+}
+
+export function loadSavedTheme(): string {
+  return localStorage.getItem('colamd-theme') || 'elegant'
+}