Shiki background colors aren't used in code blocks

[pearofducks]

Describe the bug

The background color for code-fences is currently set as a CSSvar but then isn't overridden when alternative Shiki themes are used.

Reproduction

• Set solarized-light as a Shiki theme
  • markdown: { theme: 'solarized-light' } in .vitepress/config
• See that the background color for code-fence-blocks doesn't change

Expected behavior

Background color changes with new themes and works with light/dark-modes.

System Info

System:
    OS: macOS 12.3.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 20.57 GB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.15.0 - /usr/local/bin/node
    Yarn: 1.22.18 - /usr/local/bin/yarn
    npm: 8.5.5 - /usr/local/bin/npm
  Browsers:
    Chrome: 102.0.5005.61
    Firefox: 91.0.2
    Safari: 15.4

Additional context

Example of solarized-light set for the theme

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[brc-dd]

For now, please consider overriding that variable using custom CSS. We are using different colors for light and dark mode, but material palenight doesn't have different themes for light/dark mode. That's why we can't directly use themes' bg colors.

[kiaking]

We must decide what to do with light/dark bg for code block before 1.0.0. Let's come back once we have conclusion, and we should close this issue too.

[EtzBetz]

Shouldn't this just use the theme's color when that is defined, otherwise a default one from the css var?

[CaptainOfPhB]

As mentioned in the documentation(customizing-css section), we can override the css var to work around this temporarily.

/* .vitepress/theme/custom.css */
html:not(.dark) {
  --vp-c-text-dark-3: #ccc;
  --vp-code-block-bg: rgba(238, 238, 238, 0.5);
  --vp-code-line-highlight-color: rgba(238, 238, 238, 1);
}

// .vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme';
import './custom.css';

export default DefaultTheme;

// .vitepress/config.ts
import { defineConfig } from 'vitepress'

export default defineConfig({
  markdown: {
    theme: {
      dark: 'github-dark',
      light: 'github-light',
    }
  }
})

Then restart your server, you can see the result.

For example in the light theme:

And in the dark theme:

[Goozoon]

As mentioned in the documentation(customizing-css section), we can override the css var to work around this temporarily.

I have also lineNumbers: true, and those numbers are very pale + intense vertical divider

[kiaking]

Wait, does Shiki provide background color? I remember Shiki didn't had BG color so we had to add it as css var 🤔

[pearofducks]

Shiki's getHighlighter provides a getBackgroundColor method.

[kiaking]

In that case, maybe we should be using it 🤔 What color is it? Anyone has link to example?

[Goozoon]

getBackgroundColor

you mean this?

  function getBackgroundColor(theme?: IThemeRegistration) {
    const { _theme } = getTheme(theme)
    return _theme.bg
  }

---

New getBackgroundColor() and getForegroundColor() API.

Found here and here

[kiaking]

During overall design refactor in #1790, I've decided to use the background color from the theme instead of Shiki. Because it looked much nicer when we have same bg color for both sidebar and code background (two tone baby).

I'm planning to add more comprehensive docs for style customization.

But meanwhile, it would be cool if we have an easy way to get the Shiki bg color so that we can show it in the docs and user can use that instead.

Is there any website to lookup? where user can copy the bg color 🤔 ?

[kiaking]

Closing for now. If anyone finds out about the above, please let us know!