fix(galley): high-contrast syntax theme on cream paper

fezcode · fezcode · commit 2e145ae1e980 · 2026-04-23T22:15:24.000+03:00
The galley blog view was reusing the dark brutalist customTheme, so
token colors (orange keywords, pink identifiers) were nearly
invisible on the cream paper background. Introduce a dedicated
galleyTheme with ink (#1A1613) body text plus muted olive strings,
plum keywords, and slate-blue function names — all tested against
the #EDE3D2 code block background.

chore: bump version to 0.24.27
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fezcodex",
-  "version": "0.24.26",
+  "version": "0.24.27",
   "private": true,
   "homepage": "https://fezcode.com",
   "dependencies": {
diff --git a/src/pages/blog-views/GalleyBlogPostPage.jsx b/src/pages/blog-views/GalleyBlogPostPage.jsx
@@ -7,7 +7,7 @@ import {
   ClipboardText,
 } from '@phosphor-icons/react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { customTheme } from '../../utils/customTheme';
+import { galleyTheme } from '../../utils/galleyTheme';
 import CodeModal from '../../components/CodeModal';
 import Seo from '../../components/Seo';
 import { calculateReadingTime } from '../../utils/readingTime';
@@ -197,7 +197,7 @@ const GalleyBlogPostPage = () => {
                 </span>
               </div>
               <SyntaxHighlighter
-                style={customTheme}
+                style={galleyTheme}
                 language={match ? match[1] : 'text'}
                 PreTag="div"
                 CodeTag="code"
diff --git a/src/utils/galleyTheme.js b/src/utils/galleyTheme.js
@@ -0,0 +1,81 @@
+const base = {
+  fontFamily:
+    '"IBM Plex Mono", "JetBrains Mono", Consolas, Monaco, monospace',
+  textAlign: 'left',
+  whiteSpace: 'pre',
+  wordSpacing: 'normal',
+  wordBreak: 'normal',
+  wordWrap: 'normal',
+  lineHeight: '1.55',
+  MozTabSize: '4',
+  OTabSize: '4',
+  tabSize: '4',
+  WebkitHyphens: 'none',
+  MozHyphens: 'none',
+  msHyphens: 'none',
+  hyphens: 'none',
+};
+
+export const galleyTheme = {
+  'code[class*="language-"]': {
+    ...base,
+    color: '#1A1613',
+    background: 'none',
+    fontSize: '0.92em',
+  },
+  'pre[class*="language-"]': {
+    ...base,
+    color: '#1A1613',
+    background: '#EDE3D2',
+    padding: '1em',
+    margin: '0.5em 0',
+    overflow: 'auto',
+    fontSize: '0.92em',
+  },
+  'pre[class*="language-"]::selection': {
+    background: 'rgba(201,100,66,0.25)',
+  },
+  'code[class*="language-"]::selection': {
+    background: 'rgba(201,100,66,0.25)',
+  },
+  ':not(pre) > code[class*="language-"]': {
+    color: '#9E4A2F',
+    background: 'rgba(201,100,66,0.08)',
+    padding: '0.12em 0.35em',
+    borderRadius: '2px',
+  },
+  comment: { color: '#7A6E5E', fontStyle: 'italic' },
+  prolog: { color: '#7A6E5E', fontStyle: 'italic' },
+  doctype: { color: '#7A6E5E', fontStyle: 'italic' },
+  cdata: { color: '#7A6E5E', fontStyle: 'italic' },
+  punctuation: { color: '#3A302A' },
+  namespace: { opacity: '0.7' },
+  property: { color: '#8A4A1B' },
+  tag: { color: '#8A4A1B' },
+  boolean: { color: '#8A4A1B' },
+  number: { color: '#8A4A1B' },
+  constant: { color: '#8A4A1B' },
+  symbol: { color: '#8A4A1B' },
+  deleted: { color: '#8A4A1B' },
+  selector: { color: '#5F6F3E' },
+  'attr-name': { color: '#5F6F3E' },
+  string: { color: '#5F6F3E' },
+  char: { color: '#5F6F3E' },
+  builtin: { color: '#5F6F3E' },
+  inserted: { color: '#5F6F3E' },
+  operator: { color: '#9E4A2F' },
+  entity: { color: '#9E4A2F', cursor: 'help' },
+  url: { color: '#9E4A2F' },
+  '.language-css .token.string': { color: '#9E4A2F' },
+  '.style .token.string': { color: '#9E4A2F' },
+  atrule: { color: '#6B4AA0' },
+  'attr-value': { color: '#5F6F3E' },
+  keyword: { color: '#6B4AA0', fontWeight: '600' },
+  function: { color: '#3E5F8A', fontWeight: '600' },
+  'class-name': { color: '#8A4A1B', fontWeight: '600' },
+  regex: { color: '#6B4AA0' },
+  important: { color: '#9E4A2F', fontWeight: 'bold' },
+  variable: { color: '#1A1613' },
+  bold: { fontWeight: 'bold' },
+  italic: { fontStyle: 'italic' },
+};

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "fezcodex",`
`3`		`- "version": "0.24.26",`
	`3`	`+ "version": "0.24.27",`
`4`	`4`	`"private": true,`
`5`	`5`	`"homepage": "https://fezcode.com",`
`6`	`6`	`"dependencies": {`