bolyai/CIS490
3
0
Fork 0
Code Issues 5 Pull requests Projects 1 Releases Packages Wiki Activity Actions

training/dashboard(theme): code-card syntax colors follow theme H

Browse source 
Syntax-highlighting tokens (kw/str/com/fn/ty/num) were hardcoded
GitHub-dark hex values that ignored the theme. Each token now uses
oklch(75% 0.18 H+offset) where the offset is fixed per token type
and H is var(--theme-h). Result: turning the H slider rotates all
six syntax colors together while preserving their relative angular
separation, so they stay distinguishable from each other regardless
of theme. Comment color goes through --fg-mute to pick up the
L-step grey transitions like other body text.
This commit is contained in:
Max Gorog 2026-05-08 01:48:52 -05:00
parent 0a3feaae68
commit 058f2d75a9
2 changed files with 15 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
training/dashboard/static/dashboard.css
View file

@ -690,12 +690,20 @@ html, body { overflow-anchor: none; }
color: var(--fg);
max-height: clamp(260px, 50vh, 560px);
}
.code-card .kw { color: #ff7b72; }
.code-card .str { color: #a5d6ff; }
.code-card .com { color: #6e7681; font-style: italic; }
.code-card .fn { color: #d2a8ff; }
.code-card .ty { color: #ffa657; }
.code-card .num { color: #79c0ff; }
/* Syntax-highlighting colors derive from the theme. Each token
type sits at a fixed hue offset from --theme-h so the relative
distinguishability between kw / str / fn / ty / num is preserved
regardless of where the user moves the H slider — they all
rotate together. Lightness fixed at 75% (readable on dark bg
without straining), chroma fixed at 0.18 (saturated enough that
the offsets read as distinct colors). Comments go through
--fg-mute so they pick up the L-step grey transitions. */
.code-card .kw { color: oklch(75% 0.18 calc(var(--theme-h, 250) + 0)); }
.code-card .str { color: oklch(75% 0.18 calc(var(--theme-h, 250) + 220)); }
.code-card .com { color: var(--fg-mute); font-style: italic; }
.code-card .fn { color: oklch(75% 0.18 calc(var(--theme-h, 250) + 280)); }
.code-card .ty { color: oklch(75% 0.18 calc(var(--theme-h, 250) + 40)); }
.code-card .num { color: oklch(75% 0.18 calc(var(--theme-h, 250) + 200)); }
/* ─── Database explorer ────────────────────────────────────────────── */
.db-header {

2
training/dashboard/static/index.html
View file

@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CIS490 — live</title>
<link rel="stylesheet" href="/static/dashboard.css?v=6aa04f61">
<link rel="stylesheet" href="/static/dashboard.css?v=fbd0584a">
</head>
<body>
<!-- SVG filter defs for the lava-lamp goo effect. Width/height 0