codeBackground style override as CSS variable causes very low contrast for marked text in light themes

[Cassidy Smith]

If I specify the codeBackground style override as a CSS custom property, e.g. codeBackground: 'var(--white)' then the marked text appears too light with very low contrast. But it looks great if I use a hex value: codeBackground: '#ffffff'.

I tried a 3-4 different light themes to see if it was an issue with the default light theme and it was the same in all of them. I don't see the same issue with dark themes.

See this stackblitz minimal reproduction for more details: https://stackblitz.com/edit/github-xw7wmw?file=astro.config.mjs

Thank you for all your work on Expressive Code! I love how easy this has been to set up and customize in general

Expressive Code config:

import { defineConfig } from 'astro/config';

import expressiveCode from 'astro-expressive-code';

// https://astro.build/config
export default defineConfig({
  integrations: [
    expressiveCode({
      themeCssSelector: (theme) => `[data-theme='${theme.type}']`,
      styleOverrides: {
        // This works
        // codeBackground: '#ffffff',

        // This causes low contrast in marked text
        codeBackground: 'var(--white)',
      },
    }),
  ],
});
#

Screenshot of issue:

[Cassidy Smith]

Ah, a workaround is setting minSyntaxHighlightingColorContrast: 0, which is kindof ironic haha

[Hippo]

Hey Cassidy, welcome and thank you for this bug report!

Haha, oh well, that is indeed ironic. :) I can already imagine what part of my code is causing this. I'll have to find a better way to either come up with a placeholder color value if developers use CSS variables for some part of the nested HTML structure leading to a certain color contrast calculation, or sadly exclude those cases from the automatic correction.

As all the rendering is happening on the server to ensure that none to minimal JS is needed on the client, I cannot know what value the CSS variable will have in the end.

[Hippo]

I just released version 0.32.4 to NPM which should solve this issue. Please let me know if it works for you after installing the latest version! :)

[Cassidy Smith]

Amazing! I will try it out today hopefully

[Cassidy Smith]

That did indeed fix the issue, thank you!