Bad contrast for Custom Containers on light theme

[sergejcodes]

Describe the bug

Since the the theme update in 1.0.0-alpha.37 the text to background contrast ration of Custom Containers got worse. The text became much more difficult to read.

Here's a side-by-side comparison image:

Reproduction

1. Go to https://vitepress.vuejs.org/guide/markdown#custom-containers
2. Switch to light theme

Expected behavior

--vp-custom-block-*-text variables on light theme should be either set to --vp-c-*-dark or --vp-c-*-darker instead of --vp-c-*.

For Example:

:root {
  --vp-custom-block-warning-text: var(--vp-c-yellow-darker);
}

.custom-block.warning {
    color: var(--vp-custom-block-warning-text);
}

System Info

-

Additional context

No response

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.

[kiaking]

Fear point. It works good on dark mode, but yeah I agree we need more contrast.

The hard part is that we would want to use the same color for both light and dark mode in order to make theme customization easy.

Maybe we might have to come up with a bit different styles for these components 🤔 Like, setting background color to be gray and only colored border. Like Vue site has.

I'll try to address this but open to ideas 👍