collapse the syntax theme to one dark palette
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.
This commit is contained in:
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user