fix: improve light theme code block variable contrast

helpers/mdc-parser.mjs

@@ -201,10 +201,10 @@ const bundledLangs = {
 
 }
 const bundledThemes = {
-  'material-theme-lighter': () => import('shiki/themes/material-theme-lighter.mjs').then(r => r.default),
+  'material-theme-lighter-contrast': () => import('../themes/material-theme-lighter-contrast.mjs').then(r => r.default),
   'material-theme-palenight': () => import('shiki/themes/material-theme-palenight.mjs').then(r => r.default)
 }
-const options = { theme: { light: 'material-theme-lighter', default: 'material-theme-lighter', dark: 'material-theme-palenight' } }
+const options = { theme: { light: 'material-theme-lighter-contrast', default: 'material-theme-lighter-contrast', dark: 'material-theme-palenight' } }
 let configs
 export function getMdcConfigs() {
   if (!configs) {
@@ -230,7 +230,7 @@ export async function parseMdc(content) {
       highlighter,
       langs: ['js', 'vue'],
       theme: {
-        default: 'material-theme-lighter',
+        default: 'material-theme-lighter-contrast',
         dark: 'material-theme-palenight'
       }
     }

nuxt.config.ts

@@ -1,5 +1,6 @@
 import { createResolver } from 'nuxt/kit'
 import { parseMdc } from './helpers/mdc-parser.mjs'
+import materialThemeLighterContrast from './themes/material-theme-lighter-contrast.mjs'
 
 const { resolve } = createResolver(import.meta.url)
 
@@ -97,7 +98,8 @@ export default defineNuxtConfig({
       markdown: {
         highlight: {
           theme: {
-            default: 'material-theme-lighter',
+            // Patched Material Lighter: stock theme paints variables and comments the same gray (#2217).
+            default: materialThemeLighterContrast,
             dark: 'material-theme-palenight'
           },
           langs: ['js', 'jsx', 'json', 'ts', 'tsx', 'vue', 'css', 'html', 'bash', 'md', 'mdc', 'yaml', 'sql', 'diff', 'ini']

themes/material-theme-lighter-contrast.mjs

@@ -0,0 +1,37 @@
+import materialThemeLighter from 'shiki/themes/material-theme-lighter.mjs'
+
+const MUTED = '#90A4AE'
+/** Blue Grey 700 — ~6.9:1 on Material Lighter `#FAFAFA` (AA). */
+const EMPHASIS = '#455A64'
+
+function isCommentScope(scope) {
+  const value = Array.isArray(scope) ? scope.join(',') : String(scope || '')
+  return /\bcomment\b|docstring/i.test(value)
+}
+
+function patchTokenColors(tokenColors = []) {
+  return tokenColors.map((token) => {
+    if (token.settings?.foreground !== MUTED || isCommentScope(token.scope)) {
+      return token
+    }
+
+    return {
+      ...token,
+      settings: {
+        ...token.settings,
+        foreground: EMPHASIS
+      }
+    }
+  })
+}
+
+/** Material Theme Lighter with stronger variable/default text contrast. */
+export default {
+  ...materialThemeLighter,
+  name: 'material-theme-lighter-contrast',
+  colors: {
+    ...materialThemeLighter.colors,
+    'editor.foreground': EMPHASIS
+  },
+  tokenColors: patchTokenColors(materialThemeLighter.tokenColors)
+}