diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 64dd74f4..dcc742e1 100644
--- a/docs/.vitepress/config.ts
+++ b/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' },
       ]
     },
     {
diff --git a/docs/guide/theme-appearance.md b/docs/guide/theme-appearance.md
new file mode 100644
index 00000000..8edd8924
--- /dev/null
+++ b/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);
+}
+```
diff --git a/docs/guide/theme-introduction.md b/docs/guide/theme-introduction.md
index 09d56d66..0cd33a93 100644
--- a/docs/guide/theme-introduction.md
+++ b/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.