vitepress

vitepress copied to clipboard

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

• [X] Check if you're on the latest VitePress version.
• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

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.

@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

The code block default background color change to light 1. 2.

https://github.com/vuejs/vitepress/commit/e4f5c51bbe25d42fd52a1cd47e83dda4254fdd7e#diff-58cdd95c81b6e163b7f99c9e55e08796ffc028c2e34f3c79d2df3dc1640cc423

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.

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.

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

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;
}