Skip to content

fix(codeblock): actually switch shiki theme to vitesse#18263

Merged
wackerow merged 1 commit into
devfrom
fix/codeblock-vitesse-theme
May 28, 2026
Merged

fix(codeblock): actually switch shiki theme to vitesse#18263
wackerow merged 1 commit into
devfrom
fix/codeblock-vitesse-theme

Conversation

@pettinarip
Copy link
Copy Markdown
Member

@pettinarip pettinarip commented May 22, 2026

Summary

Follow-up to #18195. That PR was titled "switch theme to vitesse" and its description listed `vitesse-light` / `vitesse-dark` as the new themes, but the actual theme constants in `src/lib/shiki.ts` were never updated — only `CodeblockClient.tsx`, `index.tsx` and `codeblock.css` were touched. As a result, the deployed code blocks (verified on staging for the v11.7.0 deploy) still render with `one-light` / `one-dark-pro`.

 const THEMES = {
-  light: \"one-light\",
-  dark: \"one-dark-pro\",
+  light: \"vitesse-light\",
+  dark: \"vitesse-dark\",
 } as const satisfies Record<string, BundledTheme>

Both `vitesse-light` and `vitesse-dark` are valid `BundledTheme` values in shiki — no new dependency needed. The codeblock CSS already drives token colors through shiki's emitted `--shiki-light` / `--shiki-dark` CSS variables, so this single source change is enough.

How it was caught

Surfaced during the `/review-release` browser check on the v11.7.0 deploy PR (#18258). Snapshot of a `.shiki` element on staging showed:

<pre class=\"shiki shiki-themes one-light one-dark-pro\" ...>

Test plan

  • Visit a docs page with code blocks on the deploy preview (e.g. `/developers/docs/smart-contracts/anatomy/`) and confirm the rendered `
    ` is `shiki-themes vitesse-light vitesse-dark`
  • Verify both light and dark theme variants look visually correct
  • Confirm no regression on the homepage Codeblock (`fromHomepage` variant)

PR #18195 updated component styles and CSS but missed the THEMES
constant in src/lib/shiki.ts, so highlighted output still rendered with
one-light / one-dark-pro instead of the vitesse pair promised in the
PR description.
@pettinarip pettinarip requested a review from wackerow as a code owner May 22, 2026 16:09
@netlify
Copy link
Copy Markdown

netlify Bot commented May 22, 2026

Deploy Preview for ethereumorg ready!

Name Link
🔨 Latest commit b7b2f4a
🔍 Latest deploy log https://app.netlify.com/projects/ethereumorg/deploys/6a107fc0eee7b80008274153
😎 Deploy Preview https://deploy-preview-18263.ethereum.it
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
7 paths audited
Performance: 68
Accessibility: 96
Best Practices: 100
SEO: 98
PWA: 59
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions github-actions Bot added the tooling 🔧 Changes related to tooling of the project label May 22, 2026
@wackerow wackerow merged commit 79c5790 into dev May 28, 2026
16 checks passed
@wackerow wackerow deleted the fix/codeblock-vitesse-theme branch May 28, 2026 13:23
@pettinarip pettinarip mentioned this pull request May 28, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

tooling 🔧 Changes related to tooling of the project

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants