Skip to content

fix(site): make code blocks legible, drive all colour from one Catppuccin palette #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
minhtt159 merged 2 commits into from
Sep 16, 2026
Merged

fix(site): make code blocks legible, drive all colour from one Catppuccin palette #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7f39b62
fix(site): make code blocks legible in the light theme
minhtt159 Sep 16, 2026
590f5bf
refactor(site): keep Latte in light, drive all colour from one palette
minhtt159 Sep 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
261 changes: 97 additions & 164 deletions assets/css/extended/chroma.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,164 +1,97 @@
/* Chroma: catppuccin-latte, and catppuccin-mocha under [data-theme="dark"]. Generated with hugo gen chromastyles; block background comes from --code-block-bg. */

/* Other */ .chroma .x { color:#4c4f69 }
/* Error */ .chroma .err { color:#d20f39 }
/* CodeLine */ .chroma .cl { color:#4c4f69 }
/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
/* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
/* LineHighlight */ .chroma .hl { background-color:#bcc0cc }
/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#8c8fa1 }
/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#8c8fa1 }
/* Line */ .chroma .line { display:flex; }
/* Keyword */ .chroma .k { color:#8839ef }
/* KeywordConstant */ .chroma .kc { color:#fe640b }
/* KeywordDeclaration */ .chroma .kd { color:#d20f39 }
/* KeywordNamespace */ .chroma .kn { color:#179299 }
/* KeywordPseudo */ .chroma .kp { color:#8839ef }
/* KeywordReserved */ .chroma .kr { color:#8839ef }
/* KeywordType */ .chroma .kt { color:#d20f39 }
/* NameAttribute */ .chroma .na { color:#1e66f5 }
/* NameClass */ .chroma .nc { color:#df8e1d }
/* NameConstant */ .chroma .no { color:#df8e1d }
/* NameDecorator */ .chroma .nd { color:#1e66f5;font-weight:bold }
/* NameEntity */ .chroma .ni { color:#179299 }
/* NameException */ .chroma .ne { color:#fe640b }
/* NameLabel */ .chroma .nl { color:#04a5e5 }
/* NameNamespace */ .chroma .nn { color:#fe640b }
/* NameOther */ .chroma .nx { color:#4c4f69 }
/* NameProperty */ .chroma .py { color:#fe640b }
/* NameTag */ .chroma .nt { color:#8839ef }
/* NameBuiltin */ .chroma .nb { color:#04a5e5 }
/* NameBuiltinPseudo */ .chroma .bp { color:#04a5e5 }
/* NameVariable */ .chroma .nv { color:#dc8a78 }
/* NameVariableClass */ .chroma .vc { color:#dc8a78 }
/* NameVariableGlobal */ .chroma .vg { color:#dc8a78 }
/* NameVariableInstance */ .chroma .vi { color:#dc8a78 }
/* NameVariableMagic */ .chroma .vm { color:#dc8a78 }
/* NameFunction */ .chroma .nf { color:#1e66f5 }
/* NameFunctionMagic */ .chroma .fm { color:#1e66f5 }
/* LiteralDate */ .chroma .ld { color:#4c4f69 }
/* LiteralString */ .chroma .s { color:#40a02b }
/* LiteralStringAffix */ .chroma .sa { color:#d20f39 }
/* LiteralStringBacktick */ .chroma .sb { color:#40a02b }
/* LiteralStringChar */ .chroma .sc { color:#40a02b }
/* LiteralStringDelimiter */ .chroma .dl { color:#1e66f5 }
/* LiteralStringDoc */ .chroma .sd { color:#9ca0b0 }
/* LiteralStringDouble */ .chroma .s2 { color:#40a02b }
/* LiteralStringEscape */ .chroma .se { color:#1e66f5 }
/* LiteralStringHeredoc */ .chroma .sh { color:#9ca0b0 }
/* LiteralStringInterpol */ .chroma .si { color:#40a02b }
/* LiteralStringOther */ .chroma .sx { color:#40a02b }
/* LiteralStringRegex */ .chroma .sr { color:#179299 }
/* LiteralStringSingle */ .chroma .s1 { color:#40a02b }
/* LiteralStringSymbol */ .chroma .ss { color:#40a02b }
/* LiteralNumber */ .chroma .m { color:#fe640b }
/* LiteralNumberBin */ .chroma .mb { color:#fe640b }
/* LiteralNumberFloat */ .chroma .mf { color:#fe640b }
/* LiteralNumberHex */ .chroma .mh { color:#fe640b }
/* LiteralNumberInteger */ .chroma .mi { color:#fe640b }
/* LiteralNumberIntegerLong */ .chroma .il { color:#fe640b }
/* LiteralNumberOct */ .chroma .mo { color:#fe640b }
/* Operator */ .chroma .o { color:#04a5e5;font-weight:bold }
/* OperatorWord */ .chroma .ow { color:#04a5e5;font-weight:bold }
/* OperatorReserved */ .chroma .or { color:#04a5e5;font-weight:bold }
/* Comment */ .chroma .c { color:#9ca0b0;font-style:italic }
/* CommentHashbang */ .chroma .ch { color:#acb0be;font-style:italic }
/* CommentMultiline */ .chroma .cm { color:#9ca0b0;font-style:italic }
/* CommentSingle */ .chroma .c1 { color:#9ca0b0;font-style:italic }
/* CommentSpecial */ .chroma .cs { color:#9ca0b0;font-style:italic }
/* CommentPreproc */ .chroma .cp { color:#9ca0b0;font-style:italic }
/* CommentPreprocFile */ .chroma .cpf { color:#9ca0b0;font-weight:bold;font-style:italic }
/* GenericDeleted */ .chroma .gd { color:#d20f39;background-color:#ccd0da }
/* GenericEmph */ .chroma .ge { font-style:italic }
/* GenericError */ .chroma .gr { color:#d20f39 }
/* GenericHeading */ .chroma .gh { color:#fe640b;font-weight:bold }
/* GenericInserted */ .chroma .gi { color:#40a02b;background-color:#ccd0da }
/* GenericOutput */ .chroma .go { color:#4c4f69 }
/* GenericPrompt */ .chroma .gp { color:#4c4f69 }
/* GenericStrong */ .chroma .gs { font-weight:bold }
/* GenericSubheading */ .chroma .gu { color:#fe640b;font-weight:bold }
/* GenericTraceback */ .chroma .gt { color:#d20f39 }
/* GenericUnderline */ .chroma .gl { text-decoration:underline }


/* Other */ [data-theme="dark"] .chroma .x { color:#cdd6f4 }
/* Error */ [data-theme="dark"] .chroma .err { color:#f38ba8 }
/* CodeLine */ [data-theme="dark"] .chroma .cl { color:#cdd6f4 }
/* LineLink */ [data-theme="dark"] .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
/* LineTableTD */ [data-theme="dark"] .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
/* LineTable */ [data-theme="dark"] .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
/* LineHighlight */ [data-theme="dark"] .chroma .hl { background-color:#45475a }
/* LineNumbersTable */ [data-theme="dark"] .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f849c }
/* LineNumbers */ [data-theme="dark"] .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f849c }
/* Line */ [data-theme="dark"] .chroma .line { display:flex; }
/* Keyword */ [data-theme="dark"] .chroma .k { color:#cba6f7 }
/* KeywordConstant */ [data-theme="dark"] .chroma .kc { color:#fab387 }
/* KeywordDeclaration */ [data-theme="dark"] .chroma .kd { color:#f38ba8 }
/* KeywordNamespace */ [data-theme="dark"] .chroma .kn { color:#94e2d5 }
/* KeywordPseudo */ [data-theme="dark"] .chroma .kp { color:#cba6f7 }
/* KeywordReserved */ [data-theme="dark"] .chroma .kr { color:#cba6f7 }
/* KeywordType */ [data-theme="dark"] .chroma .kt { color:#f38ba8 }
/* NameAttribute */ [data-theme="dark"] .chroma .na { color:#89b4fa }
/* NameClass */ [data-theme="dark"] .chroma .nc { color:#f9e2af }
/* NameConstant */ [data-theme="dark"] .chroma .no { color:#f9e2af }
/* NameDecorator */ [data-theme="dark"] .chroma .nd { color:#89b4fa;font-weight:bold }
/* NameEntity */ [data-theme="dark"] .chroma .ni { color:#94e2d5 }
/* NameException */ [data-theme="dark"] .chroma .ne { color:#fab387 }
/* NameLabel */ [data-theme="dark"] .chroma .nl { color:#89dceb }
/* NameNamespace */ [data-theme="dark"] .chroma .nn { color:#fab387 }
/* NameOther */ [data-theme="dark"] .chroma .nx { color:#cdd6f4 }
/* NameProperty */ [data-theme="dark"] .chroma .py { color:#fab387 }
/* NameTag */ [data-theme="dark"] .chroma .nt { color:#cba6f7 }
/* NameBuiltin */ [data-theme="dark"] .chroma .nb { color:#89dceb }
/* NameBuiltinPseudo */ [data-theme="dark"] .chroma .bp { color:#89dceb }
/* NameVariable */ [data-theme="dark"] .chroma .nv { color:#f5e0dc }
/* NameVariableClass */ [data-theme="dark"] .chroma .vc { color:#f5e0dc }
/* NameVariableGlobal */ [data-theme="dark"] .chroma .vg { color:#f5e0dc }
/* NameVariableInstance */ [data-theme="dark"] .chroma .vi { color:#f5e0dc }
/* NameVariableMagic */ [data-theme="dark"] .chroma .vm { color:#f5e0dc }
/* NameFunction */ [data-theme="dark"] .chroma .nf { color:#89b4fa }
/* NameFunctionMagic */ [data-theme="dark"] .chroma .fm { color:#89b4fa }
/* LiteralDate */ [data-theme="dark"] .chroma .ld { color:#cdd6f4 }
/* LiteralString */ [data-theme="dark"] .chroma .s { color:#a6e3a1 }
/* LiteralStringAffix */ [data-theme="dark"] .chroma .sa { color:#f38ba8 }
/* LiteralStringBacktick */ [data-theme="dark"] .chroma .sb { color:#a6e3a1 }
/* LiteralStringChar */ [data-theme="dark"] .chroma .sc { color:#a6e3a1 }
/* LiteralStringDelimiter */ [data-theme="dark"] .chroma .dl { color:#89b4fa }
/* LiteralStringDoc */ [data-theme="dark"] .chroma .sd { color:#6c7086 }
/* LiteralStringDouble */ [data-theme="dark"] .chroma .s2 { color:#a6e3a1 }
/* LiteralStringEscape */ [data-theme="dark"] .chroma .se { color:#89b4fa }
/* LiteralStringHeredoc */ [data-theme="dark"] .chroma .sh { color:#6c7086 }
/* LiteralStringInterpol */ [data-theme="dark"] .chroma .si { color:#a6e3a1 }
/* LiteralStringOther */ [data-theme="dark"] .chroma .sx { color:#a6e3a1 }
/* LiteralStringRegex */ [data-theme="dark"] .chroma .sr { color:#94e2d5 }
/* LiteralStringSingle */ [data-theme="dark"] .chroma .s1 { color:#a6e3a1 }
/* LiteralStringSymbol */ [data-theme="dark"] .chroma .ss { color:#a6e3a1 }
/* LiteralNumber */ [data-theme="dark"] .chroma .m { color:#fab387 }
/* LiteralNumberBin */ [data-theme="dark"] .chroma .mb { color:#fab387 }
/* LiteralNumberFloat */ [data-theme="dark"] .chroma .mf { color:#fab387 }
/* LiteralNumberHex */ [data-theme="dark"] .chroma .mh { color:#fab387 }
/* LiteralNumberInteger */ [data-theme="dark"] .chroma .mi { color:#fab387 }
/* LiteralNumberIntegerLong */ [data-theme="dark"] .chroma .il { color:#fab387 }
/* LiteralNumberOct */ [data-theme="dark"] .chroma .mo { color:#fab387 }
/* Operator */ [data-theme="dark"] .chroma .o { color:#89dceb;font-weight:bold }
/* OperatorWord */ [data-theme="dark"] .chroma .ow { color:#89dceb;font-weight:bold }
/* OperatorReserved */ [data-theme="dark"] .chroma .or { color:#89dceb;font-weight:bold }
/* Comment */ [data-theme="dark"] .chroma .c { color:#6c7086;font-style:italic }
/* CommentHashbang */ [data-theme="dark"] .chroma .ch { color:#585b70;font-style:italic }
/* CommentMultiline */ [data-theme="dark"] .chroma .cm { color:#6c7086;font-style:italic }
/* CommentSingle */ [data-theme="dark"] .chroma .c1 { color:#6c7086;font-style:italic }
/* CommentSpecial */ [data-theme="dark"] .chroma .cs { color:#6c7086;font-style:italic }
/* CommentPreproc */ [data-theme="dark"] .chroma .cp { color:#6c7086;font-style:italic }
/* CommentPreprocFile */ [data-theme="dark"] .chroma .cpf { color:#6c7086;font-weight:bold;font-style:italic }
/* GenericDeleted */ [data-theme="dark"] .chroma .gd { color:#f38ba8;background-color:#313244 }
/* GenericEmph */ [data-theme="dark"] .chroma .ge { font-style:italic }
/* GenericError */ [data-theme="dark"] .chroma .gr { color:#f38ba8 }
/* GenericHeading */ [data-theme="dark"] .chroma .gh { color:#fab387;font-weight:bold }
/* GenericInserted */ [data-theme="dark"] .chroma .gi { color:#a6e3a1;background-color:#313244 }
/* GenericOutput */ [data-theme="dark"] .chroma .go { color:#cdd6f4 }
/* GenericPrompt */ [data-theme="dark"] .chroma .gp { color:#cdd6f4 }
/* GenericStrong */ [data-theme="dark"] .chroma .gs { font-weight:bold }
/* GenericSubheading */ [data-theme="dark"] .chroma .gu { color:#fab387;font-weight:bold }
/* GenericTraceback */ [data-theme="dark"] .chroma .gt { color:#f38ba8 }
/* GenericUnderline */ [data-theme="dark"] .chroma .gl { text-decoration:underline }
/* Chroma tokens mapped onto the Catppuccin roles, following the Code Editors
section of the style guide:
https://github.com/catppuccin/catppuccin/blob/main/docs/style-guide.md

One set of rules serves both theme states, because every colour here is a
--ctp-* role that theme.css redefines per flavour. No hex values in this file.

This follows the style guide rather than `hugo gen chromastyles`, which
disagrees with it in a few places. The one that mattered: the generated style
puts NameVariable on Rosewater, which the guide never says - it assigns
Rosewater to Macros alone, so plain identifiers fall to Text. On a Latte
block that is the difference between 2.17:1 and 7.06:1, and in a PromQL
fence the metric names are almost the whole block. The guide also puts
Builtins on Red rather than Sky, Attributes on Yellow rather than Blue,
Comments on Overlay 2 rather than Overlay 0, and Escapes and Regex on Pink.

Contrast against --code-block-bg: Mocha clears WCAG AA on every role
(worst 5.07:1). Latte does not and cannot - its accents top out well under
4.5:1 on any Catppuccin background, so light mode carries Text at 7.06:1 and
accents between 2.3 and 4.8. That is a property of the palette, kept
deliberately for fidelity. */

/* structure, no colour */
.chroma .lnlinks { outline: none; text-decoration: none; color: inherit; }
.chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
.chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
.chroma .line { display: flex; }
.chroma .ge { font-style: italic; }
.chroma .gs { font-weight: bold; }
.chroma .gl { text-decoration: underline; }

/* body: identifiers, literals and anything untokenised */
.chroma, .chroma .cl, .chroma .x, .chroma .n, .chroma .nx, .chroma .nn,
.chroma .nl, .chroma .nv, .chroma .vc, .chroma .vg, .chroma .vi,
.chroma .l, .chroma .ld, .chroma .g, .chroma .go,
.chroma .gp { color: var(--ctp-text); }

/* Keyword -> Mauve */
.chroma .k, .chroma .kr, .chroma .kp, .chroma .kd,
.chroma .kn { color: var(--ctp-mauve); }

/* Strings -> Green */
.chroma .s, .chroma .s1, .chroma .s2, .chroma .sb, .chroma .sc, .chroma .sx,
.chroma .ss, .chroma .si, .chroma .sd, .chroma .sh { color: var(--ctp-green); }

/* Escape Sequences, Regex -> Pink */
.chroma .se, .chroma .sr { color: var(--ctp-pink); }

/* Symbols, Atoms / Builtins / Errors -> Red */
.chroma .sa, .chroma .nb, .chroma .bp, .chroma .err, .chroma .gr,
.chroma .gt { color: var(--ctp-red); }

/* Constants, Numbers -> Peach */
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .mo,
.chroma .il, .chroma .kc, .chroma .no { color: var(--ctp-peach); }

/* Classes, Types, Annotations, Attributes -> Yellow */
.chroma .nc, .chroma .kt, .chroma .ne, .chroma .na { color: var(--ctp-yellow); }
.chroma .nd { color: var(--ctp-yellow); font-weight: bold; }

/* Methods, Functions, and Property (e.g. JSON keys) -> Blue */
.chroma .nf, .chroma .fm, .chroma .py { color: var(--ctp-blue); }

/* Enum Variants -> Teal */
.chroma .ni { color: var(--ctp-teal); }

/* Macros -> Rosewater */
.chroma .vm { color: var(--ctp-rosewater); }

/* Operators -> Sky */
.chroma .o, .chroma .ow, .chroma .or { color: var(--ctp-sky); font-weight: bold; }

/* Comments -> Overlay 2 */
.chroma .c, .chroma .c1, .chroma .cm, .chroma .cs, .chroma .cp,
.chroma .ch { color: var(--ctp-overlay2); font-style: italic; }
.chroma .cpf { color: var(--ctp-overlay2); font-weight: bold; font-style: italic; }

/* Braces, Delimiters -> Overlay 2 */
.chroma .p, .chroma .dl { color: var(--ctp-overlay2); }

/* Line Numbers -> Overlay 1 */
.chroma .lnt, .chroma .ln {
white-space: pre;
-webkit-user-select: none;
user-select: none;
margin-right: 0.4em;
padding: 0 0.4em;
color: var(--ctp-overlay1);
}

/* Diff and Merge: header Blue, hunk header Peach, inserted/removed lines
tinted at 20%, the middle of the guide's 15-25% band */
.chroma .gh { color: var(--ctp-blue); font-weight: bold; }
.chroma .gu { color: var(--ctp-peach); font-weight: bold; }
.chroma .gi { color: var(--ctp-green); background-color: color-mix(in srgb, var(--ctp-green) 20%, transparent); }
.chroma .gd { color: var(--ctp-red); background-color: color-mix(in srgb, var(--ctp-red) 20%, transparent); }
.chroma .hl { background-color: color-mix(in srgb, var(--ctp-yellow) 15%, transparent); }
Loading
Loading