From e0584f1d0be1ee6d31ede2d0ef2c8f94ef834b44 Mon Sep 17 00:00:00 2001 From: tianma-if Date: Tue, 25 Aug 2026 21:30:41 +0800 Subject: [PATCH] feat(theme): add refined emerald micro-tint to inline code --- apps/ios/EditorSource/src/styles.css | 33 ++++++++++++++++--- .../src/components/LocalTiptapEditor.tsx | 4 +-- apps/web/src/styles/globals.css | 30 ++++++++++------- .../web/src/styles/mobile-markdown-editor.css | 25 ++++++++++++++ 4 files changed, 75 insertions(+), 17 deletions(-) diff --git a/apps/ios/EditorSource/src/styles.css b/apps/ios/EditorSource/src/styles.css index b84df308..b7122d27 100644 --- a/apps/ios/EditorSource/src/styles.css +++ b/apps/ios/EditorSource/src/styles.css @@ -430,12 +430,23 @@ html[data-theme="dark"] .edgeever-image-size-button.is-active { .edgeever-prose code, .ProseMirror code { - border: 1px solid var(--border); + border: 1px solid #d4ebdc; border-radius: 4px; - background: var(--code-bg); - padding: 2px 4px; + background: #f2f9f5; + color: #0d5f3a; + padding: 2px 5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; - font-size: 0.9em; + font-size: 0.88em; + font-weight: 550; +} + +.edgeever-prose pre code, +.ProseMirror pre code { + border: 0; + background: transparent; + padding: 0; + color: inherit; + font-weight: normal; } .edgeever-prose pre, @@ -525,6 +536,20 @@ html[data-theme="dark"] .ProseMirror blockquote { color: #cbd5e1; } +html[data-theme="dark"] .edgeever-prose code, +html[data-theme="dark"] .ProseMirror code { + border-color: rgba(22, 160, 110, 0.28); + background: rgba(22, 160, 110, 0.12); + color: #6ee7b7; +} + +html[data-theme="dark"] .edgeever-prose pre code, +html[data-theme="dark"] .ProseMirror pre code { + border: 0; + background: transparent; + color: inherit; +} + .edgeever-prose .tableWrapper, .ProseMirror .tableWrapper { --mobile-table-column-width: clamp(4.5rem, 24cqi, 12rem); diff --git a/apps/mobile/src/components/LocalTiptapEditor.tsx b/apps/mobile/src/components/LocalTiptapEditor.tsx index 2929d720..c809ea30 100644 --- a/apps/mobile/src/components/LocalTiptapEditor.tsx +++ b/apps/mobile/src/components/LocalTiptapEditor.tsx @@ -2937,8 +2937,8 @@ const getEditorStyles = (theme: "light" | "dark", options?: { viewer?: boolean } .edgeever-editor-content ul[data-type="taskList"] ul[data-type="taskList"] { margin: 4px 0 0; padding-left: 24px; } .edgeever-editor-content blockquote { margin-left: 0; max-width: 100%; padding: 6px 12px; border-left: 3px solid #16a06e; border-radius: 1px 4px 4px 1px; background: ${theme === "dark" ? "rgba(22, 160, 110, 0.08)" : "rgba(22, 160, 110, 0.04)"}; color: ${theme === "dark" ? "#cbd5e1" : "#334155"}; } .edgeever-editor-content pre { max-width: 100%; overflow-x: auto; border-radius: 8px; border: 1px solid ${theme === "dark" ? "#334155" : "#e2e8f0"}; padding: 12px 90px 12px 14px; background: ${theme === "dark" ? "#1e293b" : "#f8fafc"}; color: ${theme === "dark" ? "#e2e8f0" : "#0f172a"}; font-size: 0.88rem; box-shadow: 0 1px 2px ${theme === "dark" ? "rgba(0, 0, 0, 0.2)" : "rgba(15, 23, 42, 0.03)"}; } - .edgeever-editor-content code { border-radius: 4px; padding: 2px 5px; border: 1px solid ${theme === "dark" ? "rgba(255,255,255,0.1)" : "#e2e8f0"}; background: ${theme === "dark" ? "#1e293b" : "#f1f5f9"}; color: ${theme === "dark" ? "#e2e8f0" : "#0f172a"}; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; } - .edgeever-editor-content pre code { padding: 0; border: 0; background: transparent; font-size: inherit; } + .edgeever-editor-content code { border-radius: 4px; padding: 2px 5px; border: 1px solid ${theme === "dark" ? "rgba(22, 160, 110, 0.28)" : "#d4ebdc"}; background: ${theme === "dark" ? "rgba(22, 160, 110, 0.12)" : "#f2f9f5"}; color: ${theme === "dark" ? "#6ee7b7" : "#0d5f3a"}; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; font-weight: 550; } + .edgeever-editor-content pre code { padding: 0; border: 0; background: transparent; font-size: inherit; font-weight: normal; color: inherit; } .edgeever-editor-content .tiptap-mathematics-render[data-type="block-math"] { max-width: 100%; margin: 16px 0; overflow-x: auto; overflow-y: hidden; padding: 4px 0; text-align: center; -webkit-overflow-scrolling: touch; } .edgeever-editor-content .inline-math-error, .edgeever-editor-content .block-math-error { color: ${theme === "dark" ? "#fda4af" : "#be123c"}; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } /* External hyperlinks (match Web default ProseMirror). Attachment chips override below. */ diff --git a/apps/web/src/styles/globals.css b/apps/web/src/styles/globals.css index 6c74106e..f959d8bf 100644 --- a/apps/web/src/styles/globals.css +++ b/apps/web/src/styles/globals.css @@ -807,12 +807,13 @@ textarea { } .ProseMirror code { - border: 1px solid rgb(var(--slate-300-rgb) / 0.6); + border: 1px solid #d4ebdc; border-radius: 4px; - background: rgb(var(--slate-100-rgb) / 0.7); - padding: 0.12rem 0.35rem; + background: #f2f9f5; + padding: 0.12rem 0.38rem; font-size: 0.875em; - color: #0f172a; + font-weight: 550; + color: #0d5f3a; font-family: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; } @@ -1267,14 +1268,14 @@ textarea { margin: 1rem 0; } .markdown-content code { - font-family: monospace; - background-color: #f6fbf7; - color: #1e293b; - border: 1px solid #d9eadf; - padding: 0.125rem 0.35rem; + font-family: "JetBrains Mono", "Fira Code", monospace; + background-color: #f2f9f5; + color: #0d5f3a; + border: 1px solid #d4ebdc; + padding: 0.125rem 0.38rem; border-radius: 4px; font-size: 0.8rem; - font-weight: 600; + font-weight: 550; } .markdown-content pre code { background-color: transparent; @@ -1705,7 +1706,14 @@ textarea { } :root.dark .ProseMirror code, -:root.dark .ProseMirror pre { +:root.dark .markdown-content code { + border-color: rgba(22, 160, 110, 0.28); + background: rgba(22, 160, 110, 0.12); + color: #6ee7b7; +} + +:root.dark .ProseMirror pre, +:root.dark .markdown-content pre { border-color: rgb(var(--slate-200-rgb) / 0.8); background: rgb(var(--slate-100-rgb) / 0.8); color: #e2e8f0; diff --git a/apps/web/src/styles/mobile-markdown-editor.css b/apps/web/src/styles/mobile-markdown-editor.css index cab05abc..727d6f7e 100644 --- a/apps/web/src/styles/mobile-markdown-editor.css +++ b/apps/web/src/styles/mobile-markdown-editor.css @@ -617,6 +617,25 @@ html.dark .edgeever-mobile-tiptap-content a:hover { margin: 1.5rem 0; } +.edgeever-mobile-tiptap-content code { + border: 1px solid #d4ebdc; + border-radius: 4px; + background: #f2f9f5; + padding: 0.12rem 0.38rem; + font-size: 0.875em; + font-weight: 550; + color: #0d5f3a; + font-family: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; +} + +.edgeever-mobile-tiptap-content pre code { + border: 0; + background: transparent; + padding: 0; + color: inherit; + font-weight: normal; +} + .edgeever-mobile-tiptap-content .edgeever-code-source { overflow-x: auto; border: 1px solid #e2e8f0; @@ -877,6 +896,12 @@ html.dark .edgeever-mobile-tiptap-content a:hover { color: #f8fafc; } +:root.dark .edgeever-mobile-tiptap-content code { + border-color: rgba(22, 160, 110, 0.28); + background: rgba(22, 160, 110, 0.12); + color: #6ee7b7; +} + :root.dark .edgeever-mobile-tiptap-content .edgeever-code-source { border-color: #334155; background: #1e293b;