Add monochrome theme with grayscale filter (#4541)

docs/.vitepress/theme/style.scss

@@ -81,6 +81,15 @@
   --vp-custom-block-danger-text-deep: theme('colors.carnation.200');
 }
 
+.monochrome {
+
+  [class*='i-'],
+  svg,
+  img:not(.VPImage) {
+    filter: grayscale(100%);
+  }
+}
+
 .vp-doc a {
   color: var(--vp-c-brand-1);
   text-decoration: underline;
@@ -138,17 +147,13 @@
 */
 :root {
   --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: -webkit-linear-gradient(
-    120deg,
-    #c4b5fd 30%,
-    #7bc5e4
-  );
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg,
+      #c4b5fd 30%,
+      #7bc5e4);
 
-  --vp-home-hero-image-background-image: linear-gradient(
-    -45deg,
-    #c4b5fd 50%,
-    #47caff 50%
-  );
+  --vp-home-hero-image-background-image: linear-gradient(-45deg,
+      #c4b5fd 50%,
+      #47caff 50%);
   --vp-home-hero-image-filter: blur(44px);
 }
 
@@ -223,6 +228,7 @@
     animation: nprogress-spinner 400ms linear infinite;
   }
 }
+
 .nprogress-custom-parent {
   overflow: hidden;
   position: relative;
@@ -253,7 +259,7 @@
   }
 }
 
-#VPContent strong > a {
+#VPContent strong>a {
   font-weight: bold;
 }