From 4ddf5337ad2505d7c969a45744c01379875e4c52 Mon Sep 17 00:00:00 2001 From: Jack Date: Mon, 19 Oct 2026 14:42:47 +0800 Subject: [PATCH] collapse the syntax theme to one dark palette MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit code-block.scss carried two full highlight.js themes — a light set plus a .dark override — left over from the ink era, with keywords in violet and no relationship to the rest of the surface. CYBER has a single dark theme, so keep one rule set and pull every token color from the existing semantic variables: cyan for keywords, green for strings, amber for literals, red for types. Keywords matching the accent keeps a code block from competing with the chrome. Diff line chrome also moves off the old slate values onto tokens, and the code header now reads as part of the block instead of a light strip. --- packages/client/src/styles/code-block.scss | 173 +++++---------------- 1 file changed, 39 insertions(+), 134 deletions(-) diff --git a/packages/client/src/styles/code-block.scss b/packages/client/src/styles/code-block.scss index a5d6c38..9e07d76 100644 --- a/packages/client/src/styles/code-block.scss +++ b/packages/client/src/styles/code-block.scss @@ -3,6 +3,11 @@ // Shared code-block styles used by markdown rendering and tool payload details. // Keep these global so v-html output in both MarkdownRenderer.vue and MessageItem.vue // stays styled even though the HTML is not compiled as Vue template content. +// +// CYBER is a single dark theme, so there is no light variant: one rule set, +// one palette. Syntax colors stay inside the established semantic set — cyan for +// structure, green for strings, amber for literals, red for types, muted for +// comments — so a code block never competes with the neon accent for attention. .hljs-code-block { margin: 8px 0; @@ -21,13 +26,14 @@ justify-content: space-between; align-items: center; padding: 6px 12px; - background: rgba(0, 0, 0, 0.03); - border-bottom: 1px solid $border-color; + background: $bg-card; + border-bottom: 1px solid var(--border-light); .code-lang { font-size: 11px; - color: $text-muted; + color: $accent-primary; text-transform: uppercase; + letter-spacing: 0.08em; } .copy-btn { @@ -38,11 +44,11 @@ cursor: pointer; padding: 2px 6px; border-radius: 3px; - transition: all $transition-fast; + transition: color $transition-fast, background-color $transition-fast; &:hover { - color: $text-primary; - background: rgba(0, 0, 0, 0.05); + color: $accent-primary; + background: rgba(var(--accent-primary-rgb), 0.1); } } } @@ -81,9 +87,9 @@ user-select: none; text-align: right; padding: 0 14px 0 10px; - color: #94a3b8; - background: rgba(15, 23, 42, 0.04); - border-right: 1px solid rgba(148, 163, 184, 0.25); + color: var(--text-faint); + background: rgba(0, 0, 0, 0.22); + border-right: 1px solid var(--border-light); } .diff-line-content { @@ -92,54 +98,54 @@ } .diff-line-file-header { - color: #475569; - background: rgba(148, 163, 184, 0.16); + color: $text-secondary; + background: rgba(var(--accent-info-rgb), 0.16); } .diff-line-hunk-header { - color: #1d4ed8; - background: rgba(59, 130, 246, 0.12); + color: $accent-primary; + background: rgba(var(--accent-primary-rgb), 0.12); } .diff-line-context-fold { - color: #64748b; - background: rgba(148, 163, 184, 0.1); + color: var(--text-faint); + background: rgba(255, 255, 255, 0.05); font-style: italic; } .diff-line-added { - color: #166534; - background: rgba(34, 197, 94, 0.14); + color: $success; + background: rgba(var(--success-rgb), 0.14); .diff-line-number { - color: #15803d; - background: rgba(34, 197, 94, 0.18); + color: $success; + background: rgba(var(--success-rgb), 0.2); } } .diff-line-removed { - color: #b91c1c; - background: rgba(239, 68, 68, 0.12); + color: $error; + background: rgba(var(--error-rgb), 0.14); .diff-line-number { - color: #dc2626; - background: rgba(239, 68, 68, 0.18); + color: $error; + background: rgba(var(--error-rgb), 0.2); } } } } -// highlight.js theme override — higher-contrast, still calm +// ─── highlight.js token colors ─────────────────────────────────────────── .hljs-code-block { .hljs { - color: #1f2937; + color: $text-primary; background: none; } .hljs-keyword, .hljs-selector-tag, .hljs-meta .hljs-keyword { - color: #7c3aed; + color: $accent-primary; font-weight: 600; } @@ -147,144 +153,43 @@ .hljs-attr, .hljs-regexp, .hljs-template-variable { - color: #0f766e; + color: $success; } .hljs-number, .hljs-literal, .hljs-symbol, .hljs-bullet { - color: #b45309; + color: $warning; } .hljs-comment, .hljs-quote { - color: #6b7280; + color: var(--text-faint); font-style: italic; } .hljs-built_in, .hljs-title.class_, .hljs-title.function_ { - color: #2563eb; + color: $info; } .hljs-type, .hljs-variable, .hljs-property, .hljs-params { - color: #b91c1c; + color: $error; } .hljs-tag, .hljs-name, .hljs-section, .hljs-title { - color: #1f2937; + color: $text-primary; } .hljs-meta { - color: #6b7280; - } -} - -// Dark mode highlight.js — clearer separation without neon -.dark .hljs-code-block { - .hljs { - color: #e5e7eb; - } - - &.hljs-unified-diff { - .diff-line-file-header { - color: #cbd5e1; - background: rgba(148, 163, 184, 0.18); - } - - .diff-line-number { - color: #94a3b8; - background: rgba(15, 23, 42, 0.28); - border-right-color: rgba(148, 163, 184, 0.22); - } - - .diff-line-hunk-header { - color: #93c5fd; - background: rgba(59, 130, 246, 0.18); - } - - .diff-line-context-fold { - color: #cbd5e1; - background: rgba(148, 163, 184, 0.14); - } - - .diff-line-added { - color: #86efac; - background: rgba(34, 197, 94, 0.18); - - .diff-line-number { - color: #4ade80; - background: rgba(34, 197, 94, 0.22); - } - } - - .diff-line-removed { - color: #fca5a5; - background: rgba(239, 68, 68, 0.18); - - .diff-line-number { - color: #f87171; - background: rgba(239, 68, 68, 0.22); - } - } - } - - .hljs-keyword, - .hljs-selector-tag, - .hljs-meta .hljs-keyword { - color: #c084fc; - font-weight: 600; - } - - .hljs-string, - .hljs-attr, - .hljs-regexp, - .hljs-template-variable { - color: #5eead4; - } - - .hljs-number, - .hljs-literal, - .hljs-symbol, - .hljs-bullet { - color: #fbbf24; - } - - .hljs-comment, - .hljs-quote { - color: #94a3b8; - font-style: italic; - } - - .hljs-built_in, - .hljs-title.class_, - .hljs-title.function_ { - color: #93c5fd; - } - - .hljs-type, - .hljs-variable, - .hljs-property, - .hljs-params { - color: #fca5a5; - } - - .hljs-tag, - .hljs-name, - .hljs-section, - .hljs-title { - color: #f3f4f6; - } - - .hljs-meta { - color: #94a3b8; + color: var(--text-muted); } }