Werkbank Syntax · flooo.pro

The color scheme behind the code blocks on this site — documented here for the taking. It follows three rules:

No red-green axis. The palette works with blue (keywords), amber (strings), teal (numbers and types) and violet (functions) — colors that stay distinguishable with red-green color vision deficiency.
Every token color reaches WCAG AA (at least 4.5:1) on both backgrounds. Surprisingly few popular schemes manage that — comments are usually the first casualty.
Meaning never rides on color alone. Keywords additionally carry font weight, comments are italic, diffs keep their +/− prefixes; inserted is blue, removed is amber — not green and red.

Palette

Role	Light	Dark	Contrast (light / dark)
Text & operators	`#1C2127`	`#E8E6E1`	14.2 / 12.7
Keywords & builtins	`#17549C`	`#7FB2EC`	6.6 / 7.1
Strings	`#8F4E00`	`#F0A64A`	5.7 / 7.7
Numbers, types & constants	`#0E5D66`	`#63CFC9`	6.6 / 8.5
Functions, tags & attributes	`#5B3E9E`	`#C7A6F2`	7.0 / 7.7
Comments (italic)	`#586069`	`#9AA4AE`	5.6 / 6.3
Diff inserted (background)	`#DCE8F6`	`#1E3A5C`	13.1 / 9.3
Diff removed (background)	`#F3E4D3`	`#4A3517`	13.0 / 9.3

Measured against the code backgrounds #F1F0EB (light) and #1D232B (dark).

Live sample

Renders in your operating system’s scheme — light/dark switches along:

// prune removes dead endpoints after sending.
func (s *Store) prune(codes map[string]int) (n int, err error) {
	for ep, code := range codes {
		if code == 404 || code == 410 {
			delete(s.Subs, ep)
			n++
		}
	}
	return n, s.save()
}

# Karpenter NodePool — spot first, fall back to on-demand
spec:
  template:
    spec:
      requirements:
        - key: karpenter.sh/capacity-type
          operator: In
          values: ["spot", "on-demand"]
  limits:
    cpu: 64

Take it

One CSS file, no dependencies: werkbank-syntax.css. The classes are the ones Chroma emits (Hugo with noClasses = false) and largely match Pygments. Dark mode hangs off prefers-color-scheme; the code block background colors come from your own layout.

License: CC0 1.0 — take it, build with it. A link back is appreciated, never required.

/* Werkbank Syntax — Chroma/Pygments-Farbschema von flooo.pro
   Blau = Keywords · Bernstein = Strings · Teal = Zahlen/Typen · Violett = Funktionen
   Jede Tokenfarbe >= 4.5:1 (WCAG AA) auf #F1F0EB (hell) bzw. #1D232B (dunkel),
   ohne Rot/Grün-Achse. Diff: Blau (+) / Bernstein (-), Bedeutung nie nur über Farbe.
   https://flooo.pro/werkbank-syntax/ · Lizenz: CC0 1.0 */

:root {
  --syn-fg: #1C2127;
  --syn-kw: #17549C;
  --syn-str: #8F4E00;
  --syn-num: #0E5D66;
  --syn-fn: #5B3E9E;
  --syn-com: #586069;
  --syn-ins-bg: #DCE8F6;
  --syn-del-bg: #F3E4D3;
}
@media (prefers-color-scheme: dark) {
  :root {
    --syn-fg: #E8E6E1;
    --syn-kw: #7FB2EC;
    --syn-str: #F0A64A;
    --syn-num: #63CFC9;
    --syn-fn: #C7A6F2;
    --syn-com: #9AA4AE;
    --syn-ins-bg: #1E3A5C;
    --syn-del-bg: #4A3517;
  }
}

.chroma { color: var(--syn-fg); background: transparent; }
/* Keywords & Builtins */
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kp,
.chroma .kr, .chroma .nb, .chroma .bp { color: var(--syn-kw); font-weight: 600; }
/* Typen & Klassen */
.chroma .kt, .chroma .nc, .chroma .nn { color: var(--syn-num); }
/* Funktionen, Dekoratoren, Tags, Attribute */
.chroma .nf, .chroma .fm, .chroma .nd, .chroma .nt, .chroma .na { color: var(--syn-fn); }
/* Strings */
.chroma .s, .chroma .s1, .chroma .s2, .chroma .sa, .chroma .sb, .chroma .sc,
.chroma .sd, .chroma .dl, .chroma .se, .chroma .sh, .chroma .si, .chroma .sx,
.chroma .sr { color: var(--syn-str); }
/* Zahlen & Konstanten */
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi,
.chroma .mo, .chroma .il, .chroma .no { color: var(--syn-num); }
/* Kommentare */
.chroma .c, .chroma .c1, .chroma .cm, .chroma .ch, .chroma .cs,
.chroma .cp, .chroma .cpf { color: var(--syn-com); font-style: italic; }
/* Operatoren, Interpunktion, sonstige Namen: Grundfarbe */
.chroma .o, .chroma .ow { color: var(--syn-fg); }
.chroma .p, .chroma .n, .chroma .nx, .chroma .nv, .chroma .vi,
.chroma .vc, .chroma .vg { color: var(--syn-fg); }
/* Diff: Blau eingefügt, Bernstein entfernt (nie Grün/Rot) */
.chroma .gi { color: var(--syn-kw); background: var(--syn-ins-bg); }
.chroma .gd { color: var(--syn-str); background: var(--syn-del-bg); }
.chroma .ge { font-style: italic; }
.chroma .gs { font-weight: 700; }
/* Fehler-Token: nicht rot einfärben, nur markieren */
.chroma .err { color: var(--syn-fg); border-bottom: 2px dotted var(--syn-str); }
/* Zeilen-Hervorhebung (hl_lines) und Zeilennummern */
.chroma .hl { background: var(--syn-ins-bg); display: block; }
.chroma .lnt, .chroma .ln { color: var(--syn-com); margin-right: 0.7em; }