\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,"vuejs","vitepress","closed","Code block contrast ratio","2025-02-23T04:43:36Z","https://github.com/vuejs/vitepress/issues/4486",0.6711006,{"description":2876,"labels":2877,"number":2878,"owner":2868,"repository":2869,"state":2870,"title":2879,"updated_at":2880,"url":2881,"score":2882},"### Describe the bug\n\nThe line highlighting features are broke now in the official vitepress documentation: \u003Chttps://vitepress.vuejs.org/guide/markdown.html#line-highlighting-in-code-blocks>\n\n### Reproduction\n\nOpen \u003Chttps://vitepress.vuejs.org/guide/markdown.html#line-highlighting-in-code-blocks> and discover the lines are not highlighted:\r\n\r\n\r\n\r\nCan also be reproduced locally with:\r\n\r\n```shell\r\n$ mkdir vtprs && cd vtprs\r\n$ yarn init\r\n$ yarn add --dev vitepress\r\n```\r\n\r\nWrite some code blocks with lines highlighted in `docs/index.md`, like\r\n\u003Cpre>\r\n```toml{2}\r\n[highlight]\r\nnot_highlighted = true\r\npublic = false\r\n```\r\n\u003C/pre>\r\n\r\nrun `yarn vitepress dev docs` and discover that second line is not highlighted as expected.\n\n### Expected behavior\n\nCode lines are highlighted with minimal setup.\n\n### System Info\n\n```shell\nSystem:\r\n OS: Linux 5.14 Arch Linux\r\n CPU: (16) x64 Intel(R) Core(TM) i7-10700 CPU @ 2.90GHz\r\n Memory: 5.12 GB / 15.49 GB\r\n Container: Yes\r\n Shell: 5.8 - /usr/bin/zsh\r\n Binaries:\r\n Node: 14.17.4 - /sbin/node\r\n Yarn: 1.22.15 - /sbin/yarn\r\n npm: 7.24.2 - /sbin/npm\r\n Browsers:\r\n Chromium: 94.0.4606.71\r\n Firefox: 93.0\r\n npmPackages:\r\n vitepress: ^0.19.2 => 0.19.2\n```\n\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://vuejs.org/coc)\n- [X] Read the [docs](https://vitepress.vuejs.org/).\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[],408,"Line Highlighting in Code Blocks breaks in v0.19.2","2023-01-21T16:20:27Z","https://github.com/vuejs/vitepress/issues/408",0.6916371,{"description":2884,"labels":2885,"number":2889,"owner":2868,"repository":2869,"state":2870,"title":2890,"updated_at":2891,"url":2892,"score":2893},"### Describe the bug\n\nSince the the theme update in [1.0.0-alpha.37](https://github.com/vuejs/vitepress/blob/main/CHANGELOG.md#100-alpha37-2023-01-17) the text to background contrast ration of [Custom Containers](https://vitepress.vuejs.org/guide/markdown#custom-containers) got worse. The text became much more difficult to read.\r\n\r\nHere's a side-by-side comparison image:\r\n\r\n\r\n\n\n### Reproduction\n\n1. Go to https://vitepress.vuejs.org/guide/markdown#custom-containers\r\n2. Switch to light theme\r\n\n\n### Expected behavior\n\n`--vp-custom-block-*-text` variables on light theme should be either set to `--vp-c-*-dark` or `--vp-c-*-darker` instead of `--vp-c-*`.\r\n\r\nFor Example: \r\n\r\n```css\r\n:root {\r\n --vp-custom-block-warning-text: var(--vp-c-yellow-darker);\r\n}\r\n\r\n.custom-block.warning {\r\n color: var(--vp-custom-block-warning-text);\r\n}\r\n```\n\n### System Info\n\n```shell\n-\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.vuejs.org).\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[2886],{"name":2887,"color":2888},"theme","0754FB",1824,"Bad contrast for Custom Containers on light theme","2023-03-07T00:04:57Z","https://github.com/vuejs/vitepress/issues/1824",0.69524354,{"description":2895,"labels":2896,"number":2900,"owner":2868,"repository":2869,"state":2870,"title":2901,"updated_at":2902,"url":2903,"score":2904},"### Describe the bug\n\nWhy does the markdown.theme.xxx theme setting not take effect. I configured the theme for the markdown as follows.\r\n```js\r\nexport default defineConfig({\r\n markdown: {\r\n theme: {\r\n light: 'dark-plus',\r\n dark: 'dark-plus',\r\n }\r\n },\r\n})\r\n````\r\nbut only correctly displayed the theme in dark mode, \r\n\r\n\r\nwhile the background of the code block turned white in light mode. \r\n\r\n\r\n\r\n\r\nWhat I hope is that the background of the code blocks in dark and light modes is black.\n\n### Reproduction\n\nhttps://stackblitz.com/edit/vite-axs5w5?file=docs%2F.vitepress%2Fconfig.ts,docs%2Findex.md,docs%2Fexample.md\n\n### Expected behavior\n\nIf I explicitly set `markdown.theme` as only one theme, the color of the code block should be displayed consistently in dark and light modes\n\n### System Info\n\n```Text\nSystem:\r\n OS: Windows 11 10.0.22621\r\n CPU: (32) x64 AMD Ryzen 9 7945HX with Radeon Graphics\r\n Memory: 19.24 GB / 31.69 GB\r\n Binaries:\r\n Node: 18.18.0 - D:\\myDownload\\nodejs\\node.EXE\r\n npm: 9.8.1 - D:\\myDownload\\nodejs\\npm.CMD\r\n pnpm: 8.7.6 - D:\\myDownload\\nodejs\\pnpm.CMD\r\n Browsers:\r\n Edge: Chromium (119.0.2151.72)\r\n Internet Explorer: 11.0.22621.1\r\n npmPackages:\r\n vitepress: 1.0.0-rc.31 => 1.0.0-rc.31\n```\n\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Check if you're on the [latest VitePress version](https://github.com/vuejs/vitepress/releases/latest).\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.",[2897],{"name":2898,"color":2899},"bug: pending triage","e99695",3261,"The markdown.theme.xxx theme is not displayed correctly in light mode","2023-12-04T00:04:54Z","https://github.com/vuejs/vitepress/issues/3261",0.69982547,{"description":2906,"labels":2907,"number":2909,"owner":2868,"repository":2869,"state":2870,"title":2910,"updated_at":2911,"url":2912,"score":2913},"### Describe the bug\r\n\r\nThe background color for code-fences is currently [set as a CSSvar](https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css#L204=) but then isn't overridden when alternative Shiki themes are used.\r\n\r\n\r\n### Reproduction\r\n\r\n- Set `solarized-light` as a Shiki theme\r\n - `markdown: { theme: 'solarized-light' }` in `.vitepress/config`\r\n- See that the background color for code-fence-blocks doesn't change\r\n\r\n### Expected behavior\r\n\r\nBackground color changes with new themes and works with light/dark-modes.\r\n\r\n### System Info\r\n\r\n```shell\r\nSystem:\r\n OS: macOS 12.3.1\r\n CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz\r\n Memory: 20.57 GB / 32.00 GB\r\n Shell: 5.8 - /bin/zsh\r\n Binaries:\r\n Node: 16.15.0 - /usr/local/bin/node\r\n Yarn: 1.22.18 - /usr/local/bin/yarn\r\n npm: 8.5.5 - /usr/local/bin/npm\r\n Browsers:\r\n Chrome: 102.0.5005.61\r\n Firefox: 91.0.2\r\n Safari: 15.4\r\n```\r\n\r\n\r\n### Additional context\r\n\r\n\u003Cimg width=\"592\" alt=\"Screen Shot 2022-06-07 at 07 23 53\" src=\"https://user-images.githubusercontent.com/736895/172302294-204ea1f6-92be-4c18-8fcd-bd7a76c725be.png\">\r\n\r\nExample of `solarized-light` set for the theme\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.vuejs.org).\r\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[2908],{"name":2887,"color":2888},734,"Shiki background colors aren't used in code blocks","2023-01-28T00:04:06Z","https://github.com/vuejs/vitepress/issues/734",0.70629674,{"description":2915,"labels":2916,"number":2920,"owner":2868,"repository":2869,"state":2870,"title":2921,"updated_at":2922,"url":2923,"score":2924},"### Describe the bug\n\nAccording to [the configuration option](https://vitepress.vuejs.org/config/app-configs.html#markdown) of the documentation, this option is enabled:\r\n\r\n```ts\r\n// .vitepress/config.ts\r\nexport default defineConfig({\r\n // ...\r\n markdown: {\r\n lineNumbers: true,\r\n },\r\n // ...\r\n})\r\n```\r\n\r\nNot getting the expected result showing line numbers , by the way, the code snippets of the documentation also have no line numbers:\r\n\r\n\r\n\r\n\n\n### Reproduction\n\n```ts\r\n// .vitepress/config.ts\r\nexport default defineConfig({\r\n // ...\r\n markdown: {\r\n lineNumbers: true,\r\n },\r\n // ...\r\n})\r\n```\n\n### Expected behavior\n\nShow the code line numbers.\r\n\r\n\r\n\n\n### System Info\n\n```shell\nSystem:\r\n OS: Windows 10 10.0.19044\r\n CPU: (12) x64 Intel(R) Core(TM) i5-10400F CPU @ 2.90GHz\r\n Memory: 8.46 GB / 15.91 GB\r\n Binaries:\r\n Node: 16.15.0 - D:\\Programs\\nodejs\\node.EXE\r\n Yarn: 1.22.18 - ~\\AppData\\Roaming\\npm\\yarn.CMD\r\n npm: 8.11.0 - D:\\Programs\\nodejs\\npm.CMD\r\n Browsers:\r\n Edge: Spartan (44.19041.1266.0), Chromium (103.0.1264.62)\r\n Internet Explorer: 11.0.19041.1202\r\n npmPackages:\r\n vitepress: ^1.0.0-alpha.4 => 1.0.0-alpha.4\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.vuejs.org).\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[2917],{"name":2918,"color":2919},"need more info","bdbefc",1046,"markdown.lineNumbers doesn't work under default theme","2023-01-21T14:30:12Z","https://github.com/vuejs/vitepress/issues/1046",0.7098873,{"description":2926,"labels":2927,"number":2931,"owner":2868,"repository":2869,"state":2870,"title":2932,"updated_at":2933,"url":2934,"score":2935},"### Describe the bug\r\n\r\n```md\r\n```js\r\n// [!code ++:4]\r\nconsole.log(1);\r\nconsole.log(1);\r\n\r\nconsole.log(1);\r\n\\```\r\n```\r\n\r\nRenders this following example:\r\n\r\n\r\n\r\nThis is due because a `\u003Cspan class=\"line diff add\">\u003C/span>` (line 3) is created without any content, if we change it to `\u003Cspan class=\"line diff add\"> \u003C/span>`, it now renders correctly.\r\n\r\n\r\n\r\nNot sure if a blank space is the best fix. \r\n\r\nAlso, should a line only containing `// [!code ++:4]` be highlighted as well? \r\n\r\n### Reproduction\r\n\r\nabove\r\n\r\n### Expected behavior\r\n\r\nto work normally\r\n\r\n### System Info\r\n\r\n```Text\r\nSystem:\r\n OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)\r\n CPU: (20) x64 13th Gen Intel(R) Core(TM) i5-13600K\r\n Memory: 16.53 GB / 23.47 GB\r\n Container: Yes\r\n Shell: 5.8.1 - /usr/bin/zsh\r\n Binaries:\r\n Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node\r\n npm: 10.2.1 - ~/.nvm/versions/node/v20.9.0/bin/npm\r\n pnpm: 8.10.5 - ~/.nvm/versions/node/v20.9.0/bin/pnpm\r\n bun: 1.0.7 - ~/.bun/bin/bun\r\n npmPackages:\r\n vitepress: 1.0.0-rc.31 => 1.0.0-rc.31\r\n```\r\n\r\n\r\n### Additional context\r\n\r\n_No response_\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.",[2928],{"name":2929,"color":2930},"build","377ba8",3305,"Colored Diffs in empty lines breaks + symbol","2024-01-08T00:04:50Z","https://github.com/vuejs/vitepress/issues/3305",0.71232015,{"description":2937,"labels":2938,"number":2939,"owner":2868,"repository":2869,"state":2870,"title":2940,"updated_at":2941,"url":2942,"score":2943},"\u003C!--\r\nNOTE:\r\nVitePress is still WIP, and it is not compatible with VuePress.\r\nPlease do not open issue about default theme missing features or something doesn't work like VuePress.\r\n-->\r\n\r\n**Describe the bug**\r\nWhen creating a code block using line highlighting, it does not highlight the correct line. Instead it seems to highlight the line between the desired line and the previous line.\r\n\r\n**To Reproduce**\r\nSteps to reproduce the behavior:\r\n\r\nCreate a new vitepress project. In any markdown page create a codeblock and specify the line to highlight. Check the output and the correct line will not be highlighted.\r\n\r\nExample:\r\n\r\n```md\r\n## Usage\r\n```html{3}\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Ckro-button @click=\"delete\">Delete Cake\u003C/kro-button>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\n import { useDialog } from '@black-kro/ui';\r\n\r\n const { createDialog } = useDialog();\r\n\r\n export const delete = () => {\r\n createDialog({\r\n title: 'Delete Cake?',\r\n message: 'Are you sure you would like to delete the cake?',\r\n })\r\n .then(() => {\r\n // Delete Cake.\r\n })\r\n .catch(() => {\r\n // Don't delete Cake.\r\n })\r\n }\r\n\u003C/script>\r\n```\r\n\r\nOutput:\r\n\r\n\r\n**Expected behavior**\r\nLine 3 should be highlighted.\r\n\r\n**System Info**\r\n- vitepress version: 0.5.0\r\n- vite version: 1.0.0-rc.3\r\n- Node version: 14.7.0\r\n- OS version: Windows 10\r\n",[],63,"Code block line highlighting not highlighting correct line","2023-01-21T16:22:16Z","https://github.com/vuejs/vitepress/issues/63",0.713805,{"description":2945,"labels":2946,"number":2948,"owner":2868,"repository":2869,"state":2870,"title":2949,"updated_at":2950,"url":2951,"score":2952},"### Describe the bug\r\n\r\nHi 👋🏻 \r\n\r\nI really liked the features like [Colored diff in code block](https://vitepress.dev/guide/markdown#colored-diffs-in-code-blocks) when introduced along with another features like code block focus mode.\r\n\r\nHowever, I was unable to use these features in Anu docs and today I also tried the same in my company's product documentaion but VitePress is unable to produce expected result.\r\n\r\nIf we grab the code snippet from official docs for \"Colored diff in code block\" our project's code snippet doesn't look same as VitePress's.\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/vite-fiz6gv?file=docs/example.md\r\n\r\n### Expected behavior\r\n\r\nCode block should look like as shown in VitePress site:\r\n\r\n\r\nHow it looks:\r\n\r\n\r\n\r\n### System Info\r\n\r\n```shell\r\nSystem:\r\n OS: macOS 13.2.1\r\n CPU: (8) arm64 Apple M1\r\n Memory: 82.20 MB / 8.00 GB\r\n Shell: 5.8.1 - /bin/zsh\r\n Binaries:\r\n Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node\r\n Yarn: 1.22.19 - ~/.nvm/versions/node/v18.15.0/bin/yarn\r\n npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm\r\n Browsers:\r\n Chrome: 112.0.5615.137\r\n Firefox: 112.0\r\n Safari: 16.3\r\n npmPackages:\r\n vitepress: 1.0.0-alpha.73 => 1.0.0-alpha.73\r\n```\r\n\r\n\r\n### Additional context\r\n\r\nNone\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] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[2947],{"name":2898,"color":2899},2282,"🐞 Syntax highlighting using inline comment features aren't working","2023-05-02T00:04:03Z","https://github.com/vuejs/vitepress/issues/2282",0.7161254,{"description":2954,"labels":2955,"number":2957,"owner":2868,"repository":2869,"state":2870,"title":2958,"updated_at":2959,"url":2960,"score":2961},"### Describe the bug\n\nThe VPNavBar component sets a background-color on one of its containers with a `rgba()` value that is not inherited from the theme's CSS variables.\r\n\r\nAs a result if you customize the value of `--vp-c-bg` (shown behind the navbar), you end up with mismatched colors.\n\n### Reproduction\n\n1. Go to https://vitepress.vuejs.org/guide/what-is-vitepress on a desktop browser (window width >= 960px, but it looks particularly bad at width >= 1500px).\r\n2. Scroll down a bit so that there is some page content behind the navbar.\r\n3. Open DevTools and set `--vp-c-bg: darkslategray;` on the `html` element.\r\n\r\nResult: the background color of the navbar and of the page content don't match.\r\n\r\n\r\n\n\n### Expected behavior\n\nThe background color of the navbar and of the page content should match.\r\n\r\n\r\n\r\nSo far I've worked around this issue with this CSS:\r\n\r\n```css\r\n/*\r\n * Fix hardcoded background color of the Nav component.\r\n * Needs to be a color that matches --vp-c-bg but with partial opacity (for the glass effect).\r\n */\r\n@media (min-width: 960px) {\r\n :root.dark .VPNav.no-sidebar,\r\n :root.dark .VPNavBar.has-sidebar .content {\r\n background-color: hsl(220 14% 13% / 0.7);\r\n }\r\n}\r\n```\r\n\r\nI haven't found a CSS fix where the opaque `--vp-c-bg` variable can be used directly. Using a pseudo-element to make a fake background doesn't seem to work, though maybe I’m missing a trick.\r\n\r\nMy suggestion is to introduce a CSS variable that is either generic or specific to the navbar, something like:\r\n\r\n```css\r\n:root {\r\n --vp-c-bg-a70: #ffffffb3;\r\n}\r\n.dark {\r\n --vp-c-bg-a70: #1a1a1ab3;\r\n}\r\n```\r\n\r\nor more specific to the navbar:\r\n\r\n```css\r\n:root {\r\n --vp-nav-glass-bg: #ffffffb3;\r\n}\r\n.dark {\r\n --vp-nav-glass-bg: #1a1a1ab3;\r\n}\r\n```\r\n\r\nThis second option might be used by people who want to opt out of the glass effect, by setting it to `--vp-nav-glass-bg: var(--vp-c-bg);` (though I have not confirmed that using an opaque color removes the perf issues described in #1049).\r\n\r\nIt might also be possible to compute a background color by defaulting to using `--vp-c-bg` first (opaque), then at runtime use `getComputedStyle(element).getPropertyValue('background-color')`, parse the result and add 0.7 opacity.\n\n### System Info\n\n```shell\n[Not relevant here. See the reproduction steps, which use the production Vitepress docs.]\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.vuejs.org).\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[2956],{"name":2887,"color":2888},1266,"VPNavBar has hardcoded background color, prevents theming","2023-01-21T14:20:30Z","https://github.com/vuejs/vitepress/issues/1266",0.71614933,["Reactive",2963],{},["Set"],["ShallowReactive",2966],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f_6e0GaVdzfNT4aZYgkVYQm3avSETJ7DS-d8hyScZ6tk":-1},"/vuejs/vitepress/2610"]