\r\n \u003C/template>\r\n \u003C/DefaultTheme.Layout>\r\n\u003C/template>\r\n```\r\n\r\nthis works perfect during development, but once I build vitepress and serve, my video is always in light mode, even though isDark is true.\r\n\r\nI found out that during `npm run build`, my Layout template is pre-compiled, so at this point, isDark is always false\r\n\r\nHow can I fix this?\n\n### Reproduction\n\nas above\n\n### Expected behavior\n\nconsist behavior\n\n### System Info\n\n```Text\nSystem:\r\n OS: macOS 13.5.2\r\n CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz\r\n Memory: 191.28 MB / 16.00 GB\r\n Shell: 3.2.57 - /bin/bash\r\n Binaries:\r\n Node: 21.2.0 - /usr/local/bin/node\r\n Yarn: 1.22.10 - /usr/local/bin/yarn\r\n npm: 10.2.3 - /usr/local/bin/npm\r\n Browsers:\r\n Chrome: 119.0.6045.159\r\n Edge: 119.0.2151.72\r\n Safari: 16.6\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.",[3034],{"name":3035,"color":3036},"bug: pending triage","e99695",3267,"Inconsist behavior between development & production","2023-12-22T00:04:33Z","https://github.com/vuejs/vitepress/issues/3267",0.71151537,{"description":3043,"labels":3044,"number":3046,"owner":3024,"repository":3025,"state":3026,"title":3047,"updated_at":3048,"url":3049,"score":3050},"### Describe the bug\n\nI only configured the theme color configuration of normal mode as follows, but when I switched to dark mode, the theme color was still overwritten by the custom color. \r\n\r\n\r\n\n\n### Reproduction\n\nsee Describe the bug\n\n### Expected behavior\n\nIsn't the color of dark mode undefined and shouldn't be used by default with vitepress\n\n### System Info\n\n```Text\nSystem:\r\n OS: macOS 14.2\r\n CPU: (8) arm64 Apple M1\r\n Memory: 89.67 MB / 8.00 GB\r\n Shell: 5.9 - /bin/zsh\r\n Binaries:\r\n Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node\r\n Yarn: 1.22.19 - ~/.yarn/bin/yarn\r\n npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm\r\n pnpm: 8.6.0 - ~/Library/pnpm/pnpm\r\n bun: 1.0.0 - ~/.bun/bin/bun\r\n Browsers:\r\n Chrome: 120.0.6099.109\r\n Edge: 119.0.2151.46\r\n Safari: 17.2\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.",[3045],{"name":3035,"color":3036},3341,"Dark mode display issue after setting the accent color","2023-12-23T00:04:24Z","https://github.com/vuejs/vitepress/issues/3341",0.71283716,{"description":3052,"labels":3053,"number":3057,"owner":3024,"repository":3025,"state":3026,"title":3058,"updated_at":3059,"url":3060,"score":3061},"### Describe the bug\n\nWhen I customize a link component and introduce it into vitepress, the `vp-doc` class generates a style override on my custom style, causing my style to not display properly:\r\n\r\nI've tried `vp-raw` for style isolation, but it still doesn't display my custom styles properly\r\n\r\nI don't know how to solve this style override problem, which has been bothering me for a long time\n\n### Reproduction\n\nThis is my custom link component:\r\n```tsx\r\nimport { defineComponent, PropType, ref } from \"vue\";\r\nimport \"uno.css\";\r\n\r\nexport type IType = 'default' | 'primary' | 'success' | 'warning' | 'danger'| 'info'\r\nexport type IColor = 'black' | 'blue' | 'green' | 'yellow'| 'red' | 'gray'\r\nexport const props = {\r\n type: {\r\n type: String as PropType\u003CIType>,\r\n default: \"default\",\r\n },\r\n color: {\r\n type: String as PropType\u003CIColor>,\r\n default: \"black\",\r\n },\r\n plain: {\r\n type: Boolean,\r\n default: true,\r\n },\r\n href: {\r\n type: String,\r\n required: true,\r\n },\r\n} as const;\r\n\r\nexport default defineComponent({\r\n name: \"CLink\",\r\n props,\r\n setup(props, { slots }) {\r\n return () => (\r\n \u003Ca\r\n class={`\r\n text-${props.plain ? props.color + \"-500\" : \"white\"}\r\n hover:text-${props.color}-400\r\n cursor-pointer\r\n text-lg\r\n hover:text-white\r\n transition duration-300 ease-in-out transform hover:scale-105\r\n mx-1\r\n decoration-none\r\n `}\r\n href={props.href} \r\n >\r\n {slots.default ? slots.default() : 'Link'}\r\n \u003C/a>\r\n ); \r\n },\r\n});\r\n```\r\n\r\nHere's my demo code from the documentation:\r\n```vue\r\n\u003Cdiv class=\"vp-raw\">\r\n \u003CCLink href=\"#\" class=\"primary\" color=\"blue\">Primary Link\u003C/CLink>\r\n \u003CCLink href=\"#\" type=\"success\" color=\"green\">Success Link\u003C/CLink>\r\n \u003CCLink href=\"#\" type=\"warning\" color=\"yellow\">Warning Link\u003C/CLink>\r\n \u003CCLink href=\"#\" type=\"danger\" color=\"red\">Danger Link\u003C/CLink>\r\n \u003CCLink href=\"#\" type=\"info\" color=\"gray\">Info Link\u003C/CLink>\r\n\u003C/div>\r\n```\r\n\r\n\r\n\n\n### Expected behavior\n\nI want to be able to display the style of my components properly, in fact I can be sure that the `vp-doc` generated style override, I delete this class by manipulating the DOM and then the style can be displayed normally, but this will make the other functions of vitepress failure, I want to be able to display the style of the component without affecting vitepress\n\n### System Info\n\n```shell\n{\r\n \"name\": \"catisol-ui\",\r\n \"version\": \"0.9.1\",\r\n \"description\": \"\",\r\n \"main\": \"index.js\",\r\n \"scripts\": {\r\n \"test\": \"vitest\",\r\n \"build\": \"vite build\",\r\n \"dev\": \"vite\",\r\n \"docs:dev\": \"vitepress dev docs\",\r\n \"docs:build\": \"vitepress build docs\",\r\n \"docs:serve\": \"vitepress serve docs\"\r\n },\r\n \"keywords\": [],\r\n \"author\": \"\",\r\n \"license\": \"ISC\",\r\n \"devDependencies\": {\r\n \"@iconify-json/ic\": \"1.1.4\",\r\n \"@vitejs/plugin-vue\": \"3.0.3\",\r\n \"@vitejs/plugin-vue-jsx\": \"2.0.0\",\r\n \"@vue/test-utils\": \"2.0.2\",\r\n \"happy-dom\": \"6.0.4\",\r\n \"postcss\": \"^8.4.21\",\r\n \"postcss-prefix-selector\": \"^1.16.0\",\r\n \"unocss\": \"0.45.6\",\r\n \"vite\": \"3.0.7\",\r\n \"vitepress\": \"v1.0.0-alpha.31\",\r\n \"vitest\": \"0.21.1\"\r\n },\r\n \"maintainers\": [\r\n \"isolcat\"\r\n ],\r\n \"dependencies\": {\r\n \"@unocss/vite\": \"^0.45.13\",\r\n \"vue\": \"3.2.37\"\r\n }\r\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.",[3054],{"name":3055,"color":3056},"need more info","bdbefc",1777,"vp-raw cannot isolate style conflicts generated by v-doc classes","2023-01-21T14:16:44Z","https://github.com/vuejs/vitepress/issues/1777",0.72781307,{"description":3063,"labels":3064,"number":3066,"owner":3024,"repository":3025,"state":3026,"title":3067,"updated_at":3068,"url":3069,"score":3070},"### Describe the bug\n\nWhen I click on an item above the currently active item in the outline, the marker first appears above the target item, and then appears in the correct place. Is this intentional?\r\n\r\nhttps://github.com/vuejs/vitepress/assets/84114146/77ad4b5a-dc13-4acd-8704-f261124594f9\n\n### Reproduction\n\nThe VitePress official website exhibits the same phenomenon. \r\n\n\n### Expected behavior\n\nThe marker appears in the correct place at the first time\n\n### System Info\n\n```sh\nSystem:\r\n OS: Windows 10 10.0.22621\r\n CPU: (16) x64 AMD Ryzen 7 5800H with Radeon Graphics\r\n Memory: 3.84 GB / 14.85 GB\r\n Binaries:\r\n Node: 16.19.1 - D:\\Environment\\nodejs\\node.EXE\r\n Yarn: 1.22.19 - D:\\Environment\\nodejs\\yarn.CMD\r\n npm: 8.19.3 - D:\\Environment\\nodejs\\npm.CMD\r\n pnpm: 8.6.5 - D:\\Environment\\nodejs\\pnpm.CMD\r\n Browsers:\r\n Edge: Spartan (44.22621.1992.0), Chromium (115.0.1901.183)\r\n Internet Explorer: 11.0.22621.1\r\n npmPackages:\r\n vitepress: 1.0.0-beta.7 => 1.0.0-beta.7\n```\n\n\n### Additional context\n\nChanging \"throttleAndDebounce\" in the [outline.js](https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/composables/outline.ts) to a simple debounce function can solve this issue.\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.",[3065],{"name":3035,"color":3036},2725,"Unexpected outline behavior","2023-08-11T00:04:32Z","https://github.com/vuejs/vitepress/issues/2725",0.73037595,{"description":3072,"labels":3073,"number":3075,"owner":3024,"repository":3025,"state":3026,"title":3076,"updated_at":3077,"url":3078,"score":3079},"### Describe the bug\n\nWhen i use `isDark` and try to toggle it’s value, theme color of the page is not be changed.\r\n\r\n```html\r\n\u003Cscript setup lang=\"ts\">\r\n import { useData } from 'vitepress'\r\n\r\n const { isDark } = useData()\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cheader class=\"header\">\r\n \u003Ca href=\"#\">LOGO\u003C/a>\r\n \u003Cnav class=\"nav\">\r\n \u003Ca href=\"#\">\r\n \u003C!-- custom theme toggle -->\r\n \u003Cdiv :class=\"isDark ? 'i-ri-sun-line' : 'i-ri-moon-line'\" @click=\"isDark = !isDark\" />\r\n \u003C/a>\r\n \u003C/nav>\r\n \u003C/header>\r\n\u003C/template>\r\n```\r\n\r\n\n\n### Reproduction\n\n\r\nhttps://github.com/vuejs/vitepress/assets/36221207/cb78fbb6-8ae3-482e-8c37-063fcc7e441d\r\n\r\n\n\n### Expected behavior\n\nA way to switch themes in a custom theme:\r\n\r\nThe theme color of the page switches automatically when the isDark value is changed.\r\n\r\nOr provide a method to actively modify.\r\n\r\nThanks❤️\n\n### System Info\n\n```sh\nSystem:\r\n OS: macOS 13.3.1\r\n CPU: (8) arm64 Apple M1 Pro\r\n Memory: 45.83 MB / 16.00 GB\r\n Shell: 5.9 - /bin/zsh\r\n Binaries:\r\n Node: 16.17.0 - /usr/local/bin/node\r\n Yarn: 1.22.19 - /usr/local/bin/yarn\r\n npm: 9.1.2 - /usr/local/bin/npm\r\n pnpm: 8.6.12 - /usr/local/bin/pnpm\r\n Browsers:\r\n Chrome: 116.0.5845.96\r\n Safari: 16.4\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.",[3074],{"name":3035,"color":3036},2830,"How to toggle dark theme in custom theme?","2023-08-30T00:04:14Z","https://github.com/vuejs/vitepress/issues/2830",0.7371188,{"description":3081,"labels":3082,"number":3083,"owner":3024,"repository":3025,"state":3026,"title":3084,"updated_at":3085,"url":3086,"score":3087},"### Describe the bug\r\n\r\n我的项目是一个组件库,其中有一些CSS动画(比如[animation](animation: rotate 2s linear infinite;))。\r\n在使用vitepress书写文档时,发现很多动画都没有显示。\r\n\r\n我自己排查了下,发现是`src/client/theme-default/styles/base.css` 这个文件中使用!important声明了禁止动画的样式。导致我的CSS动画属性失效了。\r\n```\r\n@media (prefers-reduced-motion: reduce) {\r\n *,\r\n ::before,\r\n ::after {\r\n animation-delay: -1ms !important;\r\n animation-duration: 1ms !important;\r\n animation-iteration-count: 1 !important;\r\n background-attachment: initial !important;\r\n scroll-behavior: auto !important;\r\n transition-duration: 0s !important;\r\n transition-delay: 0s !important;\r\n }\r\n}\r\n````\r\n\r\n目前的一个解决办法为:给元素声明animation时,使用!important提高优先级\r\nanimation: rotate 2s linear infinite !important;\r\n\r\n\r\n### Reproduction\r\n\r\n为html元素添加css动画,必现。\r\n比如`animation: rotate 2s linear infinite;`\r\n\r\n### Expected behavior\r\n\r\n需要部分Vue组件或Html元素支持CSS动画。\r\n有一个Vue组件的说明,需要有CSS动画以说明使用方法。如果可以的话,希望其他组件的动画也能正常展示。\r\n\r\n### System Info\r\n\r\n```sh\r\nSystem:\r\n OS: Windows 10 10.0.19044\r\n CPU: (8) x64 Intel(R) Core(TM) i7-9700 CPU @ 3.00GHz\r\n Memory: 6.69 GB / 31.84 GB\r\n Binaries:\r\n Node: 18.17.1 - C:\\Program Files\\nodejs\\node.EXE\r\n Yarn: 1.22.18 - ~\\AppData\\Roaming\\npm\\yarn.CMD\r\n npm: 9.8.0 - C:\\Program Files\\nodejs\\npm.CMD\r\n Browsers:\r\n Edge: Spartan (44.19041.1266.0), Chromium (116.0.1938.62)\r\n Internet Explorer: 11.0.19041.1566\r\n npmPackages:\r\n vitepress: ^1.0.0-rc.10 => 1.0.0-rc.10\r\n```\r\n\r\n\r\n### Additional context\r\n\r\n.vitepress\\config.js\r\n```\r\nimport { defineConfig } from 'vitepress';\r\n\r\n// https://vitepress.dev/reference/site-config\r\nexport default defineConfig({\r\n title: 'QMWebUI',\r\n description: '...',\r\n head: [['link', { rel: 'icon', href: '...' }]],\r\n // https://vitepress.dev/reference/default-theme-config\r\n themeConfig: {\r\n logo: '...',\r\n nav: [\r\n { text: 'Home', link: '/' },\r\n { text: 'Examples', link: '/markdown-examples' }\r\n ],\r\n\r\n outline: {\r\n label: '本页内容',\r\n level: [2, 3]\r\n },\r\n sidebar: [...],\r\n socialLinks: [\r\n {\r\n icon: {\r\n svg: 'xxx'\r\n },\r\n link: 'xxx'\r\n }\r\n ]\r\n }\r\n});\r\n\r\n```\r\n.vitepress\\theme\\index.js\r\n```\r\nimport DefaultTheme from 'vitepress/theme'\r\nimport '@tencent/qm-webui/lib/style.css';\r\n\r\nexport default DefaultTheme\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.",[],2916,"How to add CSS animation to html element?","2023-09-16T00:04:04Z","https://github.com/vuejs/vitepress/issues/2916",0.7381332,{"description":3089,"labels":3090,"number":3092,"owner":3024,"repository":3025,"state":3026,"title":3093,"updated_at":3094,"url":3095,"score":3096},"### Describe the bug\n\nIn MPA mode with default theme, can't toggle dark/light mode and can't copy code when click copy button。\n\n### Reproduction\n\nany md file can reproduction\n\n### Expected behavior\n\nIn MPA mode, can toggle dark/light mode and copy code.\n\n### System Info\n\n```shell\nwindows vitepress@1.0.0-alpha.60\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.",[3091],{"name":3035,"color":3036},2092,"Theme default can't toggle dark/light mode or copy code in MPA mode","2023-03-24T00:04:11Z","https://github.com/vuejs/vitepress/issues/2092",0.7401148,{"description":3098,"labels":3099,"number":3103,"owner":3024,"repository":3025,"state":3026,"title":3104,"updated_at":3105,"url":3106,"score":3107},"### Describe the bug\n\nWhen clicking the searchbox (or pressing ctrl+k) for the first time after the page loaded, it disappears for about 500ms.\r\n\r\nhttps://github.com/vuejs/vitepress/assets/2056864/a3bfc3de-219e-4329-824d-965d7cfa3bf1\r\n\r\n\n\n### Reproduction\n\n1. Open https://vitepress.dev\r\n2. Click the searchbox or press ctrl+k\r\n3. Notice the box is hidden for about 500ms before the search overlay is loaded\n\n### Expected behavior\n\nThe searchbox doesn't disappear.\n\n### System Info\n\n```sh\nSystem:\r\n OS: Windows 10 10.0.19044\r\n CPU: (16) x64 Intel(R) Core(TM) i7-6900K CPU @ 3.20GHz\r\n Memory: 49.17 GB / 63.92 GB\r\n Binaries:\r\n Node: 18.2.0 - C:\\Program Files\\nodejs\\node.EXE\r\n Yarn: 1.22.19 - ~\\AppData\\Roaming\\npm\\yarn.CMD\r\n npm: 9.6.6 - C:\\Program Files\\nodejs\\npm.CMD\r\n Browsers:\r\n Chrome: 114.0.5735.134\r\n Edge: Spartan (44.19041.1266.0), Chromium (114.0.1823.43)\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.",[3100],{"name":3101,"color":3102},"theme","0754FB",2513,"Searchbox blinking on firtst usage","2023-06-26T00:04:56Z","https://github.com/vuejs/vitepress/issues/2513",0.7413348,{"description":3109,"labels":3110,"number":3114,"owner":3024,"repository":3025,"state":3026,"title":3115,"updated_at":3116,"url":3117,"score":3118},"### Is your feature request related to a problem? Please describe.\r\n\r\nWhen I use Element-Plus in VitePress, the partial style of the component is modified. The reason is VitePress `src/client/theme-default/styles/layout.css` File reset all styles.\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n### Describe the solution you'd like\r\n\r\nI hope this code only takes effect in VitePress.\r\n\r\n### Describe alternatives you've considered\r\n\r\n_No response_\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Validations\r\n\r\n- [X] Follow our [Code of Conduct](https://vuejs.org/coc)\r\n- [X] Read the [docs](https://vitepress.vuejs.org/).\r\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/master/.github/contributing.md).\r\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[3111],{"name":3112,"color":3113},"duplicate","cfd3d7",434,"This is a suggestion","2023-01-21T16:04:15Z","https://github.com/vuejs/vitepress/issues/434",0.7439929,["Reactive",3120],{},["Set"],["ShallowReactive",3123],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fqBA_lsxr7QwhyBadACYGet2eWfTW3YKnWUw70AoJKLU":-1},"/vuejs/vitepress/4834"]