code not is black

[473845166]

Describe the bug

代码区背景不是和官网一样的颜色

Reproduction

The background of the code area is not the same color as the official website

Expected behavior

The background of the code area is not the same color as the official website

System Info

The background of the code area is not the same color as the official website

Additional context

Validations

• Check if you're on the latest VitePress version.
• 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]

Which official website are you referring to? vitepress.dev has the same:

Although, I think you've customized the markdown.theme, that's why the contrast is less.

[justforuse]

@brc-dd that is the issue. the rc release have different behavior to beta release. and I could not find the solution.
I use 'material-theme-palenight' as my codeblock theme. and it have dark background when using beta.7 version. but it become white when using rc.24.

I think the critical code this here

[justforuse]

The code block default background color change to light
1.

2.

e4f5c51#diff-58cdd95c81b6e163b7f99c9e55e08796ffc028c2e34f3c79d2df3dc1640cc423

[brc-dd]

If you don't want adaptive theme, do this:

// .vitepress/config.ts
export default {
  markdown: {
    theme: 'github-dark' // or material-theme-palenight or whatever you want
  }
}

/* https://vitepress.dev/guide/extending-default-theme#customizing-css */
:root {
  --vp-code-block-color: rgba(255, 255, 245, 0.86);
  --vp-code-block-bg: #161618;
  --vp-code-block-divider-color: #000000;

  --vp-code-lang-color: rgba(235, 235, 245, 0.38);

  --vp-code-line-highlight-color: #000000;
  --vp-code-line-number-color: rgba(235, 235, 245, 0.38);

  --vp-code-copy-code-border-color: rgba(82, 82, 89, 0.32);
  --vp-code-copy-code-bg: #252529;
  --vp-code-copy-code-hover-border-color: rgba(82, 82, 89, 0.32);
  --vp-code-copy-code-hover-bg: #323238;
  --vp-code-copy-code-active-text: rgba(255, 255, 245, 0.86);

  --vp-code-tab-text-color: rgba(235, 235, 245, 0.6);
  --vp-code-tab-hover-text-color: rgba(255, 255, 245, 0.86);
  --vp-code-tab-active-text-color: rgba(255, 255, 245, 0.86);
}

I had posted this for someone on Discord earlier that time. But IG we can restore these when a single markdown.theme is specified.

[egardner]

But IG we can restore these when a single markdown.theme is specified.

I would support this – I think that it's not uncommon for a (non-adaptive) site with a light background to embed code snippets which have a dark background, for visual separation. That's what we are doing in the Vitepress site that I help maintain. I experienced the same issue that the original poster here did when I tried to upgrade our version of Vitepress to RC 25 this week.

In the meantime, thanks for posting this work-around.

[sharpchen]

If I'd like to custom adaptive background for code block, what should I do?

[sharpchen]

If I'd like to custom adaptive background for code block, what should I do?

Found an solution, never mind

/* custom.css */

.dark {
  --vp-code-block-bg: #282c34;
}