toor/hermes-ui
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

collapse the syntax theme to one dark palette

Browse Source 
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:
toor
2026-10-19 14:42:47 +08:00
parent 2d7069bdf9
commit 4ddf5337ad
1 changed files with 39 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/client/src/styles/code-block.scss
+39 -134
View File
@@ -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);
}
}