From 2017da6a0bb83b6d99fc8e0c3f5a2764f43cf795 Mon Sep 17 00:00:00 2001 From: Unclebigbay Date: Wed, 7 Jan 2026 17:52:54 +0100 Subject: [PATCH 1/4] fix(code-block): fix invisible text in Shiki one-light theme --- packages/elements/src/code-block.tsx | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/packages/elements/src/code-block.tsx b/packages/elements/src/code-block.tsx index 4fe71bf0..0bcfd85d 100644 --- a/packages/elements/src/code-block.tsx +++ b/packages/elements/src/code-block.tsx @@ -57,12 +57,29 @@ export async function highlightCode( const transformers: ShikiTransformer[] = showLineNumbers ? [lineNumberTransformer] : []; + + const fixWhiteColorInLightThemeTransformer: ShikiTransformer = { + name: "fix-white-color-in-light-theme", + span(node) { + const style = node.properties.style; + if (style && typeof style === "string") { + // Replace white colors with a visible dark color + const fixedStyle = style.replace( + /color:\s*(white)\b/gi, + "color:#383A42" + ); + if (fixedStyle !== style) { + node.properties.style = fixedStyle; + } + } + }, + }; return await Promise.all([ codeToHtml(code, { lang: language, theme: "one-light", - transformers, + transformers: [...transformers, fixWhiteColorInLightThemeTransformer], }), codeToHtml(code, { lang: language, From 3b60d625c23de49345bb7e37b1e33b0a4d574e75 Mon Sep 17 00:00:00 2001 From: Unclebigbay Date: Wed, 7 Jan 2026 17:54:50 +0100 Subject: [PATCH 2/4] Chore: fix formatting --- packages/elements/src/code-block.tsx | 34 ++++++++++++++-------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/packages/elements/src/code-block.tsx b/packages/elements/src/code-block.tsx index 0bcfd85d..fe02a2da 100644 --- a/packages/elements/src/code-block.tsx +++ b/packages/elements/src/code-block.tsx @@ -49,6 +49,23 @@ const lineNumberTransformer: ShikiTransformer = { }, }; +const fixWhiteColorInLightThemeTransformer: ShikiTransformer = { + name: "fix-white-color-in-light-theme", + span(node) { + const style = node.properties.style; + if (style && typeof style === "string") { + // Replace white colors with a visible dark color + const fixedStyle = style.replace( + /color:\s*(white)\b/gi, + "color:#383A42" + ); + if (fixedStyle !== style) { + node.properties.style = fixedStyle; + } + } + }, +}; + export async function highlightCode( code: string, language: BundledLanguage, @@ -58,23 +75,6 @@ export async function highlightCode( ? [lineNumberTransformer] : []; - const fixWhiteColorInLightThemeTransformer: ShikiTransformer = { - name: "fix-white-color-in-light-theme", - span(node) { - const style = node.properties.style; - if (style && typeof style === "string") { - // Replace white colors with a visible dark color - const fixedStyle = style.replace( - /color:\s*(white)\b/gi, - "color:#383A42" - ); - if (fixedStyle !== style) { - node.properties.style = fixedStyle; - } - } - }, - }; - return await Promise.all([ codeToHtml(code, { lang: language, From e0b9837a287652442667f22da529a164a6d49cb6 Mon Sep 17 00:00:00 2001 From: Unclebigbay Date: Wed, 7 Jan 2026 17:55:16 +0100 Subject: [PATCH 3/4] Chore: fix formatting --- packages/elements/src/code-block.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/elements/src/code-block.tsx b/packages/elements/src/code-block.tsx index fe02a2da..cc653d86 100644 --- a/packages/elements/src/code-block.tsx +++ b/packages/elements/src/code-block.tsx @@ -74,7 +74,6 @@ export async function highlightCode( const transformers: ShikiTransformer[] = showLineNumbers ? [lineNumberTransformer] : []; - return await Promise.all([ codeToHtml(code, { lang: language, From 9296cc57e05822a4843e8c5bbf79eaf8487cc57f Mon Sep 17 00:00:00 2001 From: Unclebigbay Date: Tue, 13 Jan 2026 08:46:55 +0100 Subject: [PATCH 4/4] Chore: add patch changeset --- .changeset/proud-bushes-tie.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/proud-bushes-tie.md diff --git a/.changeset/proud-bushes-tie.md b/.changeset/proud-bushes-tie.md new file mode 100644 index 00000000..2440800c --- /dev/null +++ b/.changeset/proud-bushes-tie.md @@ -0,0 +1,5 @@ +--- +"ai-elements": patch +--- + +Fixed invisible white text in Shiki's one-light theme by adding a transformer that replaces `color:white` with a visible dark color