docs: guidelines for adding custom dark mode styles

docs/.vitepress/config.ts

@@ -98,7 +98,8 @@ function sidebarGuide() {
         { text: 'Team Page', link: '/guide/theme-team-page' },
         { text: 'Footer', link: '/guide/theme-footer' },
         { text: 'Search', link: '/guide/theme-search' },
-        { text: 'Carbon Ads', link: '/guide/theme-carbon-ads' }
+        { text: 'Carbon Ads', link: '/guide/theme-carbon-ads' },
+        { text: 'Dark Mode', link: '/guide/theme-appearance' },
       ]
     },
     {

docs/guide/theme-appearance.md

@@ -0,0 +1,9 @@
+# Dark Mode
+
+By default, VitePress will add a dark-mode toggle to the navigation bar. To remove it, set `false` to the [`config.appearance`](../config/app-configs.html#appearance) option. If you would like to customize the style in dark mode only, prepend `:root.dark ` to the CSS selectors:
+
+```css
+.dark .BannerPicture {
+  filter: grayscale(1) invert(1);
+}
+```

docs/guide/theme-introduction.md

@@ -13,6 +13,7 @@ VitePress comes with its default theme providing many features out of the box. L
 - [Footer](./theme-footer)
 - [Search](./theme-search)
 - [Carbon Ads](./theme-carbon-ads)
+- [Dark Mode](./theme-appearance)
 
 If you don't find the features you're looking for, or you would rather create your own theme, you may customize VitePress to fit your requirements. In the following sections, we'll go through each way of customizing the VitePress theme.