\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.",[2906],{"name":2907,"color":2908},"bug: pending triage","e99695",2830,"closed","How to toggle dark theme in custom theme?","2023-08-30T00:04:14Z","https://github.com/vuejs/vitepress/issues/2830",0.6761014,{"description":2916,"labels":2917,"number":2918,"owner":2874,"repository":2875,"state":2910,"title":2919,"updated_at":2920,"url":2921,"score":2922},"### Is your feature request related to a problem? Please describe.\n\nAllow user to set color mode based on their system preferences:\r\n\r\n```ts\r\n appearance: 'system',\r\n```\n\n### Describe the solution you'd like\n\nThis would allow the user's system preferences to set the mode of the site.\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.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.",[],2808,"[Feature Request] Allow user to set system as appearance","2023-08-25T00:04:15Z","https://github.com/vuejs/vitepress/issues/2808",0.7070106,{"description":2924,"labels":2925,"number":2927,"owner":2874,"repository":2875,"state":2910,"title":2928,"updated_at":2929,"url":2930,"score":2931},"**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",[2926],{"name":2868,"color":2869},251,"Dark Mode out of the box","2023-01-21T16:04:22Z","https://github.com/vuejs/vitepress/issues/251",0.7198955,{"description":2933,"labels":2934,"number":2935,"owner":2874,"repository":2875,"state":2910,"title":2936,"updated_at":2937,"url":2938,"score":2939},"### Is your feature request related to a problem? Please describe.\n\nWe're using Custom Elements to encapsulate styles from our design system, so it'd be great to be able to tell Vitepress to ignore those tags.\r\n\r\nSuper lightweight example:\r\n\r\n```js\r\nclass ButtonExample extends HTMLElement {\r\n connectedCallback() {\r\n const designSystemCSS = '\u003Clink rel=\"stylesheet\" type=\"text/css\" href=\"designSystemURL\" />'\r\n const target = `\u003Cdiv id=\"app\">\u003C/div>`\r\n this.shadow = this.attachShadow({ mode: 'open' })\r\n this.shadow.innerHTML = designSystemCSS + target\r\n createApp(App) // App defined elsewhere ofc\r\n .mount(this.shadow.querySelector('#app'))\r\n }\r\n}\r\n```\n\n### Describe the solution you'd like\n\nProbably just being able to set `compilerOptions.isCustomElement` somewhere would be good enough?\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.",[],735,"Custom element support","2023-01-21T14:34:18Z","https://github.com/vuejs/vitepress/issues/735",0.7225967,{"description":2941,"labels":2942,"number":2946,"owner":2874,"repository":2875,"state":2910,"title":2947,"updated_at":2948,"url":2949,"score":2950},"### Is your feature request related to a problem? Please describe.\n\n当一个文档中的图片过多时,需要等待所有图片加载完,加载时间会明显过长\n\n### Describe the solution you'd like\n\n可否支持下内置图片懒加载功能呢?\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.",[2943],{"name":2944,"color":2945},"need more info","bdbefc",1456,"支持内置图片懒加载吗","2023-01-21T14:22:50Z","https://github.com/vuejs/vitepress/issues/1456",0.725374,{"description":2952,"labels":2953,"number":2957,"owner":2874,"repository":2875,"state":2910,"title":2958,"updated_at":2959,"url":2960,"score":2961},"### Is your feature request related to a problem? Please describe.\n\n有中文文档吗\n\n### Describe the solution you'd like\n\n有中文文档吗\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/coc)\n- [X] Read the [docs](https://vitepress.vuejs.org/).\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/master/.github/contributing.md).\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[2954],{"name":2955,"color":2956},"question","5D5FAE",414,"有中文文档吗","2023-01-21T16:20:24Z","https://github.com/vuejs/vitepress/issues/414",0.72634387,{"description":2963,"labels":2964,"number":2966,"owner":2874,"repository":2875,"state":2910,"title":2967,"updated_at":2968,"url":2969,"score":2970},"### Is your feature request related to a problem? Please describe.\n\naccent color copied from vuepress doesn't work.\r\nfile under: .vuepress/styles/palette.styl\r\nand value: $accentColor = #215AE5\n\n### Describe the solution you'd like\n\nif it works, it is easier to migrate from vuepress\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.",[2965],{"name":2955,"color":2956},1208,"Accent color","2023-01-21T14:27:00Z","https://github.com/vuejs/vitepress/issues/1208",0.72907203,["Reactive",2972],{},["Set"],["ShallowReactive",2975],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fbGv1DJUOZeQaw_JWG50pS8qLbEAPcm3fSKhvT1kQ_lA":-1},"/vuejs/vitepress/923"]