\r\n\r\n\u003Cimg width=\"700\" alt=\"\" src=\"https://github.com/user-attachments/assets/a0d88f61-9edd-4d28-b60e-a6b8f5d25321\" />\r\n\r\nLooking back to color system PR [#2797](https://github.com/vuejs/vitepress/pull/2797) it seems as though `--vp-c-text-3` was not intended to be used with `--vp-c-bg-alt`\r\n\r\n> XXX-3: The color for solid background, such as bg color of the button. It must satisfy the contrast ratio with pure white (#ffffff) text on top of it\r\n\r\nI have a possible fix available and will submit a PR\r\n\r\n### System Info\r\n\r\n```Text\r\nSystem:\r\n OS: macOS 14.5\r\n CPU: (10) arm64 Apple M1 Max\r\n Memory: 5.63 GB / 32.00 GB\r\n Shell: 5.9 - /bin/zsh\r\n Browsers:\r\n Chrome: 131.0.6778.265\r\n Edge: 131.0.2903.112\r\n Safari: 17.5\r\n```\r\n\r\n### Validations\r\n\r\n- [X] Check if you're on the [latest VitePress version](https://github.com/vuejs/vitepress/releases/latest).\r\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\r\n- [X] Read the [docs](https://vitepress.dev).\r\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[],4486,"Code block contrast ratio","2025-02-23T04:43:36Z","https://github.com/vuejs/vitepress/issues/4486",0.7156448,{"description":2912,"labels":2913,"number":2918,"owner":2863,"repository":2864,"state":2875,"title":2919,"updated_at":2920,"url":2921,"score":2922},"### Describe the bug\r\n\r\nIn the light theme, a span of formatted code has the same background color as the striped rows of the table.\r\n\r\n| Element | Var | Value in light theme |\r\n| --- | --- | --- |\r\n| .vp-doc tr:nth-child(2n) | `--vp-c-bg-soft` | #f6f6f7 |\r\n| :not(pre) > code | `--vp-c-mute` | #f6f6f7 |\r\n\r\n### Reproduction\r\n\r\nRender this table with the default theme in light in VitePress:\r\n\r\n```md\r\n| Element | Var | Value in light theme |\r\n| --- | --- | --- |\r\n| .vp-doc tr:nth-child(2n) | `--vp-c-bg-soft` | #f6f6f7 |\r\n| :not(pre) > code | `--vp-c-mute` | #f6f6f7 |\r\n```\r\n\r\n### Expected behavior\r\n\r\nThere is a contrast between the background of the code span and all table rows, like here on GitHub.\r\n\r\n### System Info\r\n\r\n```sh\r\nSystem:\r\n OS: Windows 10 10.0.19044\r\n CPU: (16) x64 Intel(R) Xeon(R) W-11955M CPU @ 2.60GHz\r\n Memory: 13.44 GB / 31.73 GB\r\n Binaries:\r\n Node: 18.12.0 - C:\\Program Files\\nodejs\\node.EXE\r\n npm: 9.8.0 - C:\\Program Files\\nodejs\\npm.CMD\r\n Browsers:\r\n Edge: Spartan (44.19041.1266.0), Chromium (114.0.1823.79)\r\n npmPackages:\r\n vitepress: ^1.0.0-beta.5 => 1.0.0-beta.5\r\n```\r\n\r\n\r\n### Additional context\r\n\r\nSuggestion: tone down the mute colors in the light theme a bit. This makes code spans also more visible on the default white background.\r\n\r\n```scss\r\n:root {\r\n --vp-c-mute: #eeeef0; // luv = 94\r\n --vp-c-mute-light: #f3f3f9; // luv = 96\r\n --vp-c-mute-lighter: #f9f9fa; // luv = 98\r\n}\r\n```\r\n\r\n[HSLuv system](https://www.hsluv.org/) used.\r\n\r\n### Validations\r\n\r\n- [X] Check if you're on the [latest VitePress version](https://github.com/vuejs/vitepress/releases/latest).\r\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\r\n- [X] Read the [docs](https://vitepress.dev).\r\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[2914,2915],{"name":2857,"color":2858},{"name":2916,"color":2917},"a11y","fbca04",2610,"No contrast of code on table row in light theme","2023-08-16T00:04:20Z","https://github.com/vuejs/vitepress/issues/2610",0.72754186,{"description":2924,"labels":2925,"number":2927,"owner":2863,"repository":2864,"state":2875,"title":2928,"updated_at":2929,"url":2930,"score":2931},"### Describe the bug\n\nI'm not sure if this is a bug, but when a table is in a custom container, the color of the header doesn't follow the color of the container, and it is always black.\r\n\r\nIt looks very incongruous and strange.\r\n\r\n\n\n### Reproduction\n\nFor example:\r\n\r\n```markdown\r\n::: danger\r\nThis is a dangerous warning.\r\n\r\n| colhead1 | colhead2 |\r\n| -- | -- |\r\n| test | test |\r\n:::\r\n```\n\n### Expected behavior\n\nThe header row color of the table to be the same as the body of the table, and the color to follow the custom container\n\n### System Info\n\n```shell\n1.0.0 alpha 51,52\n```\n\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.dev).\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[2926],{"name":2857,"color":2858},2077,"Color of Table head row in Custom Containers is always black","2023-04-06T00:04:11Z","https://github.com/vuejs/vitepress/issues/2077",0.73967093,{"description":2933,"labels":2934,"number":2936,"owner":2863,"repository":2864,"state":2875,"title":2937,"updated_at":2938,"url":2939,"score":2940},"### Is your feature request related to a problem? Please describe.\r\n\r\nWhen I write documentation, I sometimes want to have some sort of introductory paragraph to set some context for the readers. These kinds of introductory paragraphs are often visually emphasized to catch attention and get even more impactful. Usually, the emphasis relies on styling (e.g. bigger font size, bolder font weights, etc).\r\n\r\nI really think it would be convenient for many users to be able to specify introductions in a straight-forward and _markdownish_ way, so that such content gets emphasized through styling while preserving other markdown rules and features .\r\n\r\n### Describe the solution you'd like\r\n\r\nTo address this need, we basically want to take a whole identified block and apply some styles to make it stand out. It turns out this kind of feature already exists in Vitepress: [custom containers](https://vitepress.dev/guide/markdown#custom-containers). These perfectly match our needs because:\r\n- they can be clearly identified because the syntax really pops out\r\n- their content still benefit from markdown syntax\r\n- they contextually provide their content a special, highlighted role\r\n\r\nMy belief is that it makes sense to also provide a `intro` custom container because those share a common philosophy. However, there is a slight difference : unlike other custom containers, I feel like it does not make any sense for `intro`s to include default and custom titles because well… they're introductions).\r\n\r\n### Describe alternatives you've considered\r\n\r\nI used to work this around by explicitly wrapping my introductory paragraph with a `\u003Cp class=\"intro\">\u003C/p>` block, and defining some CSS on the `.intro` selector, since it is supported. This works just fine, but being in a explicit HTML block prevents me from benefiting from other markdown features. For example, this would not work as expected:\r\n\r\n```md\r\n\u003Cp class=\"intro\">\r\n [click me](https://github.com)\r\n\u003C/p>\r\n```` \r\n\r\n### Additional context\r\n\r\nI've came up with the following draft PR: #2474. It's marked as draft because [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md) state that we \"should open a suggestion issue first \", but could not resist to give it a try.\r\n\r\n### Validations\r\n\r\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\r\n- [X] Read the [docs](https://vitepress.dev).\r\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).\r\n- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.",[2935],{"name":2857,"color":2858},2473,"Introduction custom container","2023-07-29T00:04:10Z","https://github.com/vuejs/vitepress/issues/2473",0.7414469,{"description":2942,"labels":2943,"number":2947,"owner":2863,"repository":2864,"state":2875,"title":2948,"updated_at":2949,"url":2950,"score":2951},"### Is your feature request related to a problem? Please describe.\n\nMy logo is a wordmark, so it includes text (in a dark color).\r\n\r\nFor dark mode this should be a lighter color (eg. white).\r\n\r\nCurrently the logo is added as svg, but Vitepress uses the image tag, so I can't even overwrite the colors via CSS.\n\n### Describe the solution you'd like\n\neither include the logo as inline SVG or allow us to set a dark mode separate logo.\n\n### Describe alternatives you've considered\n\n_No response_\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.vuejs.org).\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).\n- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.",[2944],{"name":2945,"color":2946},"docs","0075ca",1006,"docs: separate logo for dark mode","2023-01-21T14:28:47Z","https://github.com/vuejs/vitepress/issues/1006",0.74352735,["Reactive",2953],{},["Set"],["ShallowReactive",2956],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fVvb2zYH8HCUBsMiUAOT9Wf7NgXuzIwYEQPFB2jfD5CM":-1},"/vuejs/vitepress/2119"]