From 99660ae4f6b2992c321be38f72f8afaf73a364d7 Mon Sep 17 00:00:00 2001 From: gaoziman <2942894660@qq.com> Date: Sun, 21 Dec 2025 01:56:32 +0800 Subject: [PATCH] =?UTF-8?q?style(=E4=BB=A3=E7=A0=81=E5=9D=97):=20=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E4=BB=A3=E7=A0=81=E5=9D=97=20CSS=20=E5=8F=98=E9=87=8F?= =?UTF-8?q?=E5=92=8C=E4=BA=AE=E6=9A=97=E4=B8=BB=E9=A2=98=E8=AF=AD=E6=B3=95?= =?UTF-8?q?=E9=AB=98=E4=BA=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 添加代码块相关 CSS 变量（背景色、边框、行号、阴影等） - 实现亮色主题语法高亮（Claude Style） - 实现暗色主题语法高亮（Mac Style 紫灰主题） - 添加 Mac 红黄绿按钮显示控制变量 - 优化 Prism.js 代码高亮样式，支持主题切换 --- src/app/globals.css | 204 ++++++++++++++++++++++++++++++++++---------- 1 file changed, 160 insertions(+), 44 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 3c49cdc..4471e3d 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -62,6 +62,21 @@ /* 字体大小 */ --font-size-base: 15px; + + /* ======================================== + 代码块颜色 - Claude 风格亮色主题 + ======================================== */ + --color-code-bg: #F5F3F0; + --color-code-toolbar-bg: #EDEAE6; + --color-code-border: #E0DDD8; + --color-code-line-number: #A8A29E; + --color-code-line-border: #E0DDD8; + --color-code-text: #374151; + --color-code-toolbar-text: #78716C; + --color-code-toolbar-text-hover: #57534E; + --color-code-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); + /* Mac 红黄绿按钮 - 亮色主题隐藏 */ + --color-code-traffic-light-display: none; } /* ======================================== @@ -104,6 +119,22 @@ --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-input: 0 2px 8px rgba(0, 0, 0, 0.2); --shadow-input-focus: 0 4px 16px rgba(224, 107, 62, 0.2); + + /* ======================================== + 代码块颜色 - Mac Style 紫灰主题 + 与页面背景 #29252B 协调 + ======================================== */ + --color-code-bg: #322D38; + --color-code-toolbar-bg: #29252B; + --color-code-border: #3A353E; + --color-code-line-number: #5A5560; + --color-code-line-border: #3A353E; + --color-code-text: #D4D4D8; + --color-code-toolbar-text: #8B8592; + --color-code-toolbar-text-hover: #D4D4D8; + --color-code-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15); + /* Mac 红黄绿按钮 - 暗色主题显示 */ + --color-code-traffic-light-display: flex; } @theme inline { @@ -407,11 +438,12 @@ body { } /* ======================================== - Prism.js 代码高亮样式 (VS Code Dark+) + Prism.js 代码高亮样式 ======================================== */ + +/* 基础样式 */ code[class*="language-"], pre[class*="language-"] { - color: #d4d4d4; text-shadow: none; font-family: 'SF Mono', Monaco, 'Courier New', monospace; direction: ltr; @@ -424,66 +456,150 @@ pre[class*="language-"] { hyphens: none; } -.token.comment, -.token.prolog, -.token.doctype, -.token.cdata { - color: #6a9955; +/* ======================================== + 亮色主题语法高亮 (Claude Style) + ======================================== */ +:root code[class*="language-"], +:root pre[class*="language-"] { + color: #374151; } -.token.punctuation { - color: #d4d4d4; +:root .token.comment, +:root .token.prolog, +:root .token.doctype, +:root .token.cdata { + color: #9CA3AF; + font-style: italic; } -.token.property, -.token.tag, -.token.boolean, -.token.number, -.token.constant, -.token.symbol, -.token.deleted { - color: #b5cea8; +:root .token.punctuation { + color: #6B7280; } -.token.selector, -.token.attr-name, -.token.string, -.token.char, -.token.builtin, -.token.inserted { - color: #ce9178; +:root .token.property, +:root .token.tag, +:root .token.boolean, +:root .token.number, +:root .token.constant, +:root .token.symbol, +:root .token.deleted { + color: #2563EB; } -.token.operator, -.token.entity, -.token.url, -.language-css .token.string, -.style .token.string { - color: #d4d4d4; +:root .token.selector, +:root .token.attr-name, +:root .token.string, +:root .token.char, +:root .token.builtin, +:root .token.inserted { + color: #059669; } -.token.atrule, -.token.attr-value, -.token.keyword { - color: #569cd6; +:root .token.operator, +:root .token.entity, +:root .token.url, +:root .language-css .token.string, +:root .style .token.string { + color: #374151; } -.token.function, -.token.class-name { - color: #dcdcaa; +:root .token.atrule, +:root .token.attr-value, +:root .token.keyword { + color: #D97706; + font-weight: 500; } -.token.regex, -.token.important, -.token.variable { - color: #d16969; +:root .token.function, +:root .token.class-name { + color: #7C3AED; } -.token.important, -.token.bold { +:root .token.regex, +:root .token.important, +:root .token.variable { + color: #DC2626; +} + +:root .token.important, +:root .token.bold { font-weight: bold; } -.token.italic { +:root .token.italic { + font-style: italic; +} + +/* ======================================== + 暗色主题语法高亮 (Mac Style - 紫灰主题) + ======================================== */ +[data-theme="dark"] code[class*="language-"], +[data-theme="dark"] pre[class*="language-"] { + color: #D4D4D8; +} + +[data-theme="dark"] .token.comment, +[data-theme="dark"] .token.prolog, +[data-theme="dark"] .token.doctype, +[data-theme="dark"] .token.cdata { + color: #6B6672; + font-style: italic; +} + +[data-theme="dark"] .token.punctuation { + color: #A8A3AE; +} + +[data-theme="dark"] .token.property, +[data-theme="dark"] .token.tag, +[data-theme="dark"] .token.boolean, +[data-theme="dark"] .token.number, +[data-theme="dark"] .token.constant, +[data-theme="dark"] .token.symbol, +[data-theme="dark"] .token.deleted { + color: #E8A87C; +} + +[data-theme="dark"] .token.selector, +[data-theme="dark"] .token.attr-name, +[data-theme="dark"] .token.string, +[data-theme="dark"] .token.char, +[data-theme="dark"] .token.builtin, +[data-theme="dark"] .token.inserted { + color: #9DD68D; +} + +[data-theme="dark"] .token.operator, +[data-theme="dark"] .token.entity, +[data-theme="dark"] .token.url, +[data-theme="dark"] .language-css .token.string, +[data-theme="dark"] .style .token.string { + color: #7DD3C0; +} + +[data-theme="dark"] .token.atrule, +[data-theme="dark"] .token.attr-value, +[data-theme="dark"] .token.keyword { + color: #D4A5E8; + font-weight: 500; +} + +[data-theme="dark"] .token.function, +[data-theme="dark"] .token.class-name { + color: #7EB8E8; +} + +[data-theme="dark"] .token.regex, +[data-theme="dark"] .token.important, +[data-theme="dark"] .token.variable { + color: #E88A95; +} + +[data-theme="dark"] .token.important, +[data-theme="dark"] .token.bold { + font-weight: bold; +} + +[data-theme="dark"] .token.italic { font-style: italic; }