From fc7a23b733afdb18d31df51e823657b717851df8 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 30 Jan 2026 09:09:17 +0000 Subject: [PATCH] fix: improve dark theme contrast for syntax highlighting --- src/lib/shiki.ts | 55 ++++++++++++++++++++++++++---------------------- 1 file changed, 30 insertions(+), 25 deletions(-) diff --git a/src/lib/shiki.ts b/src/lib/shiki.ts index 06b3b92..8f7a7e3 100644 --- a/src/lib/shiki.ts +++ b/src/lib/shiki.ts @@ -11,28 +11,28 @@ let highlighterPromise: Promise | null = null; const loadedLanguages = new Set(); /** - * Grimoire dark theme - minimalistic grayscale with semantic colors - * Uses muted grays for syntax with color only for diff semantics + * Grimoire dark theme - minimalistic grayscale with high contrast + * Uses bright grays for readability with color only for diff semantics */ const grimoireDarkTheme: ThemeRegistration = { name: "grimoire-dark", type: "dark", colors: { - "editor.background": "#000000", - "editor.foreground": "#e5e5e5", + "editor.background": "#0d1117", + "editor.foreground": "#e6edf3", }, tokenColors: [ - // Comments - muted + // Comments - readable gray { scope: ["comment", "punctuation.definition.comment"], - settings: { foreground: "#6b7280" }, + settings: { foreground: "#8b949e" }, }, - // Strings - muted but slightly emphasized + // Strings - distinct but not colorful { scope: ["string", "string.quoted"], - settings: { foreground: "#9ca3af" }, + settings: { foreground: "#a5d6ff" }, }, - // Keywords, operators - emphasized gray + // Keywords, operators - bright { scope: [ "keyword", @@ -42,12 +42,12 @@ const grimoireDarkTheme: ThemeRegistration = { "keyword.operator", "keyword.control", ], - settings: { foreground: "#d4d4d4" }, + settings: { foreground: "#f0f0f0" }, }, // Functions, methods - foreground bold { scope: ["entity.name.function", "support.function", "meta.function-call"], - settings: { foreground: "#e5e5e5", fontStyle: "bold" }, + settings: { foreground: "#e6edf3", fontStyle: "bold" }, }, // Classes, types - foreground bold { @@ -57,9 +57,9 @@ const grimoireDarkTheme: ThemeRegistration = { "support.class", "support.type", ], - settings: { foreground: "#e5e5e5", fontStyle: "bold" }, + settings: { foreground: "#f0f0f0", fontStyle: "bold" }, }, - // Numbers, constants - emphasized gray + // Numbers, constants - bright { scope: [ "constant", @@ -67,17 +67,17 @@ const grimoireDarkTheme: ThemeRegistration = { "constant.language", "constant.character", ], - settings: { foreground: "#d4d4d4" }, + settings: { foreground: "#79c0ff" }, }, // Variables, parameters - foreground { scope: ["variable", "variable.parameter", "variable.other"], - settings: { foreground: "#e5e5e5" }, + settings: { foreground: "#e6edf3" }, }, - // Punctuation - slightly muted + // Punctuation - visible { scope: ["punctuation", "meta.brace"], - settings: { foreground: "#b3b3b3" }, + settings: { foreground: "#c9d1d9" }, }, // Properties, attributes { @@ -86,17 +86,17 @@ const grimoireDarkTheme: ThemeRegistration = { "entity.other.attribute-name", "support.type.property-name", ], - settings: { foreground: "#d4d4d4" }, + settings: { foreground: "#e6edf3" }, }, // Tags (HTML/JSX) { scope: ["entity.name.tag", "support.class.component"], - settings: { foreground: "#d4d4d4" }, + settings: { foreground: "#7ee787" }, }, // JSON keys { scope: ["support.type.property-name.json"], - settings: { foreground: "#d4d4d4" }, + settings: { foreground: "#a5d6ff" }, }, // Diff - deleted (red) { @@ -105,7 +105,7 @@ const grimoireDarkTheme: ThemeRegistration = { "punctuation.definition.deleted", "meta.diff.header.from-file", ], - settings: { foreground: "#ff8787" }, + settings: { foreground: "#ffa198" }, }, // Diff - inserted (green) { @@ -114,17 +114,17 @@ const grimoireDarkTheme: ThemeRegistration = { "punctuation.definition.inserted", "meta.diff.header.to-file", ], - settings: { foreground: "#69db7c" }, + settings: { foreground: "#7ee787" }, }, // Diff - changed/range { scope: ["markup.changed", "meta.diff.range", "meta.diff.header"], - settings: { foreground: "#66d9ef" }, + settings: { foreground: "#a5d6ff" }, }, // Markdown headings { scope: ["markup.heading", "entity.name.section"], - settings: { foreground: "#e5e5e5", fontStyle: "bold" }, + settings: { foreground: "#f0f0f0", fontStyle: "bold" }, }, // Markdown bold/italic { @@ -138,7 +138,12 @@ const grimoireDarkTheme: ThemeRegistration = { // Markdown links { scope: ["markup.underline.link"], - settings: { foreground: "#93c5fd" }, + settings: { foreground: "#a5d6ff" }, + }, + // Markdown code + { + scope: ["markup.inline.raw", "markup.raw"], + settings: { foreground: "#a5d6ff" }, }, ], };