\r\n title: Feature A\r\n details: Lorem ipsum dolor sit amet, consectetur adipiscing elit\r\n```\r\n\r\nCheck the feature icon type\r\n```ts\r\ntype FeatureIcon =\r\n | string\r\n | { src: string; alt?: string; width?: string; height: string }\r\n | {\r\n light: string\r\n dark: string\r\n alt?: string\r\n width?: string\r\n height: string\r\n }\r\n```\r\n\r\nI refer to the render logic, use `v-html` render the icon.\r\nDisplay well in `dev` environment, but shows errors in `prod` environment.\r\n\r\n| dev | build |\r\n| ----------- | ----------- |\r\n|  |  |\r\n\r\n\r\n\r\n\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/github/zyyv/vitepress-unocss-issue\r\n\r\n- Display right run `pnpm dev`\r\n- Display error run `pnpm build && pnpm preview`\r\n\r\n### Expected behavior\r\n\r\nDev and build behave the same\r\n\r\n### System Info\r\n\r\n```Text\r\nlatest\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.",[2873,2876,2879],{"name":2874,"color":2875},"build","377ba8",{"name":2877,"color":2878},"has-workaround","1B4515",{"name":2860,"color":2861},4045,"SSR in dev for more consistent output in dev and prod","2025-03-02T18:08:58Z","https://github.com/vuejs/vitepress/issues/4045",0.7130314,{"description":2886,"labels":2887,"number":2890,"owner":2863,"repository":2864,"state":2865,"title":2891,"updated_at":2892,"url":2893,"score":2894},"### Describe the bug\n\nhttps://github.com/vuejs/vitepress/pull/3359 makes it so that there are two separate headers now (`VPNav` and `VPLocalNav`), which make it impossible to apply single style for header, such as blur effect. Even if I remove the divider and border, it'll look as follow:\r\n\r\n\n\n### Reproduction\n\nAdd blur filter to `VPNav` and `VPLocalNav` and remove borders.\n\n### Expected behavior\n\nBoth headers should be wrapped under single element (eg, `\u003Cheader>`).\n\n### System Info\n\n```Text\n-\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.",[2888,2889],{"name":2857,"color":2858},{"name":2860,"color":2861},3393,"New local navbar design breaks ubiquitous header styling","2024-03-07T11:19:13Z","https://github.com/vuejs/vitepress/issues/3393",0.71755034,{"description":2896,"labels":2897,"number":2899,"owner":2863,"repository":2864,"state":2865,"title":2900,"updated_at":2901,"url":2902,"score":2903},"### Is your feature request related to a problem? Please describe.\r\n\r\nHi 👋🏻 \r\n\r\nWhile customizing the theme, We have to update lots of CSS var only for changing branch color these **_roughly_** includes:\r\n```css\r\n--vp-c-brand-1: var(--vp-c-indigo-1);\r\n--vp-c-brand-2: var(--vp-c-indigo-2);\r\n--vp-c-brand-3: var(--vp-c-indigo-3);\r\n--vp-c-brand-soft: var(--vp-c-indigo-soft);\r\n\r\n--vp-button-brand-border: transparent;\r\n--vp-button-brand-text: var(--vp-c-white);\r\n--vp-button-brand-bg: var(--vp-c-brand-3);\r\n--vp-button-brand-hover-border: transparent;\r\n--vp-button-brand-hover-text: var(--vp-c-white);\r\n--vp-button-brand-hover-bg: var(--vp-c-brand-2);\r\n--vp-button-brand-active-border: transparent;\r\n--vp-button-brand-active-text: var(--vp-c-white);\r\n--vp-button-brand-active-bg: var(--vp-c-brand-1);\r\n```\r\n\r\n### Describe the solution you'd like\r\n\r\nCSS's [color-mix](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix) is now supported by all browsers. Using `color-mix` function will ease the theme customization via single CSS var change instead of changing multiple CSS vars. Even you can go further and use `oklch` or `hsl` for colors.\r\n\r\n### Describe alternatives you've considered\r\n\r\nOverriding all the colors my self 😞 \r\n\r\n### Additional context\r\n\r\nhttps://www.youtube.com/watch?v=6aCsAMgwnjE\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.",[2898],{"name":2860,"color":2861},3433,"Use `color-mix` instead of multiple color CSS vars","2025-03-02T18:09:54Z","https://github.com/vuejs/vitepress/issues/3433",0.72369957,{"description":2905,"labels":2906,"number":2910,"owner":2863,"repository":2864,"state":2911,"title":2912,"updated_at":2913,"url":2914,"score":2915},"### Is your feature request related to a problem? Please describe.\n\nCustom Containers have relatively low contrast compared to regular text. This makes the contrast of text very inconsistent across the page, which makes text less pleasant to read. Of course, the lower contrast text itself is also quite hard to read (especially on low-end displays, and displays with filters, such as a blue light filter).\r\n\r\n\r\n\n\n### Describe the solution you'd like\n\nAs noted in #1824 and #1989, the cause of the problem is that both light and dark mode use the same colors for Custom containers. So the picked color is likely not ideal for both.\r\n\r\nPlease use different colors for light and dark mode, and choose default colors with higher contrast.\n\n### Describe alternatives you've considered\n\n_No response_\n\n### Additional context\n\nI first came across is here: https://github.com/eslint-community/eslint-utils/pull/84\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] 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.",[2907],{"name":2908,"color":2909},"a11y","fbca04",2119,"closed","Increase contrast for Custom Containers","2023-08-16T00:04:16Z","https://github.com/vuejs/vitepress/issues/2119",0.6364918,{"description":2917,"labels":2918,"number":236,"owner":2863,"repository":2864,"state":2911,"title":2919,"updated_at":2920,"url":2921,"score":2922},"### Is your feature request related to a problem? Please describe.\n\nNoticing that there is a distinct difference from vue press custom containers to that of vite's\r\n\r\n## vue press\r\n\u003Cimg width=\"784\" alt=\"Screenshot 2022-08-11 at 3 38 20 PM\" src=\"https://user-images.githubusercontent.com/1858427/184088154-0c171530-b416-4fab-96a9-4f587e8220dc.png\">\r\n\r\n\r\n## vite press\r\n\u003Cimg width=\"734\" alt=\"Screenshot 2022-08-11 at 3 38 30 PM\" src=\"https://user-images.githubusercontent.com/1858427/184088178-03b9564b-e9b9-4ba6-a197-f64c3249a923.png\">\r\n\r\n\n\n### Describe the solution you'd like\n\nI know that the color can be overridden in https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css\r\n\r\nbut, the for the style difference for this line \r\n\u003Cimg width=\"76\" alt=\"Screenshot 2022-08-11 at 3 53 52 PM\" src=\"https://user-images.githubusercontent.com/1858427/184088784-33fdfeaf-115e-47bc-b43d-be355ef67f7d.png\">\r\n\r\nis it possible to expose an option to be configured, like\r\n```\r\nthemeConfig : {\r\n logo: xxx,\r\n customContainer: {\r\n withLeftBorder: true,\r\n cornerRadius: \"6px\"\r\n }\r\n}\r\n```\r\n\r\nEffect:\r\n\u003Cimg width=\"223\" alt=\"Screenshot 2022-08-11 at 4 03 14 PM\" src=\"https://user-images.githubusercontent.com/1858427/184090149-ca7ddd87-d574-4a4a-8704-d594588f7f3c.png\">\r\n\r\n\n\n### Describe alternatives you've considered\n\nAlternatively,\r\nthese two properties can be exposed in css variables: https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css\r\n\r\nsomething like: \r\n```\r\n//add corner radius\r\n--vp-custom-block-border-radius: 6px;\r\n//remove border, add lable left border\r\n--vp-custom-block-info-border: none;\r\n--vp-custom-block-info-left-border: var(--vp-c-green-darker);\r\n--vp-custom-block-info-left-border-width: 5px \r\n\r\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] 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.",[],"custom containers style option","2023-01-21T14:28:46Z","https://github.com/vuejs/vitepress/issues/1157",0.66194475,{"description":2924,"labels":2925,"number":2928,"owner":2863,"repository":2864,"state":2911,"title":2929,"updated_at":2930,"url":2931,"score":2932},"### 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.",[2926,2927],{"name":2857,"color":2858},{"name":2908,"color":2909},2610,"No contrast of code on table row in light theme","2023-08-16T00:04:20Z","https://github.com/vuejs/vitepress/issues/2610",0.6890805,{"description":2934,"labels":2935,"number":2936,"owner":2863,"repository":2864,"state":2911,"title":2937,"updated_at":2938,"url":2939,"score":2940},"### Describe the bug\r\n\r\nWhile auditing another site (which uses vitepress), I noticed the contrast ratio on code languages and line numbers doesn't meet WCAG guidelines.\r\n\r\n\u003Cimg width=\"700\" alt=\"\" src=\"https://github.com/user-attachments/assets/84ef9a18-94b2-41ad-bf0a-42991f01a5cb\" />\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.6974952,{"description":2942,"labels":2943,"number":2944,"owner":2863,"repository":2864,"state":2911,"title":2945,"updated_at":2946,"url":2947,"score":2948},"### Is your feature request related to a problem? Please describe.\n\nNo\n\n### Describe the solution you'd like\n\nThe custom container are a very useful feature and it can be configurable in the .vitepress/config.js file with color for \r\nname,border, border-dark, background, background-dark in the config file with these 5 options i think it will make a better for a better blog points.\n\n### Describe alternatives you've considered\n\nHaving the lack of customization for the custom container boxes. I am aware that you can create components to do the same things but the \"::: name :::\" syntax is better to view in markdown as well as more read able than having it wrapped inside a html tag.\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.",[],1246,"Adding Custom Containers from the config.js file ","2023-01-21T14:26:51Z","https://github.com/vuejs/vitepress/issues/1246",0.6997018,{"description":2950,"labels":2951,"number":2953,"owner":2863,"repository":2864,"state":2911,"title":2954,"updated_at":2955,"url":2956,"score":2957},"### 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.",[2952],{"name":2857,"color":2858},1266,"VPNavBar has hardcoded background color, prevents theming","2023-01-21T14:20:30Z","https://github.com/vuejs/vitepress/issues/1266",0.7057082,["Reactive",2959],{},["Set"],["ShallowReactive",2962],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fYSv4RvAzseIucNSa6ZfEGGF5yAeWi05YPsCPOumFkv8":-1},"/vuejs/vitepress/1824"]