`)\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.",[2881],{"name":2868,"color":2869},3021,"Make the default theme compatible with 3rd-party CSS frameworks","2023-11-06T14:43:58Z","https://github.com/vuejs/vitepress/issues/3021",0.7394632,{"description":2888,"labels":2889,"number":2894,"owner":2871,"repository":2872,"state":2873,"title":2895,"updated_at":2896,"url":2897,"score":2898},"### Describe the bug\n\nWhen using an env variable `VITE_COLOR` to change the color of a theme importing a different CSS file depending on that variable, the behavior seem to be correct during development, but not after build.\n\n### Reproduction\n\nMinimal reproducible example:\r\n\r\nhttps://github.com/Peque/vitepress-color-change\r\n\r\nThe repository has two commits:\r\n\r\n- [First commit](https://github.com/Peque/vitepress-color-change/commit/9353b5782a1aa08685fd341b5d8b2c5bd4cb92dd) is just a basic Vitepress template.\r\n- [Second commit](https://github.com/Peque/vitepress-color-change/commit/f291c8834b1f7e97fd8bf8c9105e47bb79d278cd) introduces the code to use different colors depending on the `VITE_COLOR` variable.\r\n\r\nDevelopment works as expected:\r\n\r\n- ✅ `VITE_COLOR=red npm run docs:dev` -> Red color \r\n- ✅ `VITE_COLOR=blue npm run docs:dev` -> Blue color\r\n\r\nBuilds do not work as expected when opening `http-serve`:\r\n\r\n- ✅ `VITE_COLOR=red npm run docs:build` -> Red color\r\n- ❌ `VITE_COLOR=blue npm run docs:build` -> **Red color**\n\n### Expected behavior\n\nDevelopment works as expected:\r\n\r\n- ✅ `VITE_COLOR=red npm run docs:dev` -> Red color \r\n- ✅ `VITE_COLOR=blue npm run docs:dev` -> Blue color\r\n\r\nBuilds do not work as expected when opening `http-serve`:\r\n\r\n- ✅ `VITE_COLOR=red npm run docs:build` -> Red color\r\n- ✅ `VITE_COLOR=blue npm run docs:build` -> **Blue color**\n\n### System Info\n\n```Text\nSystem:\r\n OS: Linux 6.10 Fedora Linux 39 (Container Image)\r\n CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz\r\n Memory: 9.52 GB / 15.54 GB\r\n Container: Yes\r\n Shell: 5.2.15 - /bin/bash\r\n Binaries:\r\n Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node\r\n npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm\r\n npmPackages:\r\n vitepress: ^1.3.4 => 1.3.4 \r\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.",[2890,2893],{"name":2891,"color":2892},"bug: pending triage","e99695",{"name":2868,"color":2869},4222,"Inconsistent handling of env variable in dev and build","2024-10-26T17:17:17Z","https://github.com/vuejs/vitepress/issues/4222",0.74782026,{"description":2900,"labels":2901,"number":2902,"owner":2871,"repository":2872,"state":2903,"title":2904,"updated_at":2905,"url":2906,"score":2907},"Hello,\r\n\r\nFirst of all, i want to say, I absolutely love Vitepress! I built an application with it that showcases our company's documentation (coding guidelines etc) but also a style guide where we showcase for example our reusable Vue components (that Vue components work out of the box was thrilling to discover!).\r\n\r\nFor this style-guide I also (next to the default Vitepress styles/theme) load our own .css file that contains our global styles. This works fine in light mode, except when i view the application in dark mode it clashes cause our global styles set a fixed `color: black` on for example `\u003Cp>` tags, so then you get black text on a black/dark background. So i've been looking for a way to force light mode in our Vitepress application.\r\n\r\nIn the documentation i only found that you can force dark mode, or that you can take the preferred color scheme of the user, and that you can remove the \"Switch dark/light mode\" toggle (i am guessing it then also takes the preferred color scheme of the user). by using the `appearance` boolean. \r\n\r\nI think for my use-case i'd need a 4th option, to force light mode. Is it possible to add this? And then i'd also need to hide or remove the dark/light mode toggle so users can't choose dark mode.\r\n\r\nThanks in advance!\r\n\r\nI am on \"vitepress\": \"^1.0.0-alpha.27\"",[],1600,"closed","Is it possible to force light-mode?","2023-01-21T14:20:47Z","https://github.com/vuejs/vitepress/issues/1600",0.6859351,{"description":2909,"labels":2910,"number":2912,"owner":2871,"repository":2872,"state":2903,"title":2913,"updated_at":2914,"url":2915,"score":2916},"### 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.",[2911],{"name":2891,"color":2892},3341,"Dark mode display issue after setting the accent color","2023-12-23T00:04:24Z","https://github.com/vuejs/vitepress/issues/3341",0.7154474,{"description":2918,"labels":2919,"number":2921,"owner":2871,"repository":2872,"state":2903,"title":2922,"updated_at":2923,"url":2924,"score":2925},"### 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.",[2920],{"name":2891,"color":2892},2830,"How to toggle dark theme in custom theme?","2023-08-30T00:04:14Z","https://github.com/vuejs/vitepress/issues/2830",0.7238842,{"description":2927,"labels":2928,"number":2932,"owner":2871,"repository":2872,"state":2903,"title":2933,"updated_at":2934,"url":2935,"score":2936},"### Is your feature request related to a problem? Please describe.\n\nHey, can you expose [`isDark`](https://github.com/vuejs/vitepress/blob/acca3a81c3096e24bff3524fbd3f12a55896c61c/src/client/theme-default/components/VPSwitchAppearance.vue#L7)\r\n\r\nFor example, I use hasClass to get whether there is a dark class in html or directly from storage, they are not responsive\n\n### Describe the solution you'd like\n\nIt may be used to adapt to dark mode when paired with some component libraries, thanks\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.",[2929],{"name":2930,"color":2931},"theme","0754FB",923,"Hey, can you expose `isDark`","2023-01-21T14:32:45Z","https://github.com/vuejs/vitepress/issues/923",0.725332,{"description":2938,"labels":2939,"number":2943,"owner":2871,"repository":2872,"state":2903,"title":2944,"updated_at":2945,"url":2946,"score":2947},"### 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.",[2940],{"name":2941,"color":2942},"docs","0075ca",1006,"docs: separate logo for dark mode","2023-01-21T14:28:47Z","https://github.com/vuejs/vitepress/issues/1006",0.73105824,{"description":2949,"labels":2950,"number":2951,"owner":2871,"repository":2872,"state":2903,"title":2952,"updated_at":2953,"url":2954,"score":2955},"### 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.",[],1157,"custom containers style option","2023-01-21T14:28:46Z","https://github.com/vuejs/vitepress/issues/1157",0.7330511,{"description":2957,"labels":2958,"number":2963,"owner":2871,"repository":2872,"state":2903,"title":2964,"updated_at":2965,"url":2966,"score":2967},"### 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.",[2959,2960],{"name":2930,"color":2931},{"name":2961,"color":2962},"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.7334643,["Reactive",2969],{},["Set"],["ShallowReactive",2972],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fZQ3V2So1EBhREY6LIjnsycC27Het6cwolW9RKoVtwKQ":-1},"/vuejs/vitepress/251"]