`)\r\n\r\nI'm currently working on migrating and documenting the excellent Spectre CSS docs and am using Vitepress.\r\n\r\nI'm developing an ejected and modified default theme which has already come some way to solving this problem:\r\n\r\n- [original](https://picturepan2.github.io/spectre/components/menu.html) (custom app)\r\n- [migrated](https://spectre-org.github.io/spectre-docs/docs/components/menu.html) (VitePress with modified default theme)\r\n - note the `vp-doc` formatting which is all Spectre CSS\r\n - some fixed, and some not-yet fixed clashes of general class names\r\n\r\nFor reference to the use case (documenting a 3rd-party framework) here is the raw markdown page:\r\n\r\n- https://raw.githubusercontent.com/spectre-org/spectre-docs/main/docs/components/menu.md\r\n\r\nNote that:\r\n\r\n- Spectre CSS (or any other 3rd-party CSS framework) is now able to be simply \"dropped in\"\r\n- there is no pollution between VitePress and the 3rd-party framework\r\n- VitePress' default components remain fully-styled and work as they were before\r\n- `vp-doc` content can be safely used to demo any 3rd party HTML elements and classes\r\n\r\nI think I know enough to fix the problems in my modified theme and either:\r\n\r\n- publish a new \"neutral\" theme\r\n- port the changes to the default theme (ideal outcome)\r\n\r\nThere's actually not that much work; it's:\r\n\r\n- renaming the general component classes\r\n- moving some `vp-doc` classes to other locations\r\n- creating an additional unstyled entrypoint such as `without-formatting`\r\n\r\n### Describe alternatives you've considered\r\n\r\nPublishing the modified theme standalone, but then of course it would not benefit from ongoing updates.\r\n\r\n### Additional context\r\n\r\nI am proposing a PR in the coming weeks to integrate these updates.\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.",[2867],{"name":2868,"color":2869},"stale","ededed",3021,"vuejs","vitepress","open","Make the default theme compatible with 3rd-party CSS frameworks","2023-11-06T14:43:58Z","https://github.com/vuejs/vitepress/issues/3021",0.72512317,{"description":2879,"labels":2880,"number":2884,"owner":2871,"repository":2872,"state":2885,"title":2886,"updated_at":2887,"url":2888,"score":2889},"**Is your feature request related to a problem? Please describe.**\r\nDark mode is becoming ever more popular, with a number of benefits such as less strain on the eyes, and less battery consumption.\r\nPlus, it's cool.\r\n\r\nIt would be nice if VitePress would ship dark mode out of the box.\r\n\r\n**Describe the solution you'd like**\r\nIt seems to me that dark mode would be quite simple to implement due to the existing architecture of the default theme. Since CSS Variables are used and are all found in [vars.css](https://github.com/vuejs/vitepress/blob/master/src/client/theme-default/styles/vars.css), the most simple solution solution would likely to modify the value of the variables based on the user's preference.\r\n\r\nCurrently, this is what [vars.css](https://github.com/vuejs/vitepress/blob/master/src/client/theme-default/styles/vars.css) looks like:\r\n\r\n``` css\r\n:root {\r\n\r\n --c-white: #ffffff;\r\n --c-black: #000000;\r\n\r\n ...\r\n\r\n}\r\n```\r\n\r\nUsing `prefers-color-scheme`, we could do the following:\r\n\r\n``` css\r\n@media (prefers-color-scheme: light) {\r\n :root {\r\n\r\n --c-white: #ffffff;\r\n --c-black: #000000;\r\n\r\n ...\r\n\r\n }\r\n}\r\n@media (prefers-color-scheme: dark) {\r\n :root {\r\n\r\n --c-white: #000000;\r\n --c-black: #ffffff;\r\n\r\n ...\r\n\r\n }\r\n}\r\n```\r\n\r\nOf course, there are more subtleties to the change, such as dealing with shadows and such, all of which will have to adjusted to work for dark mode as well, but in general, I believe this approach should make the implementations relatively straightforward.\r\n\r\nAnother minor point that will need to be addressed is the naming convention for the variables. Since white becomes black in dark mode, it would probably be clearer if we renamed `--c-white` to something along the lines of `--c-background`.\r\n\r\n**Describe alternatives you've considered**\r\nI don't see any obvious alternatives, both in idea and implementation.\r\n\r\nOf course, one could simply do away with dark mode, but we would be missing out on its benefits.\r\n\r\n**Additional context**\r\nN/A\r\n",[2881],{"name":2882,"color":2883},"theme","0754FB",251,"closed","Dark Mode out of the box","2023-01-21T16:04:22Z","https://github.com/vuejs/vitepress/issues/251",0.6898316,{"description":2891,"labels":2892,"number":2896,"owner":2871,"repository":2872,"state":2885,"title":2897,"updated_at":2898,"url":2899,"score":2900},"### 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.",[2893],{"name":2894,"color":2895},"bug: pending triage","e99695",3341,"Dark mode display issue after setting the accent color","2023-12-23T00:04:24Z","https://github.com/vuejs/vitepress/issues/3341",0.6932892,{"description":2902,"labels":2903,"number":2907,"owner":2871,"repository":2872,"state":2885,"title":2908,"updated_at":2909,"url":2910,"score":2911},"### 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.",[2904],{"name":2905,"color":2906},"docs","0075ca",1006,"docs: separate logo for dark mode","2023-01-21T14:28:47Z","https://github.com/vuejs/vitepress/issues/1006",0.7021598,{"description":2913,"labels":2914,"number":2915,"owner":2871,"repository":2872,"state":2885,"title":2916,"updated_at":2917,"url":2918,"score":2919},"i want use vitepress become a ui component display website. so i import my sfc in enhanceApp. But at meantime i must config my own `Layout.vue` and `notfound.vue` component. That is not what i want. i liked defaulte theme (vuepress old player) very mush. \r\n\r\n```js\r\nimport Layout from '/@theme/Layout.vue';\r\nimport Helloworld from \"../components/index\"\r\n\r\nexport default {\r\n Layout,\r\n // NotFound,\r\n enhanceApp({ app, router, siteData }) {\r\n app.use(Helloworld) \r\n }\r\n}\r\n```\r\n\r\ni think `@theme/index` should not config default layout and enhanceApp at same time or in the same file. or at least it must follow `Convention over configuration` rule.\r\n\r\nif follow [vuepress default theme file system](https://github.com/vuejs/vuepress/tree/master/packages/%40vuepress/theme-default) and `Convention over configuration`, it will be better\r\n\r\nmaybe use `@theme/layouts/`, `@theme/components/`\r\n\r\nand here is a bug, when a create emptyfile `theme` in `.vitepress` .it will crash",[],58,"want more flexibility in the customization part","2023-01-21T16:20:20Z","https://github.com/vuejs/vitepress/issues/58",0.70276845,{"description":2921,"labels":2922,"number":2923,"owner":2871,"repository":2872,"state":2885,"title":2924,"updated_at":2925,"url":2926,"score":2927},"### Is your feature request related to a problem? Please describe.\r\n\r\nI use Vitepress to document my component library. Sometimes, the style of the components is \"overridden\" by the Vitepress CSS, or just applied.\r\n\r\nFor example, with a component using a `\u003Ctable />` HTMLElement (https://maz-ui.com/components/maz-table), the VitePress CSS is applied to my component and changes its style. **I don't want it.** \r\n\r\n[See CSS file here](https://github.com/vuejs/vitepress/blob/df8753bd927c2b57b9188fb292c1429e9c3c8ab6/src/client/theme-default/styles/components/vp-doc.css#L176)\r\n\r\n```css\r\n.vp-doc table {\r\n display: block;\r\n border-collapse: collapse;\r\n margin: 20px 0;\r\n overflow-x: auto;\r\n}\r\n\r\n.vp-doc tr {\r\n background-color: var(--vp-c-bg);\r\n border-top: 1px solid var(--vp-c-divider);\r\n transition: background-color 0.5s;\r\n}\r\n\r\n.vp-doc tr:nth-child(2n) {\r\n background-color: var(--vp-c-bg-soft);\r\n}\r\n\r\n.vp-doc th,\r\n.vp-doc td {\r\n border: 1px solid var(--vp-c-divider);\r\n padding: 8px 16px;\r\n}\r\n\r\n.vp-doc th {\r\n text-align: left;\r\n font-size: 14px;\r\n font-weight: 600;\r\n color: var(--vp-c-text-2);\r\n background-color: var(--vp-c-bg-soft);\r\n}\r\n\r\n.vp-doc td {\r\n font-size: 14px;\r\n}\r\n```\r\n\r\n### Describe the solution you'd like\r\n\r\nI don't want the style to be applied to selected elements.\r\n\r\n### Describe alternatives you've considered\r\n\r\nAs the [tailwindcss-typography](https://github.com/tailwindlabs/tailwindcss-typography) library suggests [here](https://github.com/tailwindlabs/tailwindcss-typography?tab=readme-ov-file#advanced-topics) with the class `not-prose`. \r\n\r\nI propose to add a class like `no-vp-style` or something else to not apply CSS to the HTML element where the class is set and other DOM inside.\r\n\r\n```md\r\n## Documentation\r\n\r\n\u003CMazTable class=\"no-vp-style\" />\r\n```\r\n\r\nWith a CSS rule like : \r\n\r\n```css\r\n.vp-doc table:not(:where([class~='no-vp-style'], [class~='no-vp-style'] *)) {\r\n ...\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] 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.",[],3652,"Add CSS class to disable vitepress CSS to avoid conflicts and override","2024-03-21T00:04:41Z","https://github.com/vuejs/vitepress/issues/3652",0.703676,{"description":2929,"labels":2930,"number":2931,"owner":2871,"repository":2872,"state":2885,"title":2932,"updated_at":2933,"url":2934,"score":2935},"**Is your feature request related to a problem? Please describe.**\r\nCurrently, importing Vue components (whether they are VitePress components, or components from a library for example) are influenced by VitePress's somewhat sub-optimal styles.\r\n\r\nFor example, all headings are styled, so as soon as a component uses an `h1`/`h2`/etc, it will inherit those styles, making VitePress virtually unusable for component libraries that ship their own CSS.\r\n\r\nThe only I can think of mitigating this, is to use a web component as a base for Vue components to be mounted in, as styles are local to web components if I remember correctly.\r\n\r\n**Describe the solution you'd like**\r\nSome way to render components with their own styles, and not inherit styles from the docs.\r\n\r\n**Describe alternatives you've considered**\r\nI tries unsetting all styles `* { all: unset; }` inside our demo component (the wrapper for all other components), but that also removes some of the Tailwind related styling unfortunately.\r\n\r\nI couldn't get web components to work, as the vue plugin seems to be for Vue 2 (https://github.com/vuejs/vue-web-component-wrapper).",[],248,"[Feature] - Allow local styling of components","2023-01-21T16:04:20Z","https://github.com/vuejs/vitepress/issues/248",0.70916104,{"description":2937,"labels":2938,"number":2939,"owner":2871,"repository":2872,"state":2885,"title":2940,"updated_at":2941,"url":2942,"score":2943},"I'm new to vue and vitepress so I'm a little confused.\r\n\r\nI'm looking into adding markdown to my existing vue app. The way I imagined it would be some markdown element which would take the markdown text and render it. I'm also interested in embedding vue components inside the markdown. Something like\r\n```\r\n\u003CMarkdown>\r\n## abc\r\nefg\r\n### hij\r\nHi {{name}},\r\n\u003C/Markdown>\r\n```\r\nI was hoping vitepress would do it, but it seems like vitepress sets everything up as a standalone app. I can't simply add vitepress to my package.json and start using it's elements.\r\n\r\nAny examples of using vitepress in an existing vue as a library? Or any alternative?",[],315,"Use vitepress in an existing vue app","2023-01-21T16:22:21Z","https://github.com/vuejs/vitepress/issues/315",0.7096133,{"description":2945,"labels":2946,"number":2950,"owner":2871,"repository":2872,"state":2885,"title":2951,"updated_at":2952,"url":2953,"score":2954},"### Describe the bug\n\nwhen I bump vitepress to `1.0.0-rc.26`, I found the styles in `\u003Cstyle>` were not included in the packaged product.\r\n\r\n The style here is normal in the development environment, but it doesn't work after packing.\r\n\r\n``` vue\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"box\">Preview after packing, The text color is expected to be red\u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cstyle>\r\n.box {\r\n color: red;\r\n}\r\n\u003C/style>\r\n``` \r\n\r\nI try downgraded to `1.0.0-rc.25`, it was normal.\n\n### Reproduction\n\nreproduction link:\r\n[https://stackblitz.com/edit/vite-xmetfv?file=docs%2FDemo.vue](https://stackblitz.com/edit/vite-xmetfv?file=docs%2FDemo.vue)\r\n\n\n### Expected behavior\n\nPackaged for preview and styles can also take effect\r\n\r\nrelated documents:\r\n[https://vitepress.dev/guide/using-vue#script-and-style](https://vitepress.dev/guide/using-vue#script-and-style)\n\n### System Info\n\n```Text\nSystem:\r\n OS: Linux 5.15 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)\r\n CPU: (16) x64 AMD Ryzen 7 4800H with Radeon Graphics\r\n Memory: 6.16 GB / 7.44 GB\r\n Container: Yes\r\n Shell: 5.1.16 - /bin/bash\r\n Binaries:\r\n Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node\r\n Yarn: 1.22.19 - /mnt/c/Program Files/nodejs/yarn\r\n npm: 9.8.1 - ~/.nvm/versions/node/v18.18.2/bin/npm\r\n pnpm: 8.10.5 - ~/.nvm/versions/node/v18.18.2/bin/pnpm\r\n bun: 1.0.12 - ~/.nvm/versions/node/v18.18.2/bin/bun\r\n npmPackages:\r\n vitepress: 1.0.0-rc.26 => 1.0.0-rc.26\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.",[2947],{"name":2948,"color":2949},"build","377ba8",3216,"Using SFC in markdown, styles in the `\u003Cstyle>` tag is not effect.","2023-11-25T00:04:34Z","https://github.com/vuejs/vitepress/issues/3216",0.7114899,{"description":2956,"labels":2957,"number":2959,"owner":2871,"repository":2872,"state":2885,"title":2960,"updated_at":2961,"url":2962,"score":2963},"### 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.",[2958],{"name":2894,"color":2895},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.7147386,["Reactive",2965],{},["Set"],["ShallowReactive",2968],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f7OYO7rRR1Slh8NwtAp651EOWweFIpFg_aJ4kGZpziIg":-1},"/vuejs/vitepress/1600"]