From 52f0aecd851bcd677c8abe464fbc4926169677dc Mon Sep 17 00:00:00 2001
From: Fuqiao Xue <xfq@w3.org>
Date: Sun, 3 Jul 2022 13:39:36 +0800
Subject: [PATCH] docs: guidelines for adding custom dark mode styles

---
 docs/.vitepress/config.ts        | 3 ++-
 docs/guide/theme-appearance.md   | 9 +++++++++
 docs/guide/theme-introduction.md | 1 +
 3 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 docs/guide/theme-appearance.md

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.